Manage the width of flex items organized vertically within a flexbox parent

Question

Manage the width of flex items organized vertically within a flexbox parent

I'm struggling to achieve the desired effect where the boxes labeled "HALF" only take up 50% of the width, evenly sharing the first row.

The main requirement is that these boxes remain within a single container. Is it possible to accomplish this using flexbox?

I've experimented with properties like flex-grow, flex-shrink, and flex-basis, but I'm having trouble figuring out how to make it work while adhering to the single container restriction.

Take a look at this fiddle for reference: http://jsfiddle.net/GyXxT/270/

div {
  border: 1px solid;
}

.container {
  width: 400px;
  display: flex;
  flex-direction: column;
}
.child {
  
  height: 200px;
}
.child.half {
  flex: 1 1 10em;
  color: green;
}

.child:not(.half) {

  flex-shrink: 2;
  flex-basis: 50%;
  color: purple; 
}

<div class="container">
  <div class="child half">
    HALF
  </div>
  
  <div class="child half">
    HALF
  </div>
  
   <div class="child">
    FULL
  </div>
   <div class="child">
    FULL
  </div>
  <div class="child">
    FULL
  </div>
   <div class="child">
    FULL
  </div>
</div>

html css flexbox word-wrap

Answer 1

Answer №1

Instead of using flex-direction: column, you can experiment with a wrapping flexbox by utilizing flex-wrap: wrap; and specify:

flex-basis: 50% for the half-width divs
flex-basis: 100% for the full-width divs

Note that I have included box-sizing: border-box to ensure proper adjustment of widths when implementing flex-basis.

Check out the live demonstration provided below:

div {
  border: 1px solid;
  box-sizing: border-box;
}
.container {
  width: 400px;
  display: flex;
  flex-wrap: wrap;
}
.child {
  height: 200px;
}
.child.half {
  flex-basis: 50%;
  color: green;
}
.child:not(.half) {
  flex-basis: 100%;
  color: purple;
}

<div class="container">
  <div class="child half">
    HALF
  </div>

  <div class="child half">
    HALF
  </div>

  <div class="child">
    FULL
  </div>
  <div class="child">
    FULL
  </div>
  <div class="child">
    FULL
  </div>
  <div class="child">
    FULL
  </div>
</div>

Answer 2

Instead of using flex-direction: column, you can experiment with a wrapping flexbox by utilizing flex-wrap: wrap; and specify:

flex-basis: 50% for the half-width divs
flex-basis: 100% for the full-width divs

Note that I have included box-sizing: border-box to ensure proper adjustment of widths when implementing flex-basis.

Check out the live demonstration provided below:

div {
  border: 1px solid;
  box-sizing: border-box;
}
.container {
  width: 400px;
  display: flex;
  flex-wrap: wrap;
}
.child {
  height: 200px;
}
.child.half {
  flex-basis: 50%;
  color: green;
}
.child:not(.half) {
  flex-basis: 100%;
  color: purple;
}

<div class="container">
  <div class="child half">
    HALF
  </div>

  <div class="child half">
    HALF
  </div>

  <div class="child">
    FULL
  </div>
  <div class="child">
    FULL
  </div>
  <div class="child">
    FULL
  </div>
  <div class="child">
    FULL
  </div>
</div>

Answer 3

Answer №2

The flexibility properties - flex-grow, flex-shrink, flex-basis, and flex - are specifically designed for adjusting elements along the main axis of a flex container.

In cases where the container has a flex-direction: column, the main axis becomes vertical, influencing the height rather than the width of the elements.

If you want to size flex items horizontally within a column-directed container, utilizing the width property is necessary.

(For a more comprehensive explanation, visit: Understanding the distinctions between flex-basis and width)

To achieve your desired layout using a single container, check out an alternative solution to this query.

Should you prefer to maintain the column-oriented direction, enclosing the .half elements in their separate container is advised.

.container {
  display: flex;
  flex-direction: column;
  width: 400px;
}
.container > div:first-child {
  display: flex;
}
.child.half {
  flex: 1 1 10em;
  color: blue;
  width: 50%;
}
.child {
  height: 200px;
  width: 100%;
  border: 1px solid;
}
* {
  box-sizing: border-box;
}

<div class="container">
  <div><!-- nested flex container for half elements -->
    <div class="child half">HALF</div>
    <div class="child half">HALF</div>
  </div>
  <div class="child">FULL</div>
  <div class="child">FULL</div>
  <div class="child">FULL</div>
  <div class="child">FULL</div>
</div>

Answer 4

The flexibility properties - flex-grow, flex-shrink, flex-basis, and flex - are specifically designed for adjusting elements along the main axis of a flex container.

