Question 184254 in CSS Question posted in
Some basic documentation can be found here.

Css – Flex problem : order elements + 2 columns

Thanks to flexbox, based on this code, I would like col-1, col-3 and col-5 to be placed below each other in a column on the right and col-2 and col-4 to be placed below each other. below the others in a left column.

<div class="row">
    <div class="col-1">TEXTE 1</div>
    <div class="col-2">VIDEO 1</div>
    <div class="col-3">TEXTE 2</div>
    <div class="col-4">VIDEO 2</div>
    <div class="col-5">TEXTE 3</div>
</div>

Is it possible ?

The desired result: texts on the left and videos on the right.
I tried this CSS but the videos stay below the texts. Columns do not work.

section.cta-video .row{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    section.cta-video .row .col-1, section.cta-video .row .col-3, section.cta-video .row .col-5 {
        order: 1;
        flex-basis: 50%;
    }

    section.cta-video .row .col-2, section.cta-video .row .col-4 {
        order: 2;
        flex-basis: 50%;
    }
Tags:

2

Answers


  1. 0

    You can use grid, in particular grid-template-areas to solve this:

    More info on grid-template-areas on CSS tricks here

    .row {
  display: grid;
  grid-template-areas: "a b" "c d" "e f";
}

.col-1 { grid-area:b; }
.col-3 { grid-area:d; }
.col-5 { grid-area:f; }
    <div class="row">
  <div class="col-1">TEXTE 1</div>
  <div class="col-2">VIDEO 1</div>
  <div class="col-3">TEXTE 2</div>
  <div class="col-4">VIDEO 2</div>
  <div class="col-5">TEXTE 3</div>
</div>
    Login or Signup to reply.
  2. 0

    Is it necessary that it’s a flex layout?

    You can achieve this easily using grid.

    grid-template-columns: 1fr 1fr turns it into a 2-column layout.

    You can then use the nth-child pseudo selectors to select all even-numbered children to start in the first grid column, and all the odd-numbered children to start in the second grid column:

    .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: dense; /* returns it to a normal layout */
}

.row div:nth-child(even) {
  grid-column-start: 1;
}

.row div:nth-child(odd) {
  grid-column-start: 2;
}
    <div class="row">
  <div class="col-1">TEXTE 1</div>
  <div class="col-2">VIDEO 1</div>
  <div class="col-3">TEXTE 2</div>
  <div class="col-4">VIDEO 2</div>
  <div class="col-5">TEXTE 3</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search