This question already has answers here:
Force flex item to span full row width
(2 answers)
Closed 1 year ago.
It is posible to have a div parent with display flex and that the first child push the next siblings to the bottom line.
I have this situation and using display flex and the structure can´t be modify.
This could be done with grid with 3 lines of code, but I can´t figgure it out using flex in the parent.
<div class=items-container>
<div class="item1">item 1</div>
<div class="item2">item 2</div>
<div class="item3">item 3</div>
</div>
I left the example in this link:
https://codepen.io/plevindo/pen/porqbXv
Pretty simple, just use flex with flex-wrap on the parent, and the first item set flex-basis to 100%. That will push the siblings to the next line.
.items-container {
display: flex;
flex-wrap: wrap;
}
.item1 {
flex: 1 1 100%;
}
<div class=items-container>
<div class="item1">item 1</div>
<div class="item2">item 2</div>
<div class="item3">item 3</div>
</div>
Related
This question already has answers here:
Flexbox: 4 items per row
(10 answers)
How to display 3 items per row in flexbox?
(3 answers)
Closed last year.
If I have say 6 items within a div and I want to space 3 then 3 directly underneath can I use one div to contain my 6 total divs and space them to wrap under or do I need to have two separate divs to contain 3 in each?
I have tried to use a div to separate at 3 boxes in each div but I cannot get the boxes to line up.
What I am attempting to do is this-
box Box Box
box Box Box
currently it looks like this
box box box box box box
If I
.boxes {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
<div class="boxes">
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
<div class="box3">Box 3</div>
<div class="box4">Box 4</div>
<div class="box5">Box 5</div>
<div class="box6">Box 6</div>
</div>
split the div class=boxes at 3 and create another for the last three boxes it will split into two rows, but I cannot get them to line up. is there a way to wrap around from the code I have written?
Use CSS Grid if you want to set the number of desired columns.
.boxes {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
<div class="boxes">
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
<div class="box3">Box 3</div>
<div class="box4">Box 4</div>
<div class="box5">Box 5</div>
<div class="box6">Box 6</div>
</div>
If you prefer you can also use the CSS repeat() function:
grid-template-columns: repeat(3, 1fr);
This question already has answers here:
Is there a way to remove a div but keep its elements?
(2 answers)
Closed 1 year ago.
I have a content management system that generates code like
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
and depending on the query it might also generate
<div class="container">
<div class="section">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</div>
I want container be a flexbox container, and item be flexbox children in all cases.
Is there a way to unwrap the section element (=make the browser ignore this div layer - so that the item elements will be treated as if they where direct children of container)?
Or is that impossible with pure CSS?
You can do that like this:
.container, .container > .section {
display: flex;
...
}
.container > .item, .container > .section > .item {
...
}
It wouldn’t be a good idea to remove the section element because that is there for a reason. But the css above will take care of both cases.
You can add new rules for case when CMS creates additional tag and then add specificity them to increase chances that correct rule will be applied:
div.container div.section {
display: flex;
}
Read more about specificity here
As far as children elements are concerned, .section is a child element of .container and .item elements are children of .section. There isn't a way to ignore this via CSS.
I'd recommend you copy the styles of .container to .section and just make the necessary adjustments there.
It would help if you shared your current styles.
This question already has answers here:
The difference between flex:1 and flex-grow:1
(2 answers)
Nested column flexbox inside row flexbox with wrapping
(2 answers)
Closed 5 years ago.
Edit
Unlike The difference between flex:1 and flex-grow:1 . While the answer ultimately was the use of flex instead of flex-grow, my question was not the difference between the two but rather how to get nested flex-boxes to wrap appropriately. For someone struggling with this issue, there would be no way to find that answer on SO without already knowing the issue was the use of flex vs. flex-grow. If I already knew the issue was the difference between flex and flex-grow, I wouldn't have needed to ask the question.
Edit 2
If this post is going to be flagged as duplicate, it would be better to list it as a duplicate of Nested column flexbox inside row flexbox with wrapping instead of The difference between flex:1 and flex-grow:1.
I have a series of div tags that are defined as display:flex. They are laid out as a row with 3 columns. The first two columns are given a width and the third column is allowed to stretch to fill the rest of the space. The row is also set to wrap so that on smaller screens, the third column will wrap below the other two columns.
Here is some basic example code:
style.css
.flex-row {
display: flex;
flex-direction: row;
flex-grow: 1;
}
.flex-column {
display: flex;
flex-direction: column;
flex-grow: 1;
border: 1px solid lightgray;
}
.box {
display: flex;
height: 100px;
width: 300px;
min-width: 200px;
flex-shrink: 1;
border: 1px solid green;
}
index.html
<div class="flex-row" style="flex-wrap:wrap">
<div class="flex-column" style="flex-grow:0">
Column 1
</div>
<div class="flex-column" style="flex-grow:0;width:200px">
Column 2
</div>
<div class="flex-column">
<div class="flex-row" style="min-width:500px;flex-wrap:wrap">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
<div class="box">Box 6</div>
<div class="box">Box 7</div>
</div>
</div>
</div>
(see my plnk here).
The last column contains a flex row with a series of "boxes" (see the example).
The desired effect is that as the screen is resized, the third column will continue to shrink down to the point where all the boxes are in a single column and the boxes have shrunk to their min-width. At that point, any further reduction in the screen width would cause the third column to wrap below the other two columns and it would then again expand to include as many boxes side by side as possible.
What seems to be happening in practice is that the third column wraps first -- before wrapping the contents it contains.
Here is a visual picture of what I'm want to see happen.
Is this possible to do with flexbox? If so, what am I doing wrong?
Here is what you desire. What you need to change :
For the flex-column it should be flex: 1; instead of flex-grow:1; and set a min-width to it. This way, it can grow and shrink both.
Using flex-grow:1 limits the container to only grow but not shrink and since you're using the flex-column class in the initial container i.e flex-row you need it to be flexible as the viewport is resized.
/* Styles go here */
.flex-row {
display: flex;
flex-direction: flex-row;
flex-grow: 1;
}
.flex-column {
display: flex;
flex-direction: column;
min-width:100px;
flex: 1;
border: 1px solid lightgray;
}
.box {
display:flex;
flex-shrink:1;
border: 1px solid green;
height:100px;
width:300px;
min-width:150px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="flex-row" style="flex-wrap:wrap">
<div class="flex-column" style="flex-grow:0">
Column 1
</div>
<div class="flex-column" style="flex-grow:0;width:200px">
Column 2
</div>
<div class="flex-column">
<div class="flex-row" style="min-width:500px;flex-wrap:wrap">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
<div class="box">Box 6</div>
<div class="box">Box 7</div>
</div>
</div>
</div>
</body>
</html>
This question already has answers here:
Can flex items wrap in a container with dynamic height?
(2 answers)
in flexbox how to push next row element close to right top element of previous row, without negative margins?
(1 answer)
How to specify line breaks in a multi-line flexbox layout?
(9 answers)
Closed 5 years ago.
Please see the example attached.
i need the following:
have a column layout. flex-direction:column;
have a wrap break-point after child 2.
all childs must be directly descendant of parent container.
Currently i can achieve this by specifying explicit height to the container. for example: height:100px.
however, i don't want to do this. i want the second child take as height as it needs to have (by the content), and the third child to follow on the second column.
thanks.
.flex-container {
display: flex;
flex-flow: column wrap;
}
.child {padding: 0.5em;background: rgba(0,0,255,0.15);}
<div class="flex-container">
<div class="child one">Child One</div>
<div class="child two">Child Two</div>
<div class="child three">Child Three</div>
<div class="child four">Child Four</div>
</div>
Why is 100% width not applied in this implementation (where the class uk-width-1-1 is applied to nested div of child of grid container):
<div uk-grid>
<!-- column 01 -->
<div>
<!-- this will be a row, stacked -->
<div class="uk-width-1-1 mine">Row 01</div>
<!-- this will be a row, stacked -->
<div class="mine">Row 02</div>
</div>
</div>
However it is applied when implementing like this (where the class uk-width-1-1 is applied to child of grid container):
<div uk-grid>
<!-- column 01 -->
<div class="uk-width-1-1">
<!-- this will be a row, stacked -->
<div class="mine">Row 01</div>
<!-- this will be a row, stacked -->
<div class="mine">Row 02</div>
</div>
</div>
I can see how to achieve the effect I want, but would like to know what the logic is behind it so I can understand it better.
jsFiddle showing both implementations is here.
Edit:
I can replicate the behaviour using just flex styles - so I need to figure out why can child div be 100% and nested divs cannot?
<!-- nested div is only the width of the content -->
<div style="display:flex; flex-wrap: wrap">
<div>
<div style="width:100%; background: red">Item 1</div>
<div style="width:100%; background: red">Item 2</div>
</div>
</div>
<!-- if applied to child div, is 100% width of parent -->
<div style="display:flex; flex-wrap: wrap">
<div style="width:100%">
<div style="background: red">Item 1</div>
<div style="background: red">Item 2</div>
</div>
</div>
<!-- if not using flex at all, nested divs are 100% width of parent -->
<div>
<div>
<div style="width:100%; background: red">Item 1</div>
<div style="width:100%; background: red">Item 2</div>
</div>
</div>
Perhaps a flex item, which is any immediate child div in a flex container, by default is the width of its content, therefore nested divs, if given width: 100%, faithfully represent 100% of their immediate parent container's width and not the top level container where display: flex is defined?
Why does applying uk-width-1-1 effect child divs of uk-grid but not
nested divs of child?
Children of flex items is not part of the Flexbox. It is only children of a flex container (an element with display: flex) that is (or as you called them, immediate children), so your inner most div's is normal block level elements and will not respond to the set class uk-width-1-1, their parent will though, as in your second sample.
When it comes to Flexbox, one can, simplified, say they that the flex container behave similar to a block element and the flex item like a inline block.
This is also shown in your 1st replicated sample, where neither the flex item nor the inner most div's have a set width, so the inner most div's content will define the width of the flex item, in the same way a nested div in a div would, where the outer div is set to display: inline-block.
Here is some good resources:
https://www.w3.org/TR/css-flexbox-1/#box-model
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Updated
Note, a flex item can at the same time also be a flex container, like in below sample
<div style="display:flex; flex-wrap: wrap">
<div style="display:flex; flex-wrap: wrap; flex-grow: 1; ">
<div style="flex-basis: 100%; background: red">Item 1</div>
<div style="flex-grow: 1; background: red">Item 2</div>
</div>
</div>