Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to wrap items in flexbox for smaller screens?

Tags:

html

css

flexbox

I'm trying to create a layout for different resize. I need to reach the result in these images here:

flexbox result

I have this code:

.container {
  position: relative;
  display: flex;
  align-items: stretch;
}
.item {
  background-color: black;
  box-sizing: border-box;
  padding: 20px;
  flex: 2;
  color: #fff;
}
.item:nth-child(2) {
  background-color: grey;
  flex: 1
}
.item:nth-child(3) {
  background-color: green;
  flex: 0.5;
}
@media screen and (max-width: 990px) {
  .container {
    height: auto;
    display: table;
  }
  .item:nth-child(2) {
    float: left;
  }
  .item:nth-child(3) {
    float: right;
  }
}
<section class="container">
  <div class="item">
    <h2>title1</h2>
    <hr>You'll notice that even though this column has far more content in it, instead of the other columns ending early, they size themselves to meet the end of this column vertically.</div>
  <div class="item">
    <h2>title2</h2>
    <hr>Normally, the only way to achieve this would be either a hack, or to set all boxes to min-height.
  </div>
  <div class="item">
    <h2>title3</h2>
    <hr>This is a column with not much content.
  </div>
</section>

Here there's a codepen https://codepen.io/darudev/pen/pyBrzL

Problem is in 990px resize view, I don't find solution to create the same view as "mockup".

Is there someone that can help me or give me some suggestions?

Thank you.

like image 708
Zarbat Avatar asked May 13 '16 19:05

Zarbat


People also ask

How do you wrap content in flexbox?

As you only want the text itself to wrap you need to use flex-wrap: nowrap; to keep . right on the same line. The text will automatically wrap when there is not enough space.

How do I reduce the size of my flexbox?

If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink . In use, flex-shrink is used alongside the other flex properties flex-grow and flex-basis , and normally defined using the flex shorthand.

Is flex-wrap responsive?

The flex-wrap property is a quick way to make parent elements more responsive on various screen sizes. As with flexbox in general, it simplifies page layouts so you don't have to manually set breakpoints or manage the page overflow yourself.

How do you show 3 items per row in flexbox?

For 3 items per row, add on the flex items: flex-basis: 33.333333% You can also use the flex 's shorthand like the following: flex: 0 0 33.333333% => which also means flex-basis: 33.333333% .


1 Answers

You don't need the table and float properties in your code.

@media screen and (max-width: 990px) {
  .container {
    height: auto;
    display: table;
  }
  .item:nth-child(2) {
    float: left;
  }
  .item:nth-child(3) {
    float: right;
  }
}

The entire layout can be made with flexbox.

Here's the solution: When the screen resizes smaller than 990px, allow flex items to wrap and give the first item a 100% width, which forces the following items to the next line.

.container {
  display: flex;
}

.item {
  background-color: black;
  box-sizing: border-box;
  padding: 20px;
  flex: 2;
  color: #fff;
}

.item:nth-child(2) {
  background-color: grey;
  flex: 1;
}

.item:nth-child(3) {
  background-color: green;
  flex: 0.5;
}

@media screen and (max-width:990px) {
  .container { flex-wrap: wrap;  }
  .item:first-child { flex-basis: 100%; }
}
<section class="container">
  <div class="item">
    <h2>title1</h2>
    <hr>You'll notice that even though this column has far more content in it, 
         instead of the other columns ending early, they size themselves to meet the end
         of this column vertically.</div>
  <div class="item">
    <h2>title2</h2>
    <hr>Normally, the only way to achieve this would be either a hack, or to set
        all boxes to min-height.</div>
  <div class="item">
    <h2>title3</h2>
    <hr>This is a column with not much content.
  </div>
</section>

revised codepen

like image 78
Michael Benjamin Avatar answered Oct 17 '22 11:10

Michael Benjamin