CODEWITHSUNDEEP
cssflexbox
Runny Yolk
Runny Yolk

Reputation: 1164

How do I get a flex item to clear all of its siblings?

I'm trying to achieve a two-column flex where the left column has many divs, and the right column has one tall div. I'd like the right column to be at the top of the flex box, inline with the first div of the left column.

But whatever I try, the right column div lines up with the last of the left column's div.

A little hard to explain, but this jsfiddle shows what I mean.

https://jsfiddle.net/sjf4evx5/1/

I want the blue div to be at the top next to all the red divs.

Seems like it should be easy, but alas...

Upvotes: 0

Views: 5587

Answers (2)

Asons
Asons

Reputation: 87303

CSS Flexbox can't clear sibling as one can do with floats, so if to use flex row direction you need to wrap the red one's,..

* {
  -webkit-box-sizing: border-box;  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;  /* Firefox, other Gecko */
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border: 1px solid black;
}

.wrapper {
  flex-basis: 60%;
}

.sixty {
  height: 100px;
  background-color: red;
  border: 1px solid white;
}

.forty {
  flex-basis: 40%;
  background-color: blue;
  height: 1000px;
}
<div class="flex-container">
  <div class="wrapper">
    <div class="sixty"></div>
    <div class="sixty"></div>
    <div class="sixty"></div>
    <div class="sixty"></div>
    <div class="sixty"></div>
    <div class="sixty"></div>
    <div class="sixty"></div>
  </div>
  <div class="forty"></div>
</div>

.. or change flex direction to column and give the container a height, a height not bigger than the sum of the red's and the blue's height.

* {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  border: 1px solid black;
  height: 1000px;
}

.sixty {
  height: 100px;
  background-color: red;
  border: 1px solid white;
}

.forty {
  flex-basis: 1000px;
  background-color: blue;
}
<div class="flex-container">
  <div class="sixty"></div>
  <div class="sixty"></div>
  <div class="sixty"></div>
  <div class="sixty"></div>
  <div class="sixty"></div>
  <div class="sixty"></div>
  <div class="sixty"></div>
  <div class="forty"></div>
</div>

Upvotes: 2

Younis Ar M
Younis Ar M

Reputation: 941

Check if this solution works for you

Plunkr link - https://plnkr.co/edit/T17RW2LHJvw8FaxmwHyg?p=preview

css :

* {
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;
        }

        .flex-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        border: 1px solid black;
        }

        .flex-cont{
        display : flex;
        flex-direction : row;
        }

        .flex-div{
            width: 50%;
        }

        .sixty {
        height: 100px;
        width : 100%;
        background-color: red;
        border: 1px solid white;
        }

        .forty {
        width : 100%;
        background-color: blue;
        height: 1000px;
        }

html : 

<html>
<head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>

<body>
    <div class="flex-cont">
        <div class="flex-div">
        <div class="sixty"></div>
        <div class="sixty"></div>
        <div class="sixty"></div>
        <div class="sixty"></div>
        <div class="sixty"></div>
        <div class="sixty"></div>
        <div class="sixty"></div>
    </div>
    <div class="flex-div">
        <div class="forty"></div>
    </div>
    </div>
 </body>
 </html>

Upvotes: 0

Related Questions