CSS Flex Box Layout full-width row and columns

Question

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    x000D   x000D   productShowcaseContainer   x000D    display  inline-flex  x000D    flex-flow  row wrap  x000D    height  600px  x000D    width  580px  x000D    background-color  rgb 240  240  240   x000D    x000D   x000D   productShowcaseTitle   x000D    display  inline-block  x000D    height  100px  x000D    width  100   x000D    background-color  rgb 200  200  200   x000D    x000D   x000D   productShowcaseDetail   x000D    flex  3  x000D    background-color  red  x000D    x000D   x000D   productShowcaseThumbnailContainer   x000D    flex  2  x000D    background-color  blue  x000D    x000D   lt div id  productShowcaseContainer  gt  x000D     lt div id  productShowcaseTitle  gt  lt  div gt  x000D     lt div id  productShowcaseDetail  gt  lt  div gt  x000D     lt div id  productShowcaseThumbnailContainer  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    I know this can be achieved in many ways  but I would really prefer to use CSS Flex

User · Answer

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

_x000D_

#productShowcaseContainer {_x000D_
   display: flex;_x000D_
   flex-direction: column;_x000D_
   height: 600px;_x000D_
   width: 580px;_x000D_
   background-color: rgb(240, 240, 240);_x000D_
}_x000D_
_x000D_
#productShowcaseTitle {_x000D_
   height: 100px;_x000D_
   background-color: rgb(200, 200, 200);_x000D_
}_x000D_
_x000D_
#anotherContainer{_x000D_
   display: flex;_x000D_
   height: 100%;_x000D_
}_x000D_
_x000D_
#productShowcaseDetail {_x000D_
   background-color: red;_x000D_
   flex: 4;_x000D_
}_x000D_
_x000D_
#productShowcaseThumbnailContainer {_x000D_
   background-color: blue;_x000D_
   flex: 1;_x000D_
}

_x000D_

<div id="productShowcaseContainer">_x000D_
   <div id="productShowcaseTitle">1</div>_x000D_
   <div id="anotherContainer">_x000D_
      <div id="productShowcaseDetail">2</div>_x000D_
      <div id="productShowcaseThumbnailContainer">3</div>_x000D_
   </div>_x000D_
</div>

_x000D_

User · Answer

You ve almost done it  However setting flex  0 0  lt basis gt  declaration to the columns would prevent them from growing shrinking  And the  lt basis gt  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         x000D   x000D   productShowcaseContainer   x000D    display  flex  x000D    flex-flow  row wrap  x000D   x000D    height  600px  x000D    width  580px  x000D    x000D   x000D   productShowcaseTitle   x000D    flex  0 0 100      Let it fill the entire space horizontally    x000D    height  100px  x000D    background-color  silver  x000D    x000D   x000D   productShowcaseDetail   x000D    flex  0 0 66        2   33 33     x000D    height  calc 100  - 100px      excluding the height of the header    x000D    background-color  lightgray  x000D    x000D   x000D   productShowcaseThumbnailContainer   x000D    flex  0 0 34         33 33     x000D    height  calc 100  - 100px      excluding the height of the header    x000D    background-color  black  x000D    x000D   lt div id  productShowcaseContainer  gt  x000D     lt div id  productShowcaseTitle  gt  lt  div gt  x000D     lt div id  productShowcaseDetail  gt  lt  div gt  x000D     lt div id  productShowcaseThumbnailContainer  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D     Vendor prefixes omitted due to brevity     Alternatively  if you could change your markup e g  wrapping the columns by an additional  lt div gt  element  it would be achieved without using calc   as follows    lt div class  contentContainer  gt   lt  -- Added wrapper -- gt       lt div id  productShowcaseDetail  gt  lt  div gt       lt div id  productShowcaseThumbnailContainer  gt  lt  div gt   lt  div gt     productShowcaseContainer     display  flex    flex-direction  column    height  600px  width  580px      contentContainer   display  flex  flex  1     productShowcaseDetail   flex  3     productShowcaseThumbnailContainer   flex  2       x000D   x000D   productShowcaseContainer   x000D    display  flex  x000D    flex-direction  column  x000D   x000D    height  600px  x000D    width  580px  x000D    x000D   x000D   contentContainer   x000D    display  flex  x000D    flex  1  x000D    x000D   x000D   productShowcaseTitle   x000D    height  100px  x000D    background-color  silver  x000D    x000D   x000D   productShowcaseDetail   x000D    flex  3  x000D    background-color  lightgray  x000D    x000D   x000D   productShowcaseThumbnailContainer   x000D    flex  2  x000D    background-color  black  x000D    x000D   lt div id  productShowcaseContainer  gt  x000D     lt div id  productShowcaseTitle  gt  lt  div gt  x000D   x000D     lt div class  contentContainer  gt   lt  -- Added wrapper -- gt  x000D       lt div id  productShowcaseDetail  gt  lt  div gt  x000D       lt div id  productShowcaseThumbnailContainer  gt  lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D     Vendor prefixes omitted due to brevity

User · Answer

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     x000D   x000D   Container   x000D    display  flex  x000D    flex-direction  column  x000D    height  600px  x000D    width  580px  x000D    x000D   x000D   Content   x000D    display  flex  x000D    flex  1  x000D    x000D   x000D   Detail   x000D    flex  3  x000D    background-color  lime  x000D    x000D   x000D   ThumbnailContainer   x000D    flex  2  x000D    background-color  black  x000D    x000D   lt div id  Container  gt  x000D     lt div class  Content  gt  x000D       lt div id  Detail  gt  lt  div gt  x000D       lt div id  ThumbnailContainer  gt  lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

[css] CSS Flex Box Layout: full-width row and columns

Examples related to css

Examples related to layout

Examples related to flexbox