CODEWITHSUNDEEP
cssflexbox
newbie
newbie

Reputation: 149

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?

Upvotes: 0

Views: 51

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 106048

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>

Upvotes: 1

Related Questions