CSS Flex Box Layout: full-width row and columns

flexbox
css grid
flexbox layout examples
flex full width
flex-grow
flexible width css
flex-wrap
flex full width item

Hello fellow programmers!

I've got a simple box-layout which I would love to achieve using flexbox, but I simply can't figure it out. It should look like this image.

So basically a row and two columns, with the row being fixed at lets say 100px in height, but all in one container. My code so far is:

#productShowcaseContainer {
  display: inline-flex;
  flex-flow: row wrap;
  height: 600px;
  width: 580px;
  background-color: rgb(240, 240, 240);
}

#productShowcaseTitle {
  display: inline-block;
  height: 100px;
  width: 100%;
  background-color: rgb(200, 200, 200);
}

#productShowcaseDetail {
  flex: 3;
  background-color: red;
}

#productShowcaseThumbnailContainer {
  flex: 2;
  background-color: blue;
}
<div id="productShowcaseContainer">
  <div id="productShowcaseTitle"></div>
  <div id="productShowcaseDetail"></div>
  <div id="productShowcaseThumbnailContainer"></div>
</div>

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>

Common CSS Flexbox Layout Patterns with Example Code, If you're anything like me: here's a list of 10 example flexbox layouts with first row to be full-width and the two following items to share a row, note that you .​container { display: flex; flex-direction: column; align-items: center; }  CSS Flexbox Layout Module. Before the Flexbox Layout module, there were four layout modes: Block, for sections in a webpage; Inline, for text; Table, for two-dimensional table data; Positioned, for explicit position of an element; The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float

Just use another container to wrap last two divs. Don't forget to use CSS prefixes.

#productShowcaseContainer {
   display: flex;
   flex-direction: column;
   height: 600px;
   width: 580px;
   background-color: rgb(240, 240, 240);
}

#productShowcaseTitle {
   height: 100px;
   background-color: rgb(200, 200, 200);
}

#anotherContainer{
   display: flex;
   height: 100%;
}

#productShowcaseDetail {
   background-color: red;
   flex: 4;
}

#productShowcaseThumbnailContainer {
   background-color: blue;
   flex: 1;
}
<div id="productShowcaseContainer">
   <div id="productShowcaseTitle">1</div>
   <div id="anotherContainer">
      <div id="productShowcaseDetail">2</div>
      <div id="productShowcaseThumbnailContainer">3</div>
   </div>
</div>

A Complete Guide to Flexbox, Our comprehensive guide to CSS flexbox layout. Think of flex items as primarily laying out either in horizontal rows or vertical columns. stretch (default​): stretch to fill the container (still respect min-width/max-width); flex-start / start / self-start  The most basic flexbox pattern: getting a few boxes to stretch and fill the full width of their parent element. All you need to do is to set display: flexon the container, and a flex-growvalue above 0on the children: .container{display:flex;}.item{flex-grow:1;height:100px;}.item+.item{margin-left:2%;}

This is copied from above, but condensed slightly and re-written in semantic terms. Note: #Container has display: flex; and flex-direction: column;, while the columns have flex: 3; and flex: 2; (where "One value, unitless number" determines the flex-grow property) per MDN flex docs.

#Container {
  display: flex;
  flex-direction: column;
  height: 600px;
  width: 580px;
}

.Content {
  display: flex;
  flex: 1;
}

#Detail {
  flex: 3;
  background-color: lime;
}

#ThumbnailContainer {
  flex: 2;
  background-color: black;
}
<div id="Container">
  <div class="Content">
    <div id="Detail"></div>
    <div id="ThumbnailContainer"></div>
  </div>
</div>

Flex Cheatsheet, https://www.w3.org/TR/css-flexbox-1/#flow-order Note: The reordering capabilities of flex layout intentionally affect only the visual rendering, w3.org/​TR/css-flexbox-1/#flex-direction-property. row row-reverse column to make the flex items “flex”, altering their width/height to fill the available space in the main dimension. As I was playing around with it. I wanted to try a layout with one row that contains three columns of different widths. In the third column are two rows. I was able to get column 1 & 2 to have their own custom widths by using SASS and moving the custom class name to the same div the column class was declared, as you'll see in my example below.

Full-width pinned layouts with flexbox, Dan Mall's full-screen layout of a mobile phone pinned to the left and a desktop Another option I wanted to compare with flexbox was a display:table layout, often a You can also set it to column-reverse or row-reverse . The inline style will be by default, we just need to remove the flex-direction: column and leave it to the default value (row). Tabs / Bottom Menus. When it comes to elements that take the full width of screen and have items that should fill all the available space, then flexbox is the perfect tool here.

Flexbox, CSS flexbox layout allows you to easily format HTML. Flexbox makes it simple to align items vertically and horizontally using rows and columns. An element with this display setting takes up the full width of the line it is on. Flexbox was designed as a single dimensional layout, meaning that it deals with laying out items as a row or as a column — but not both at once. There is however the ability to wrap flex items onto new lines, creating new rows if flex-direction is row and new columns if flex-direction is column.

Build Smart CSS-only Layouts with Flexbox, stretch (default): Forces the elements to occupy the full height (when applied to a row) and the full width (when applied to a column) of the wrapper. baseline:  Inserting a line-breaking flex item. Using an element to break to a new flex row comes with an interesting effect: we can skip specifying the width of any item in our flex layout and rely completely on the line breaks to define the flow of our grid.

Comments
  • Well, it worked, so thanks! I remember using another method with CSS Flex some time ago, but that might have been before the changes applied to flex. There the height was filled out automatically, since the row was set to "flex: 1 [something more]".
  • @martinandrovich You are welcome. It seems the method you mentioned is the second one I've presented in my answer :-)
  • Thanks @HashemQolami for useful smippet
  • I had to add a flex-wrap to my container to perform this solution.
  • Doesn't answer the question.