CODEWITHSUNDEEP
htmlcssflexbox
byCoder
byCoder

Reputation: 9184

CSS flex align columns as in newspaper

I have such a sample code:

.items {
  display: flex;
  flex-flow: wrap;
  width: 400px;
  height: 200px;
  background: yellow;
}

.item {
  flex: 50%;
}
<div class="items">
  <div class="item">
    <span>item 1</span>
  </div>
  <div class="item">
    <span>item 2</span>
  </div>
  <div class="item">
    <span>item 3</span>
  </div>
  <div class="item">
    <span>item 4</span>
  </div>
  <div class="item">
    <span>item 5</span>
  </div>
  <div class="item">
    <span>item 6</span>
  </div>
  <div class="item">
    <span>item 7</span>
  </div>
  <div class="item">
    <span>item 8</span>
  </div>
  <div class="item">
    <span>item 9</span>
  </div>
  <div class="item">
    <span>item 10</span>
  </div>
  <div class="item">
    <span>item 11</span>
  </div>
  <div class="item">
    <span>item 12</span>
  </div>
  <div class="item">
    <span>item 13</span>
  </div>
  <div class="item">
    <span>item 14</span>
  </div>
</div>

My items are aligned a bit wrong, so item 2 is to the right of item 1, and I need to change it a bit...

It should be like so:

item 1 | item 4
item 2 | item 5
item 3 | item 6

Every next item should be under the previous item, and must be wrapper into to columns. Is it possible with a plain CSS & HTML ?

JsFiddle here

Upvotes: 0

Views: 2029

Answers (3)

Jone
Jone

Reputation: 170

.parentClass { display: flex; flex-wrap: wrap; flex-direction: column; border: 1px solid #678596; max-width: 600px; height: 300px;}
.parentClass > div {flex: 1 1 80px; background-color:#678596; margin: 5px; text-align: center; color: #fff;}
<div class="parentClass">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
      <div>Six</div>
      <div>Seven</div>
      <div>Eight</div>
      <div>Nine</div>
      <div>Ten</div>
  </div>

Upvotes: 0

suhail ahmed
suhail ahmed

Reputation: 122

you can add flex-direction:column, so that the next element comes to below of the element .4 will come beside 1 . here is the good article you can go through https://gedd.ski/post/flex-wrap/

Upvotes: 0

Abhishek Pandey
Abhishek Pandey

Reputation: 13568

A bit change in your code,

Add flex-direction: column; to .items, and flex: 0 1; to .item

.items {
  display: flex;
  flex-flow: wrap;
  width: 400px;
  height: 200px;
  background: yellow;
  flex-direction: column;
}

.item {
  flex: 0 1;
}
<div class="items">
  <div class="item">
    <span>item 1</span>
  </div>
  <div class="item">
    <span>item 2</span>
  </div>
  <div class="item">
    <span>item 3</span>
  </div>
  <div class="item">
    <span>item 4</span>
  </div>
  <div class="item">
    <span>item 5</span>
  </div>
  <div class="item">
    <span>item 6</span>
  </div>
  <div class="item">
    <span>item 7</span>
  </div>
  <div class="item">
    <span>item 8</span>
  </div>
  <div class="item">
    <span>item 9</span>
  </div>
  <div class="item">
    <span>item 10</span>
  </div>
  <div class="item">
    <span>item 11</span>
  </div>
  <div class="item">
    <span>item 12</span>
  </div>
  <div class="item">
    <span>item 13</span>
  </div>
  <div class="item">
    <span>item 14</span>
  </div>

</div>

Upvotes: 4

Related Questions