Preventing Height Stretch in CSS Flex-Wrap: A Guide

Question

Preventing Height Stretch in CSS Flex-Wrap: A Guide

Is there a way to eliminate the large gaps between box3, box1 and box4, box6? How can we ensure each box adjusts its height dynamically?

.wrap {
  display: flex;
  align-items: baseline;
  align-content:flex-start;
  justify-content: space-between;
  flex-wrap: wrap; 
  background-color: lightblue;
}

.box {
  display: flex;
  background-color: tomato;
  box-sizing: border-box;
  border: 1px solid #C4C4C4;
  height: 100px;
  width: 45%;
  margin-top: 15px;
}

.box1, .box4 {
  height: 20px;
}

  <div class="wrap">
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
    <div class="box box3">box3</div>
    <div class="box box4">box4</div>
    <div class="box box5">box5</div>
    <div class="box box6">box6</div>
  </div>

We are aiming for a layout similar to the one shown in the image. Thank you.

https://i.stack.imgur.com/0Fbie.png

css flexbox

Answer 1

Answer №1

By default, flex direction is set to row, which means when you use flex-wrap: wrap, any overflowed elements will be pushed down to the next row. The height of each row will always be equal to the height of the tallest element in that row, creating a noticeable gap between elements.

To resolve this issue, you can change the flex direction to column and give the wrapping element a fixed height. This way, the overflowed elements will be pushed to the right of the container, from top to bottom.

.wrap {
  /*Added these*/
  height: 300px;
  flex-direction: column;
  /*-----------*/
  display: flex;
  align-items: baseline;
  align-content: space-around;
  flex-wrap: wrap; 
  background-color: lightblue;

}

.box {
  display: flex;
  background-color: tomato;
  box-sizing: border-box;
  border: 1px solid #C4C4C4;
  height: 100px;
  width: 45%;
  margin-top: 15px;
}

.box1, .box5 {
  height: 20px;
}

  <div class="wrap">
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
    <div class="box box3">box3</div>
    <div class="box box4">box4</div>
    <div class="box box5">box5</div>
    <div class="box box6">box6</div>
  </div>

Answer 2

By default, flex direction is set to row, which means when you use flex-wrap: wrap, any overflowed elements will be pushed down to the next row. The height of each row will always be equal to the height of the tallest element in that row, creating a noticeable gap between elements.

To resolve this issue, you can change the flex direction to column and give the wrapping element a fixed height. This way, the overflowed elements will be pushed to the right of the container, from top to bottom.

.wrap {
  /*Added these*/
  height: 300px;
  flex-direction: column;
  /*-----------*/
  display: flex;
  align-items: baseline;
  align-content: space-around;
  flex-wrap: wrap; 
  background-color: lightblue;

}

.box {
  display: flex;
  background-color: tomato;
  box-sizing: border-box;
  border: 1px solid #C4C4C4;
  height: 100px;
  width: 45%;
  margin-top: 15px;
}

.box1, .box5 {
  height: 20px;
}

  <div class="wrap">
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
    <div class="box box3">box3</div>
    <div class="box box4">box4</div>
    <div class="box box5">box5</div>
    <div class="box box6">box6</div>
  </div>

Answer 3

Answer №2

To ensure that FlexBox aligns the boxes in rows, two separate FlexBoxes must be created with flex-flow: column set. The same effect can be achieved with a similar amount of CSS:

.outer{
    display: flex;
    padding: 15px 0;
    background-color: lightblue;
}

.wrap {
  display: flex;
  flex-flow: column;
  flex-grow: 1;
}

.wrap:nth-child(2){
   align-items: flex-end;
}

.box {
  background-color: tomato;
  box-sizing: border-box;
  border: 1px solid #C4C4C4;
  height: 100px;
  width: 90%;
  margin-top: 15px;
}

.box1, .box4{
  margin-top: 0;
}

.box1, .box5 {
  height: 20px;
}

<div class="outer">
    <div class="wrap">
        <div class="box box1">box1</div>
        <div class="box box2">box2</div>
        <div class="box box3">box3</div>
    </div>
    <div class="wrap">
        <div class="box box4">box4</div>
        <div class="box box5">box5</div>
        <div class="box box6">box6</div>
    </div>
</div>

Answer 4

To ensure that FlexBox aligns the boxes in rows, two separate FlexBoxes must be created with flex-flow: column set. The same effect can be achieved with a similar amount of CSS:

.outer{
    display: flex;
    padding: 15px 0;
    background-color: lightblue;
}

.wrap {
  display: flex;
  flex-flow: column;
  flex-grow: 1;
}

.wrap:nth-child(2){
   align-items: flex-end;
}

.box {
  background-color: tomato;
  box-sizing: border-box;
  border: 1px solid #C4C4C4;
  height: 100px;
  width: 90%;
  margin-top: 15px;
}

.box1, .box4{
  margin-top: 0;
}

