In a flex container I have 5 items with a column direction but in a certain width I want to display 3 per column and force the others to wrap
is there any way to do that without fixed height ?
my code :
<div class="container">
<div class="item-1 item">Item 1</div>
<div class="item-2 item">Item 2</div>
<div class="item-3 item">Item 3</div>
<div class="item-4 item">Item 4</div>
<div class="item-5 item">Item 5</div>
</div>
.container {
display: flex;
flex-flow: column wrap;
}
@media (min-width: 30em) {
}
js Bin: http://jsbin.com/fesujifelu/edit?html,css,output
Approach: To create a two-column layout, first we create a <div> element with property display: flex, it makes that a div flexbox and then add flex-direction: row, to make the layout column-wise. Then add the required div inside the above div with require width and they all will come as columns.
The flex-shrink property. The flex-shrink property specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed.
In flexbox, items need a height / width limit on the container in order to wrap. Otherwise, they have no breakpoint and will continue along the same line.
But your layout is not a problem in CSS Grid Layout:
http://jsbin.com/lapafidejo/1/edit?html,css,output
/* =================================
Flexbox
==================================== */
.container {
display: grid;
grid-template-columns: 1fr;
}
/* =================================
Media Queries
==================================== */
@media (min-width: 30em) {
.container {
grid-template-rows: 1fr 1fr 1fr;
grid-auto-columns: 1fr;
grid-auto-flow: column;
}
}
/* =================================
Page Styles
==================================== */
* {
box-sizing: border-box;
}
body {
font-size: 1.35em;
font-family: 'Varela Round', sans-serif;
color: #fff;
background: #e8e9e9;
padding-left: 5%;
padding-right: 5%;
}
.container {
padding: 10px;
background: #fff;
border-radius: 5px;
margin: 45px auto;
box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, 0.1);
}
.item {
color: #fff;
padding: 15px;
margin: 5px;
background: #3db5da;
border-radius: 3px;
}
<div class="container">
<div class="item-1 item">Item 1</div>
<div class="item-2 item">Item 2</div>
<div class="item-3 item">Item 3</div>
<div class="item-4 item">Item 4</div>
<div class="item-5 item">Item 5</div>
</div>
Browser Support for CSS Grid
Here's the complete picture: http://caniuse.com/#search=grid
Resources:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With