I am trying to get the following layout to work using flexbox, I have two div containers next to each other. In the first div there are 6 boxes they must be 3, then wrap on to the next line. The second div contains text. I have tried a number of different approaches as I would like them all stacked on mobile and tablet and then laid out above on desktop.
Code I have so far:
<div class="container">
<div class="child">Test</div>
<div class="child">Test</div>
<div class="child">Test</div>
<div class="child">Test</div>
<div class="child">Test</div>
<div class="child">Test</div>
</div>
<div class="box-container">
<h1>hello</h1>
</div>
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 800px;
border: 1px solid red;
}
.child {
flex: 0 0 calc(33.3% - 20px);
border: 1px solid blue;
}
.box-container{
display:flex;
}
The two containers are made to be next to each other by setting flex-basis: 50% so that they each take up 50% of the row and by making their container (body) a flex container.
A media query is used to change the style when the maximum width of the screen is 768px or lower. It changes the the flex-direction of the containers to column so that elements are stack vertically. Then, flex-basis is set to 100% so each element takes up an entire column.
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-basis: 50%;
border: 1px solid red;
}
.child {
flex: 0 0 calc(33.3% - 20px);
border: 1px solid blue;
}
.box-container {
display: flex;
flex-basis: 50%;
}
body {
display: flex;
}
#media only screen and (max-width: 768px) {
.container {
flex-direction: column;
flex-basis: 100%;
}
.child {
flex-basis: 100%;
}
body {
display: flex;
flex-direction: column;
}
.box-container {
flex-basis: 100%;
}
}
<body>
<div class="container">
<div class="child">
Test
</div>
<div class="child">
Test
</div>
<div class="child">
Test
</div>
<div class="child">
Test
</div>
<div class="child">
Test
</div>
<div class="child">
Test
</div>
</div>
<div class="box-container">
<h1>
hello
</h1>
</div>
</body>
Related
How to create two containers with equal width even if there are a lot of flex items inside one of them? I could add overflow hidden to both containers but it seems to be workaround rather than solution of the problem
<div class="parent">
<div class="child1">
blabla
</div>
<div class="child2">
<div class="container">
<div class="subcontainer">aaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="subcontainer">bbbbbbbbbbbbbbbbbbbbbbb</div>
<div class="subcontainer">ccccccccccccccccccccccc</div>
<div class="subcontainer">dwadawdwdaadwawadawddwaw</div>
<div class="subcontainer">dddddddddddddddddddddddd</div>
<div class="subcontainer">eeeeeeeeeeeeeeeeeeeeeeee</div>
</div>
</div>
</div>
.parent {
display: flex;
}
.child1, .child2 {
flex: 1;
flex-basis: 50%;
/* overflow: hidden */
}
.container {
display: flex;
}
.child1 {
border: 1px solid red;
}
.child2 {
border: 1px solid green;
}
https://jsfiddle.net/0e7n6g8b/
Simply add flex-wrap:wrap; to your container div.
.container {
display: flex;
flex-wrap:wrap;
}
Thanks
I have something like this :
.wrapper {
display: flex;
width: 300px;
}
.content {
flex: auto;
}
.row {
display: flex;
flex-flow: row wrap;
}
.col {
width: 25%;
padding: 5px;
border: 1px solid black;
box-sizing: border-box;
}
<div class='wrapper'>
<div class='content'>Content</div>
<div class='row'>
<div class='col'>aa</div>
<div class='col'>aaaa</div>
<div class='col'>aaaaaa</div>
<div class='col'>aaaaaaaa</div>
</div>
</div>
I can't understand how :
The width of the .row element is calculated
The width of the .col elements are calculated
Why some content overflows the box and some don't
What I want is a grid system that gets its size relative to the largest child, so that each content fits in its .col cell.
I saw that I could do that with display: grid and grid-template-columns: 1fr 1fr 1fr 1fr, but then how do you make it responsive and how well is it supported ?
To answer your 3 first questions, you simly need to remove the width:25% to have the following:
.wrapper {
display: flex;
width: 300px;
}
.content {
flex: auto;
}
.row {
display: flex;
flex-flow: row wrap;
}
.col {
padding: 5px;
border: 1px solid black;
box-sizing: border-box;
}
<div class='wrapper'>
<div class='content'>Content</div>
<div class='row'>
<div class='col'>aa</div>
<div class='col'>aaaa</div>
<div class='col'>aaaaaa</div>
<div class='col'>aaaaaaaa</div>
</div>
</div>
We didn't define any width, so each col will fit its content and the row will have the width equal to the sum of all the col.
Now since we have the width of the row defined based on the content, it won't change and it will get used as a reference for the percentage. Using 25% for the col means that each one will get 25% of the previously defined width and we will logically have some overflow since the content inside each col isn't the same.
.wrapper {
display: flex;
width: 300px;
}
.content {
flex: auto;
}
.row {
display: flex;
flex-flow: row wrap;
}
.col {
padding: 5px;
border: 1px solid black;
box-sizing: border-box;
}
.width .col {
width:25%;
}
<div class='wrapper'>
<div class='content'>before width</div>
<div class='row'>
<div class='col'>aa</div>
<div class='col'>aaaa</div>
<div class='col'>aaaaaa</div>
<div class='col'>aaaaaaaa</div>
</div>
</div>
<div class='wrapper'>
<div class='content'>after width</div>
<div class='row width'>
<div class='col'>aa</div>
<div class='col'>aaaa</div>
<div class='col'>aaaaaa</div>
<div class='col'>aaaaaaaa</div>
</div>
</div>
To obtain what you want, I think the 1fr of CSS grid is the way to go (like you already noticed). Actually CSS grid is well supported. You will simply have issues with IE and you can follow this link to see the known bugs: https://caniuse.com/#feat=css-grid
In order to make it responsive you may consider media query to switch to a column layout on small screens:
.wrapper {
display: flex;
width: 300px;
}
.row {
display: grid;
grid-auto-columns:1fr;
grid-auto-flow:column;
}
.col {
padding: 5px;
border: 1px solid black;
box-sizing: border-box;
}
#media all and (max-width:500px) {
.row {
grid-auto-flow:row;
}
}
<div class='wrapper'>
<div class='content'>Content</div>
<div class='row'>
<div class='col'>aa</div>
<div class='col'>aaaa</div>
<div class='col'>aaaaaa</div>
<div class='col'>aaaaaaaa</div>
</div>
</div>
i want to create a flexbox layout title, detail, and other content inside one div and a div with content close next to this div and should be placed in the center of the main box (named container).
What i have tried to do?
I created a div named container and placed title and other details inside it. In doing so, close div is also inside the div named container. It should be outside the container div and in middle of it.
I want to create a layout like in picture below,
Could someone help me solving this? link to code
https://codepen.io/anon/pen/BbaKwy
.box_wrapper {
width: calc(100% - 450px);
border: 1px solid green;
margin: 0 auto;
}
.container {
display: flex;
justify-content: space-between;
border: 1px solid blue;
padding: 10px;
}
<div class="box_wrapper">
<div class="container">
<div class="content">
<div>title</div>
<div>detail</div>
<div>
<div>ticket number</div>
<div>
<h2>Debug</h2>
someresponse
<div/>
</div>
</div>
</div>
<div>close</div></div></div>
Thanks.
You can achieve the desired result by moving the close div and adding a couple more styles to box_wrapper
.box_wrapper {
display: flex;
flex-direction: row;
align-items: center;
border: none;
margin: 0 auto;
}
.container {
display: flex;
justify-content: space-between;
width: calc(100% - 450px);
border: 1px solid blue;
padding: 10px;
}
<div class="box_wrapper">
<div class="container">
<div class="content">
<div>title</div>
<div>detail</div>
<div>
<div>ticket number</div>
<div>
<h2>Debug</h2>
someresponse
<div/>
</div>
</div>
</div>
</div>
</div>
<div>close</div>
adding the flex-direction:row to .box_wrapper is what aligns it to the right, and setting align-items:center is what positions it in the middle vertically.
EDIT:
If you want to achieve this while keeping the close div within the box_wrapper class, you can do so as follows:
.box_wrapper {
display: flex;
flex-direction: row;
border: none;
margin: 0 auto;
width: calc(100% - 450px);
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
flex-grow: 1;
padding: 10px;
}
.content {
border: 1px solid blue;
flex-grow: 1;
}
<div class="box_wrapper">
<div class="container">
<div class="content">
<div>title</div>
<div>detail</div>
<div>
<div>ticket number</div>
<div>
<h2>Debug</h2>
someresponse
<div/>
</div>
</div>
</div>
</div>
<div>close</div>
</div>
firstly sorry for my English,
I ask me if we can change the style of a last child in flex div when this one goes to the line (wrap).
What I want precisely is to modify the last child (.flexChild in demo) to change the justify-content at space-around or to add padding when the user is on mobile or he resize the window
(without mediaqueries)
DEMO Here
.parent {
display: flex;
align-items: center;
flex-wrap: wrap;
width: 100%;
height: 100px;
background: red;
}
.child {
padding: 0 20px;
background: green;
border: 1px solid black;
}
.flexChild {
background: yellow;
display: flex;
min-width: 200px;
flex-wrap: wrap;
flex: 1 1 auto;
justify-content: space-between;
}
<div class="parent">
<div class="child">
Testtestesttest
</div>
<div class="child">
testtesttestt
</div>
<div class="child">
testesttestest
</div>
<div class="child flexChild">
<div class="left">
<button>1</button>
<button>2</button>
</div>
<div class="right">
<button>3</button>
</div>
</div>
</div>
I would like an intro section on the left side of a .container and a side bar on the right.
On the left side underneath the .intro section I want there to be four divs equally spaced like a grid.
I'm having problems with getting the "grid set up". I think part of the problem is that the parent has some flexbox attribute effecting the children.
Requirement : The intro section should be centered in the .left-side and the "grid" should not be centered the boxes should take up as much space as necessary to fit 2 on a row with margins in between. The .intro should be 80 percent of the width of the leftside.
I don't want to do any major changes to the structure this is just a small sample of how my project is set up.
.container{
width: 80%;
margin: 0 auto;
display: flex;
}
.left-side{
flex:8;
display: flex;
justify-content:center;
flex-wrap: wrap;
}
.side-bar{
flex: 2;
height: 100vh;
background: powderblue;
}
.intro{
flex:3;
width:80%;
height: 300px;
background: skyblue;
}
.box{
background: red;
width: 45%;
height: 100px;
flex:4;
border:1px solid orange;
}
<div class="container">
<div class="left-side">
<div class="intro">
intro
</div>
<div class="recent">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
</div>
<div class="side-bar">
sidebar
</div>
Flex items can also be flex containers. This enables you to nest multiple containers, with flex-direction: row or column, in a larger container.
For your layout, you can build a column consisting of two flex items. The first item (.intro) has 80% width and can be centered horizontally. The second item (.recent) can be a flex container with four items arranged in a 2x2 grid.
.container {
width: 80%;
margin: 0 auto;
display: flex;
justify-content: center;
height: 100vh;
}
.left-side {
flex: 4;
display: flex;
flex-direction: column;
}
.side-bar {
flex: 1;
background: powderblue;
}
.intro {
flex: 3;
height: 300px;
width: 80%;
margin: 0 auto;
background: skyblue;
}
.recent {
display: flex;
flex-wrap: wrap;
background-image: url("http://i.imgur.com/60PVLis.png");
background-size: contain;
}
.box {
margin: 5px;
flex-basis: calc(50% - 10px);
height: 100px;
box-sizing: border-box;
background: red;
}
body { margin: 0; }
<div class="container">
<div class="left-side">
<div class="intro">intro</div>
<div class="recent">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
</div>
<div class="side-bar">
sidebar
</div>
</div>