Don't know if this question is simple or no, but i got stuck with it: is it possible to create a flexible adaptive table-like layout which changes it's columns amount depending on a window width?
Illustration:
(green border means initial size of a block (size of a block contents), black border means calculated/rendered size of a block)
The goal is to create a layout in which:
Flexbox and media queries can do this:
* {
box-sizing: border-box;
}
.wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
width: 80%;
margin: auto;
border: 1px solid red;
padding: 1em;
}
.box {
border: 1px solid grey;
margin-bottom: 1em;
flex: 1 0 100%;
background: #c0ffee;
padding: 0 1em;
}
@media screen and (min-width: 500px) {
.box {
flex: 0 0 48%;
background: #bada55;
}
}
@media screen and (min-width: 750px) {
.box {
flex: 0 0 30%;
background: rebeccapurple;
}
}
@media screen and (min-width: 1000px) {
.box {
flex: 0 0 24%;
background: #b19d09;
}
}
<div class="wrapper">
<div class="box">
<p>Lorem ipsum dolor sit.</p>
</div>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, totam.</p>
</div>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, cum. Voluptate natus quaerat eaque incidunt, accusamus veniam facere, alias provident odio est rerum commodi?</p>
</div>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, dolore.</p>
</div>
<div class="box">
<p>Lorem ipsum dolor sit.</p>
</div>
<div class="box">
<p>lorem</p>
</div>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus nobis odit possimus porro. Nihil, modi.</p>
</div>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium vel, accusamus cupiditate esse quisquam, nisi hic dolores assumenda adipisci, illum ab itaque nemo placeat! Dolorum aliquam iure veritatis reprehenderit libero.</p>
</div>
</div>
A Complete Guide to Flexbox @ CSS-Tricks.com