.box1, .box5 {
  height: 20px;
}

<div class="outer">
    <div class="wrap">
        <div class="box box1">box1</div>
        <div class="box box2">box2</div>
        <div class="box box3">box3</div>
    </div>
    <div class="wrap">
        <div class="box box4">box4</div>
        <div class="box box5">box5</div>
        <div class="box box6">box6</div>
    </div>
</div>

Answer 5

Answer №3

If you are looking for alternative layouts based on browser support, consider using a CSS grid system.

For more information on CSS Grid, check out this helpful resource: https://css-tricks.com/snippets/css/complete-guide-grid/

To see which browsers support CSS Grid, you can refer to this link: https://caniuse.com/#feat=css-grid

.wrap {
  display: grid;
  background-color: lightblue;
  grid-template-columns: 50% 50%;
  grid-template-rows: repeat(14, 20px);
  background-color: lightblue;
}

.box {
  background-color: tomato;
  box-sizing: border-box;
  border: 1px solid #C4C4C4;
  height: 100px;
  width: 90%;
  margin-top: 15px;
}
.box1 {
  grid-row: 1/2;
}
.box2 {
  grid-row: 1/5;
}
.box3 {
  grid-row: 3/8;
}
.box4 {
  grid-row: 7/8;
}
.box5, .box6 {
  grid-row: 9/14;
}
.box1, .box4 {
  height: 20px;
}

  <div class="wrap">
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
    <div class="box box3">box3</div>
    <div class="box box4">box4</div>
    <div class="box box5">box5</div>
    <div class="box box6">box6</div>
  </div>

Answer 6

If you are looking for alternative layouts based on browser support, consider using a CSS grid system.

For more information on CSS Grid, check out this helpful resource: https://css-tricks.com/snippets/css/complete-guide-grid/

To see which browsers support CSS Grid, you can refer to this link: https://caniuse.com/#feat=css-grid

.wrap {
  display: grid;
  background-color: lightblue;
  grid-template-columns: 50% 50%;
  grid-template-rows: repeat(14, 20px);
  background-color: lightblue;
}

.box {
  background-color: tomato;
  box-sizing: border-box;
  border: 1px solid #C4C4C4;
  height: 100px;
  width: 90%;
  margin-top: 15px;
}
.box1 {
  grid-row: 1/2;
}
.box2 {
  grid-row: 1/5;
}
.box3 {
  grid-row: 3/8;
}
.box4 {
  grid-row: 7/8;
}
.box5, .box6 {
  grid-row: 9/14;
}
.box1, .box4 {
  height: 20px;
}

  <div class="wrap">
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
    <div class="box box3">box3</div>
    <div class="box box4">box4</div>
    <div class="box box5">box5</div>
    <div class="box box6">box6</div>
  </div>

Answer 7

Answer №4

When working with Flex, it always creates a grid which can result in large spaces between elements. Unfortunately, using flex:row or flex:column may not achieve the specific order you desire. However, utilizing flex column, as recommended by Ethan Vu, could help achieve the desired layout. One drawback of this approach is that it requires a fixed height container, which might not be ideal for your needs.

If you prefer a layout without a fixed height constraint, you may want to consider using CSS columns or opting for a javascript solution like a 2 column masonry layout.

Answer 8

When working with Flex, it always creates a grid which can result in large spaces between elements. Unfortunately, using flex:row or flex:column may not achieve the specific order you desire. However, utilizing flex column, as recommended by Ethan Vu, could help achieve the desired layout. One drawback of this approach is that it requires a fixed height container, which might not be ideal for your needs.

If you prefer a layout without a fixed height constraint, you may want to consider using CSS columns or opting for a javascript solution like a 2 column masonry layout.

Preventing Height Stretch in CSS Flex-Wrap: A Guide

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

React Nested Menu Selection

Issues with CSS styling inheritance in Angular components

What is the CSS method for determining the distance from the top of a container to the edge of the window?

Tips on keeping the size of a react-bootstrap modal constant and enabling scrolling instead of expanding

Can you provide me with instructions on how to change the background image?

Tips for incorporating data attributes into <figure> elements and retrieving them using CSS

Prevent the elongation of HTML select elements in Bootstrap

The animation feature on the slideshow is dysfunctional

Tracking the progress of reading position using Jquery within an article

Changing the image's flex-grow property will take precedence over the flex settings of other child

Is there a way I can maintain the active state after clicking on a link?

Is it possible for CSS in React to cause the vanishing of all buttons

Mobile-responsive iFrame content is designed to adjust and fit appropriately on

What is the best way to align a scalable SVG image in the center?

The CSS styling for a pie chart does not seem to be functioning properly when using jQuery's

Error message: "Maximum width header anomaly"

The feature to swap out the thumb of a range slider with an image is currently not

What is the solution to prevent angular-material components from covering my fixed navbar?

The Navbar in Bootstrap 3 remains expanded and does not collapse

Scrollable Tailwind components