In cases where the container has a flex-direction: column, the main axis becomes vertical, influencing the height rather than the width of the elements.

If you want to size flex items horizontally within a column-directed container, utilizing the width property is necessary.

(For a more comprehensive explanation, visit: Understanding the distinctions between flex-basis and width)

To achieve your desired layout using a single container, check out an alternative solution to this query.

Should you prefer to maintain the column-oriented direction, enclosing the .half elements in their separate container is advised.

.container {
  display: flex;
  flex-direction: column;
  width: 400px;
}
.container > div:first-child {
  display: flex;
}
.child.half {
  flex: 1 1 10em;
  color: blue;
  width: 50%;
}
.child {
  height: 200px;
  width: 100%;
  border: 1px solid;
}
* {
  box-sizing: border-box;
}

<div class="container">
  <div><!-- nested flex container for half elements -->
    <div class="child half">HALF</div>
    <div class="child half">HALF</div>
  </div>
  <div class="child">FULL</div>
  <div class="child">FULL</div>
  <div class="child">FULL</div>
  <div class="child">FULL</div>
</div>

Answer 5

Answer №3

The primary condition is that they stay within a single container.

This can also be achieved without using flexbox, by simply floating the two half elements.

div {
  border: 1px solid;
  box-sizing: border-box;
}
.container {
  width: 400px;
}
.child {
  height: 200px;
}
.child.half {
  float: left;
  width: 50%;
  color: green;
}
.child:not(.half) {
  width: 100%;
  color: purple; 
}

<div class="container">
  <div class="child half">
    HALF
  </div> 
  <div class="child half">
    HALF
  </div>
  
   <div class="child">
    FULL
  </div>
   <div class="child">
    FULL
  </div>
  <div class="child">
    FULL
  </div>
   <div class="child">
    FULL
  </div>
</div>

Answer 6

The primary condition is that they stay within a single container.

This can also be achieved without using flexbox, by simply floating the two half elements.

div {
  border: 1px solid;
  box-sizing: border-box;
}
.container {
  width: 400px;
}
.child {
  height: 200px;
}
.child.half {
  float: left;
  width: 50%;
  color: green;
}
.child:not(.half) {
  width: 100%;
  color: purple; 
}

<div class="container">
  <div class="child half">
    HALF
  </div> 
  <div class="child half">
    HALF
  </div>
  
   <div class="child">
    FULL
  </div>
   <div class="child">
    FULL
  </div>
  <div class="child">
    FULL
  </div>
   <div class="child">
    FULL
  </div>
</div>

Answer 7

Answer №4

If you are looking to set the size using CSS units or percentages, @kukkuz's solution is perfect for that particular purpose.

However, if you prefer to adjust element widths based on their own content, utilizing align-items: flex-start or a similar approach may be more suitable. This allows you to handle the dimension opposite to that of the flex layout itself. For a practical example, refer to a demonstration at the end of the documentation

(Although this is an older inquiry, previous responses were lacking in detail and some may lead you astray)

Answer 8

If you are looking to set the size using CSS units or percentages, @kukkuz's solution is perfect for that particular purpose.

However, if you prefer to adjust element widths based on their own content, utilizing align-items: flex-start or a similar approach may be more suitable. This allows you to handle the dimension opposite to that of the flex layout itself. For a practical example, refer to a demonstration at the end of the documentation

(Although this is an older inquiry, previous responses were lacking in detail and some may lead you astray)

Manage the width of flex items organized vertically within a flexbox parent

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Material UI's Paper component is not expanding to full width when viewed on a smaller screen size

Button background must be grayscale, while the text should remain unaffected

Efficient Techniques to Eliminate Unwanted Jumping in CSS Transitions

Changing Tailwind CSS variables for customization

Arrange the element as though it were the foremost

Displaying Data in a Table

The styling in Docker for Asp.Net Core is not being properly displayed

Placing 2 elements next to each other - Where the left element remains static and the right element's width increases as the page expands

Prevent Child Elements from Overstretching Container with Bootstrap Flex

Ensuring Quick Response Times When Incorporating Personalized Text Styles into Twitter Bootstrap

How to apply distinct CSS styles to individual pages in Orchard CMS?

Unable to find '.file.scss' in the directory '../pages'

Creating header menus with section labels in Windows 8 Metro can be easily accomplished by utilizing Javascript

What could be causing the closest() method in my JavaScript code to not locate the nearest class?

What could be causing my bootstrap dropdown button to malfunction?

The fullscreen button in Photoswipe is not showing up on mobile devices

What is the best way to transform URL images on a webpage into media library images in WordPress?

How to automatically close a JavaScript popup once a form is submitted and refresh the parent page

Exploring the benefits of incorporating the vendor folder in website development

Avoid passing down line-height settings to elements within nested elements