Item alignment in mobile using flexbox

Question

I want these items to be aligned same as in the pic when it comes to mobile sizes using flexbox.

Does this answer your question? [First-child full-width in Flexbox](https://stackoverflow.com/questions/41789278/first-child-full-width-in-flexbox) — Armando K., Jan 04 '20 at 00:04
The answer will be fragmented in this case. Look at @media rules for different devices https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ after that for the mobile implementation, you use the linked supplied with Armando above . So the media rules will give you the ability to capture different devices and based on that you implement different styling for each devices . For desktop see this sample https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox — Alan M, Jan 04 '20 at 00:09

llobet · Answer 1 · 2020-01-04T01:00:38.810

flex-wrap is the one that can move the silbing items to the next row.

Using flex-basis you can adjust the width of each item.

You just need to select the @media you need to separate phone from desktop.

.parent {
  display: flex;
  flex-flow: row wrap;
}

.div1, .div2, .div3 { 
  flex-grow: 1;
  flex-shrink: 0;
}

.div1 { flex-basis: 100%; }
.div2, .div3 { flex-basis: 50%; }

@media (min-width: 700px) {
/* select desired media */
  .div1, .div2, .div3 { flex-basis: auto; }
}

<div class="parent">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
</div>

score 1 · Answer 2 · answered Jan 04 '20 at 00:34

Although Gridbox would be better for this task it can be done in Flexbox via the following code:

<div class="container">
  <div class="a">1</div>
  <div>2</div>
  <div>3</div>
</div>

.container {  
  display: flex;

  div {
    width: 300px;
    height: 500px;
    border: solid 1px red;
  }  
}

@media (max-width: 800px) {

  .container {
    flex-wrap: wrap;

    .a {
      width: 100%;  
    }
  }
}

The key is to enable wrap at the smaller view-port and adjust the width of the div you want to span the entire row.

Item alignment in mobile using flexbox

2 Answers2