Fullwidth and Multiple Columns Using Flexbox

Fullwidth and multiple columns using flexbox

You need to set flex-wrap: wrap on flex container, and then flex: 0 0 100% on full-width items and flex: 0 0 50% on half-width items. Also you should add box-sizing: border-box.

* {  box-sizing: border-box;}.collage {  display: flex;  flex-wrap: wrap;}.collage-item {  border: 1px solid black;  flex: 0 0 50%;  padding: 10px;}.fullwidth {  flex: 0 0 100%;}

<div class="collage">  <!-- fullwidth -->  <div class="collage-item fullwidth">a</div>
  <!-- two columns -->  <div class="collage-item">b</div>  <div class="collage-item">c</div>
  <!-- fullwidth -->  <div class="collage-item fullwidth">d</div></div>

CSS Flex Box Layout: full-width row and columns

You've almost done it. However setting flex: 0 0 <basis> declaration to the columns would prevent them from growing/shrinking; And the <basis> parameter would define the width of columns.

In addition, you could use CSS3 calc() expression to specify the height of columns with the respect to the height of the header.

#productShowcaseTitle {
  flex: 0 0 100%; /* Let it fill the entire space horizontally */
  height: 100px;
}

#productShowcaseDetail,
#productShowcaseThumbnailContainer {
  height: calc(100% - 100px); /* excluding the height of the header */
}

#productShowcaseContainer {  display: flex;  flex-flow: row wrap;
  height: 600px;  width: 580px;}
#productShowcaseTitle {  flex: 0 0 100%; /* Let it fill the entire space horizontally */  height: 100px;  background-color: silver;}
#productShowcaseDetail {  flex: 0 0 66%; /* ~ 2 * 33.33% */  height: calc(100% - 100px); /* excluding the height of the header */  background-color: lightgray;}
#productShowcaseThumbnailContainer {  flex: 0 0 34%;  /* ~ 33.33% */  height: calc(100% - 100px); /* excluding the height of the header */  background-color: black;}

<div id="productShowcaseContainer">  <div id="productShowcaseTitle"></div>  <div id="productShowcaseDetail"></div>  <div id="productShowcaseThumbnailContainer"></div></div>

How to stop CSS flex column from filling width in three-columns row?

To do this with flexbox you can try using justify-content: flex-start;. To get 3 columns per row, apply flex-basis: ~30%; to the flex items. Something like this:

 .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.block {
  background-color: grey;
  flex-basis: 30%;
  margin: 5px;
}

JSfiddle

Hope it helps!

Force flex item to span full row width

When you want a flex item to occupy an entire row, set it to width: 100% or flex-basis: 100%, and enable wrap on the container.

The item now consumes all available space. Siblings are forced on to other rows.

.parent {
  display: flex;
  flex-wrap: wrap;
}

#range, #text {
  flex: 1;
}

.error {
  flex: 0 0 100%; /* flex-grow, flex-shrink, flex-basis */
  border: 1px dashed black;
}

<div class="parent">
  <input type="range" id="range">
  <input type="text" id="text">
  <label class="error">Error message (takes full width)</label>
</div>

CSS Flexbox: 3 flex items, 2 Columns (widths equal to content) and 1 item that grows to width

I ended up just adding a container around all of the items except the first one and using flex to make them grow as needed.

Benefits:

1. The first item can be however long it wants and the other items will grow to match it’s width.
2. There can be an infinite amount of flex items and the first item will grow to match their combined width.

If anyone does find a method that retains these benefits without adding extra markup, please let us know!

https://codepen.io/albrechtnate/pen/YzzLzLV

.container {  background-color: #ccc;  width: fit-content;}
.container > div:first-child {  background-color: blue;}
.container .group {  background-color: teal;  display: flex;}
.container .group div {  background-color: red;  flex: 1 0 auto;}

<div class="container">  <div>Item</div>  <div class="group">    <div>Item Two</div>    <div>Item Three</div>  </div></div>
<br>
<div class="container">  <div>Item</div>  <div class="group">    <div>Item Two</div>    <div>Item Three</div>    <div>Item Four</div>    <div>Item Five</div>  </div></div>
<br>
<div class="container">  <div>Item - This one is super duper extra looper long.</div>  <div class="group">    <div>Item Two</div>    <div>Item Three</div>  </div></div>

---

Related Topics