obreezy obreezy -4 years ago 80
CSS Question

How to break flex items into columns for mobile?

I'm using flex and I have 4 columns. How would I break it to have 2 side by side for mobile?

My pen: http://codepen.io/omarel/pen/PpPXao



.flexparent {
display: -webkit-flex;
display: flex;
width: 100%;
max-width: 700px;
margin: 0 auto;
justify-content: center;
}

.flexparent .flexchild {
width: 30%;
}

<div class="flexparent">
<div class="flexchild">
<img src="../images/new/mw/icons/icon-trains.png" alt="">
<h2>Col 1</h2>

</div>
<div class="flexchild">
<img src="../images/new/mw/icons/icon-events.png" alt="">
<h2>Col 2</h2>

</div>
<div class="flexchild">
<img src="../images/new/mw/icons/icon-parks.png" alt="">
<h2>Col 3</h2>
</div>
<div class="flexchild">
<img src="../images/new/mw/icons/icon-walk.png" alt="">
<h2>Col 4</h2>
</div>
</div>




Answer Source

Set the parent to flex-wrap: wrap; and the children to width: 50% to have 2 per row.

.flexparent {
  display: -webkit-flex;
  display: flex;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  justify-content: center;
}

.flexparent .flexchild {
  width: 30%;
}

@media (max-width: 420px) {
  .flexparent {
    flex-wrap: wrap;
  }
  .flexparent .flexchild {
    width: 50%;
  }
}
<div class="flexparent">
  <div class="flexchild">
    <img src="../images/new/mw/icons/icon-trains.png" alt="">
    <h2>Col 1</h2>

  </div>
  <div class="flexchild">
    <img src="../images/new/mw/icons/icon-events.png" alt="">
    <h2>Col 2</h2>

  </div>
  <div class="flexchild">
    <img src="../images/new/mw/icons/icon-parks.png" alt="">
    <h2>Col 3</h2>
  </div>
  <div class="flexchild">
    <img src="../images/new/mw/icons/icon-walk.png" alt="">
    <h2>Col 4</h2>
  </div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download