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>
Related
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>
This question already has answers here:
Can CSS detect the number of children an element has?
(11 answers)
Is there a CSS parent selector?
(33 answers)
Closed 1 year ago.
I would like to apply css (break-inside: avoid;) to any parent div who has more than x children.
Here is an example:
<div class="section">
<div>Child 1</div>
<div>Child 2</div>
<div>Child 3</div>
</div>
If the section has, for example, less than 4 children I want to use break-inside: avoid;. Otherwise break-inside: auto;. I tried with nth-child/last-child without success
Thanks
This question already has answers here:
Aligning grid items across the entire row/column (like flex items can)
(3 answers)
Closed 4 years ago.
In a flexbox I can specify flex-grow:1 on a child to say it should take up the remaining space.
html, body {
height: 100%
}
<div style="display:flex;flex-direction:column;height:100%">
<div style="background-color:yellow;height:50px"></div>
<div style="background-color:red;flex-grow:1"></div>
</div>
Is it possible to do the same thing with css grid? i.e. to specify against a child item that it should use remaining space without defining it explicitly using grid-template-rows?
html, body {
height: 100%
}
<div style="display:grid;grid-template-columns:auto;height:100%">
<div style="background-color:yellow;height:50px"></div>
<!-- what to use instead of flex-grow:1? -->
<div style="background-color:red;flex-grow:1;"></div>
</div>
The real scenario relates to a grid containing a runtime defined number of columns, and a runtime defined set of children some of which may be display:none.
You could specify the row height with grid-template-rows: min-content auto;, which minimizes the first row and stretches the second.
html,
body {
height: 100%
}
<div style="display:grid;grid-template-columns:auto;height:100%;grid-template-rows: min-content auto;">
<div style="background-color:yellow;height:50px"></div>
<div style="background-color:red;"></div>
</div>
This question already has answers here:
Why does 'overflow: auto' clear floats? And why are clear floats needed?
(1 answer)
Why does overflow: hidden have the unexpected side-effect of growing in height to contain floated elements?
(2 answers)
CSS overflow:hidden with floats
(5 answers)
Explanation on CSS float overflow property
(2 answers)
Why the 'float' css attribute influence parent sibling div?
(2 answers)
Closed 5 years ago.
The code below stops the clearfix parent element from collapsing when both of it's children are floated.
Can anyone tell me how / why it works?
.clearfix {
overflow: hidden; /* can also be "auto" */
}
<div class="clearfix">
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>
This question already has answers here:
My inline-block elements are not lining up properly
(5 answers)
Why are these two inline-blocks not aligned? [duplicate]
(2 answers)
Vertically aligning relative inline block with non-relative inline blocks [duplicate]
(1 answer)
Display inline block text inside issue
(3 answers)
Closed 5 years ago.
My problem is that i'm trying to get three entirely independent columns and with 'display: inline-block', my columns get side by side but starts under the biggest.
HTML, CSS:
.container > div {
display: inline-block;
}
<body>
<div class="container">
<div>
aaaaaaa<br>bbbbbb
</div>
<div>
cccccc<br> ddddddd<br>eeeeeee
</div>
<div id="end">
ffffff
</div>
</div>
</body>
The problem is that the smallest line is aligned to the last line of the biggest div, as follows:
When dealing with inline-level and table cell elements, the vertical-align property applies. The initial value of this property is baseline. That's what you're seeing. The text in each box is aligned to the baseline. Adjusting the vertical-align property to another value (such as top) solves the problem.
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
Found the solution, although i don't think it's the best way to do this:
.container > div {
vertical-align: top;
}
:)
You could add css property vertical-align: top, that way all content will start at the top of the div.
.container > div {
display: inline-block;
vertical-align:top
}
<body>
<div class="container">
<div>
aaaaaaa<br>bbbbbb
</div>
<div>
cccccc<br> ddddddd<br>eeeeeee
</div>
<div id="end">
ffffff
</div>
</div>
</body>