user2548744 user2548744 - 6 months ago 17
CSS Question

holy grial layout with flex

I just use

flex
for layout, the markup like this:

<div class="grid">
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
</div>


and the normal view like this:

layout structure - default

when in a breakpoint, view like this:

layout structure - responsive

the problem is, do not change the markup and just use
flex
, how can I make this?

Answer

With flex, you may use min-width to set a breaking-point. example with 2 childs at:

min-width:200px;
margin:10px;
padding:10px;
flex:1 

makes a first break point at 200px + 40px margin + 40px padding = ~ 480px (mind borders too or reset box-sizing properties)inside the flex container .


Example with your structure breaking at average 750px

.grid {
  display: flex;
  flex-wrap: wrap;
  border: solid;
}
.grid div {
  padding: 10px;
  margin: 10px;
  flex: 1;
  border: solid;
  min-width: 200px;
  /* from 3 childs: avearge breaking points */
  /* first breaking-point at 200 x 3 + padding/margin = 730px within flex-container */
  /*second breaking-point at 200 x 2 + padding/margin = 480px within flex-container */
}
<div class="grid">
  <div class="grid-cell"></div>
  <div class="grid-cell"></div>
  <div class="grid-cell"></div>
</div>