Use two flex directions inside one container

Question

How can I create the following layout inside one container. Is it possible?

I know I can use display: flex; justify-content: center, align-items:center to make them all centered, but can I choose to make 2 of the divs into column instead of row?

I want this basically:

I'm experimenting with this code.

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  border: 1px solid white;
  height: 600px;
  widows: 700px;
}

.container div {
  float: right;
}

.container div:nth-child(3) {
  flex-flow: column;
}

<section class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
  <div>Item 7</div>
</section>

you need to wrap 3,4,5 in another flex container to achieve this — karthick, May 31 '17 at 22:37
How would that simple solution look if I may ask @Michael_B ? =) — Doe. J, May 31 '17 at 22:52
Im willing to use multiple container as well as Solution, @karthick . I only want the displayed layout :) — Doe. J, May 31 '17 at 22:53
I also thinking to get more in touch with Grid.. I don't feel Bootstrap 4 even with flexbox ability is looking .. professional. — Doe. J, May 31 '17 at 22:59
Heh, hm . can I add you both as answer? :) That just looks beautiful @karthick . They use a similar layout like this on https://www.hltv.org/matches - but using alot of top : 50px etc. I love how clean that looked :) — Doe. J, May 31 '17 at 22:59

score 1 · Accepted Answer · answered May 31 '17 at 22:58

Solution using Flexbox with multiple containers

<section class="container">
      <div>Item 1</div>
      <div>Item 2</div>
      <div class="flex-col-container">
        <div>Item 3</div>
        <div>Item 4</div>
        <div>Item 5</div>
      </div>
      <div>Item 6</div>
      <div>Item 7</div>
</section>
.container{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    border: 1px solid white;
    height: 600px;
    widows: 700px;
}

.flex-col-container {
    display: flex;
    flex-flow: column wrap;    
}

.container div {
  border: 1px solid black;
}

https://jsfiddle.net/karthick6891/j5ur9tw4/

Michael Benjamin · Answer 2 · 2017-09-01T13:54:06.747

Flexbox

You can achieve your layout using flexbox and the order property.

The default value of order is 0 for all flex items. This means their order is determined by their order of appearance in the source code.

By altering the order and flex-basis values for items 3 and 5, they can be made to appear in the first and last rows, respectively.

.container {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}

div {
  flex: 1;
}

div:nth-child(3) {
  order: -1;
  flex-basis: 100%;
}

div:nth-child(5) {
  order: 1;
  flex-basis: 100%;
}

<section class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
  <div>Item 7</div>
</section>

Alternatively, you can use invisible flex items to balance out the empty space. You would need to add 8 items with visibility: hidden.

.container {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}

div {
  flex-basis: 20%;
}

.hidden {
  visibility: hidden;
}

<section class="container">
  <div class="hidden">hidden</div>
  <div class="hidden">hidden</div>
  <div>Item 3</div>
  <div class="hidden">hidden</div>
  <div class="hidden">hidden</div>
  <div>Item 1</div>  
  <div>Item 2</div>
  <div>Item 4</div>
  <div>Item 6</div>
  <div>Item 7</div>
  <div class="hidden">hidden</div>
  <div class="hidden">hidden</div>
  <div>Item 5</div>  
  <div class="hidden">hidden</div>
  <div class="hidden">hidden</div>

</section>

Grid

This is the most flexible and robust option.

With CSS Grid, the layout is relatively simple and easy to build, and there are multiple methods one can use.

In my example below, I've used the ASCII art method of the grid-template-areas property.

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 50px);
  grid-gap: 10px;
  grid-template-areas: " . . . . ." 
                       "  . . three . ."
                       " one two four six seven"
                       " . . five . ."
                       " . . . . ."
}

div:nth-child(1) { grid-area: one; }
div:nth-child(2) { grid-area: two; }
div:nth-child(3) { grid-area: three; }
div:nth-child(4) { grid-area: four; }
div:nth-child(5) { grid-area: five; }
div:nth-child(6) { grid-area: six; }
div:nth-child(7) { grid-area: seven; }

/* non-essential decorative styles */
.container {
  width: 75%;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid black;
  background-color: lightyellow;
}
div {
  background-color: lightgreen;
  border: 1px dashed gray;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

<section class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
  <div>Item 7</div>
</section>

For a complete explanation of how these Grid properties work, and browser support data, see these posts:

Use two flex directions inside one container

2 Answers2

Flexbox

Grid