Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fullwidth and multiple columns using flexbox

Tags:

css

flexbox

I'm trying to create a flexbox row with fullwidth and multiple columns on the same container.

I've tried flex-break: after; but am not sure what I am missing. I am trying to avoid having multiple classes like .fullwidth and .multiple-columns.

This is what I am trying to achieve:

------------------------
|                      |
|                      |
|       item A         |
|                      |
|                      |
------------------------
|          |           |
|          |           |
|     B    |      C    |
|          |           |
|          |           |
------------------------
|                      |
|                      |
|       item D         |
|                      |
|                      |
------------------------

.collage {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.fullwidth {
  flex-break: after;
}
.collage-item {
  width: 100%;
  height: 25vw;
  background: url("https://www.audi.co.uk/content/dam/audi/production/Models/NewModelsgallery/A5range/A5_Coupe/MY17/1920x1080_A5-Coupe-2016-side.jpg") no-repeat;
  background-size: cover;
}
.btn {
  position: absolute;
  border: 2px solid white;
  padding: 10px 18px;
  text-align: center;
  right: 8px;
  bottom: 8px;
  color: white;
  text-decoration: none;
}
<div class="collage">
  <!-- fullwidth -->
  <div class="collage-item fullwidth"></div>

  <!-- two columns -->
  <div class="collage-item"></div>
  <div class="collage-item"></div>

  <!-- fullwidth -->
  <div class="collage-item fullwidth"></div>
  <div class="btn">Button</div>
</div>

https://jsfiddle.net/brunodd/ja6820vu/1/

like image 582
brunodd Avatar asked Dec 05 '16 12:12

brunodd


People also ask

How do I make two columns in flexbox?

Approach: To create a two-column layout, first we create a <div> element with property display: flex, it makes that a div flexbox and then add flex-direction: row, to make the layout column-wise. Then add the required div inside the above div with require width and they all will come as columns.

How do you show 3 items per row in flexbox?

For 3 items per row, add on the flex items: flex-basis: 33.333333% You can also use the flex 's shorthand like the following: flex: 0 0 33.333333% => which also means flex-basis: 33.333333% .

How do you split flexbox equally?

EQUAL HEIGHT + WIDTH COLUMNS WITH MARGINSAdd display:flex, justify-content: space-between; to the parent and give a width to the boxes that totals to less than 100%. E.g. These boxes have a width of 32% each.


1 Answers

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>
like image 159
Nenad Vracar Avatar answered Oct 02 '22 07:10

Nenad Vracar