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

cssflexbox

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

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 №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 №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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dynamic background featuring a tall vertical image

I have an image that is extremely long, measuring 2263 x 8192 pixels. I want to design a website with a background that spans the width of the window and the full height of the image, all while maintaining responsiveness. The concept is to have this elong ...

jqueryhtmlcssimage

What are some methods for submitting an HTML form to a CSV file?

I've been racking my brain for the past few days trying to find a viable solution to this problem. My project requires 100 individuals to take turns sitting at a computer and filling out a form I created. Each time someone submits their information, ...

javascriptphphtmlcss

What are the steps to clipping a canvas using CSS clip-path?

When it comes to clipping a canvas, there are multiple methods that can be used. One way is to create a path with getContext('2d') and set globalCompositeOperation. Another method involves using -webkit-clip-path or clip-path, though the latter m ...

javascriptcsshtmlcanvaswebkit

Tips on changing rows within tables using HTML code

I have a code snippet that pulls data from a database and displays it in a table format. However, I am facing an issue where courses with the same term number are being displayed on separate rows. Here is the current code: <html> <head> <ti ...

phphtmlcsssql

Tips for ensuring consistent spacing between font icons within a navigation bar when using text with font icons as links

Below is the code I have implemented for a navigation bar: body { margin: 0; } .navbar { display: inline-block; background-color: #495057; width: 100%; } .navbar ul { list-style-type: none; text-align: center; float: left; } .navbar ul ...

htmlcsshtml-lists

Create an HTML table with a static header, adjustable columns, and the ability to resize to a width smaller than the content

Looking to create a unique web application with a table that has a fixed, styled header, resizable columns, and the ability to resize the columns without truncating content. Additionally, I want the body of the table to scroll if it cannot all fit on the p ...

jquerycsshtmlwebkithtml-table

Bring in styles from the API within Angular

My goal is to retrieve styles from an API and dynamically render components based on those styles. import { Component } from '@angular/core'; import { StyleService } from "./style.service"; import { Style } from "./models/style"; @Component({ ...

javascriptcssangularsass

Struggling to set a background image for multiple div elements

Hey everyone! I'm working on a small school project website and I've run into an issue with the background on multiple div elements. Here's my HTML code snippet: <div class="bloc-1-text"> <h3> </h3&g ...

htmlcss

Fluid background images frame the header on either side, with a void of background in the center

I am in need of a header that spans the entire width and is divided into 3 columns, with background images only in the 1st and 3rd columns. Cross-browser compatibility is crucial for this solution. The first column should have a background image and be ...

htmlcss

Tips for causing text to wrap to a new line when reaching the end of a div element

I am struggling with keeping a text inside a div from overflowing when it reaches the border of the div. I have tried various CSS properties like "word-break" and overflow, but haven't been able to find a solution. <div class="col-lg ...

htmlcsstextbootstrap-4

Is it possible to customize the background color of the 'rows per page' selector box in Bootstrap 4 bootstrap-table?

The text is set in white on a dark grey background by default and appears just below the formatted table. Best regards, Phil Please refer to the attached image:Section of table showing rows per page selector box ...

cssbootstrap-4bootstrap-table

Is there a way to align both a list icon and its contents in the center?

Can someone please assist me? I am attempting to replicate a website, but I am unsure how to center align an icon list and content. Currently, it appears like this; https://i.stack.imgur.com/6FZCr.png I would like it to look like this; https://i.stack.im ...

htmlcss

Is there a way to create a fixed container aligned to the right and have the parent container handle scrolling?

My setup is as follows: Full width, 100px height header The header is always visible at the top. Full width, remaining height details The content of details can scroll vertically and horizontally. A fixed 200px width, full height container is right- ...

htmlcss

hiding html elements by using the display property set to none instead of physically removing

I am currently utilizing an if-else statement to display different HTML structures. As a result, the entire HTML is being rendered twice. Is there a way we can utilize 'display: none' instead? I attempted to use it in th ...

javascriptjqueryhtmlcsstypescript

How to Incorporate LessCSS into the Blueprint Framework?

Can LessCSS be integrated with Blueprint framework? What are the prerequisites for starting? ...

cssless

Inexperienced with Bootstrap/CSS: Cannot open dropdown by clicking (CDN properly installed)

I am having trouble getting my Bootstrap dropdown to toggle correctly, despite placing the JS script last. I have checked multiple resources and it was suggested that CDN may not have been imported correctly. I have also tested this on different browsers w ...

htmlcssbootstrap-4

What is the best way to add flair to the HTML <title> tag?

Just a quick question - I'm wondering if there is a method to apply CSS styles to an HTML element. Here's an example declaration: title { color: red; font-family: 'Roboto', sans-serif; } ...

htmlcsstitle

Generate a see-through overlay when hovering over an image that matches the image's precise dimensions

I have encountered a challenge that I need help with. On a webpage, there are multiple images of varying sizes. I am looking to create a feature where hovering over an image triggers the appearance of a div above it containing a button and text without dis ...

htmlcssbootstrap-4

What are the steps to properly create an ordered list?

.book-summary ol { counter-reset: item ; } .book-summary ol li { margin-left:10px; margin-top:5px; display:block; } .book-summary ol li:before { content: counters(item, ".") " "; counter-increment: item; } <div class="book-summary"> ...

htmlcss

The speed at which Laravel loads local CSS and JS resources is notably sluggish

Experiencing slow loading times for local resources in my Laravel project has been a major issue. The files are unusually small and the cdn is much faster in comparison. Is there a way to resolve this problem? https://i.stack.imgur.com/y5gWF.jpg ...

javascriptcssperformancelaravel-5assets