CODEWITHSUNDEEP
htmlcssflexbox
Vincent Chua
Vincent Chua

Reputation: 1007

Responsive grid using CSS display:flex

I would like to display my flexbox from 5 columns (A,B,C,D,E) to 2 columns once the screen gets to 900px and smaller.

My html:

<div class="container">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
  <div class="box">D</div>
  <div class="box">E</div>
</div>

My CSS set up:

.container{
  background:#231F20;
  display:flex;
  flex-wrap:wrap;
}

.box{
  flex:1;
  text-align:center;
  border:5px solid #ADA8AA;
  color:white;
  padding:2rem;
  font-size:2rem;
  background:#423e3f;
  box-sizing: border-box;
}

I managed to get from 5 columns to 2 columns once it gets smaller using

@media screen and (max-width: 900px) {
    .box{
         flex: auto;
         width: 50%;
    }
}

My problem is the last box (E) is fully stretch, I would like to display only at 50% wide, how could I do that?

Working example here.

Upvotes: 1

Views: 154

Answers (3)

Jasur Kurbanov
Jasur Kurbanov

Reputation: 96

HTML code

<div class="container">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
  <div class="box">D</div>
  <div class="box">E</div>
</div>

CSS code

.container{
  background:#231F20;
  display:flex;
  flex-wrap:wrap;
}
.box{
  flex:1;
  text-align:center;
  border:5px solid #ADA8AA;
  color:white;
  padding:2rem;
  font-size:2rem;
  background:#423e3f;
  box-sizing: border-box;
}

Just change some values in @media screen 

 @media screen and (max-width: 900px) {
.box {
  width: 50%;
  flex: auto;
}
.box:last-child {
   max-width: 50%;
}

}

Feel free to ask anything

Upvotes: 0

Emaro
Emaro

Reputation: 1497

If you change your css to

@media screen and (max-width: 900px) {
    .box {
      width: 50%;
      flex: auto;
    }
    .box:last-child {
       max-width: 50%;
    }
}

You will get this: https://codepen.io/anon/pen/mBdGNg (it's a fork of your sample)

Upvotes: 1

kinggs
kinggs

Reputation: 1168

You could apply a max-width to the last .box element as follows:

@media screen and (max-width: 900px) {
  .box{
   width: 50%;
   flex: auto;
  }
  .box:last-child {
    max-width:50%;
  }
}

Upvotes: 1

Related Questions