css Question posted in
Some basic documentation can be found here.

I am trying to do CSS flex direction

I am facing a big problem in css flex direction coding.
I need first .column .left class in blue background and first .column .right class in red background. But second .column .left class in red background and second .column .right class in blue background.
Please check my codes.

<style>
.wrap {display:flex;}
.column {display:flex;flex-direction:row-reverse !important}
</style>


<div class="wrap">
    <div class="column">
        <div class="left">Blue Background</div>
        <div class="right">Red Background</div>
    </div>
    <div class="column">
        <div class="left">Red Background</div>
        <div class="right">Blue Background</div>
    </div>
</div>
Tags:

2

Answers


  1. 0

    After the edit in question and more context being provided, here is the updated code:

    .wrap {display:flex;}
.column {display:flex;}

    /* here is the code for the background updates*/

     .wrap {display:flex;}
.column {display:flex;flex-direction:row-reverse !important} 

.column:first-of-type .left{background-color:blue;}
.column:first-of-type .right{background-color:red;}

.column:last-of-type .left{background-color:red;}
.column:last-of-type .right{background-color:blue;}

      .wrap {display:flex;}
.column {display:flex;flex-direction:row-reverse !important} 

.column:first-of-type .left{background-color:blue;}
.column:first-of-type .right{background-color:red;}

.column:last-of-type .left{background-color:red;}
.column:last-of-type .right{background-color:blue;}
    <div class="wrap">
    <div class="column">
        <div class="left">Blue Background</div>
        <div class="right">Red Background</div>
    </div>
    <div class="column">
        <div class="left">Red Background</div>
        <div class="right">Blue Background</div>
    </div>
</div>

    Update the flex-direction as per your required for the .column-first-of-type and .column-last-of-type

    Login or Signup to reply.
  2. 0

    You can play around with nth-child even/odd

    .wrap {display:flex;}
.column {display:flex;flex-direction:row-reverse !important}
.wrap .column:nth-child(odd) div:nth-child(odd) {
    background-color: blue;
}

.wrap .column:nth-child(odd) div:nth-child(even) {
    background-color: red;
}

.wrap .column:nth-child(even) div:nth-child(odd) {
    background-color: red;
}

.wrap .column:nth-child(even) div:nth-child(even) {
    background-color: blue;
}
    <div class="wrap">
    <div class="column">
        <div class="left">Blue Background</div>
        <div class="right">Red Background</div>
    </div>
    <div class="column">
        <div class="left">Red Background</div>
        <div class="right">Blue Background</div>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search