CODEWITHSUNDEEP
htmlcssflexbox
jas7457
jas7457

Reputation: 1782

Is there a way to tell flexbox to wrap columns after a certain number of elements?

I'm trying to achieve a view that will have items 1-5 in a single column and items 6-10 in the next column. Is there an easy way to achieve this using flex WITHOUT setting an explicit height on the flex container or using JQuery? I have a fiddle with the non-working version on top, and what I'm going for on the bottom (but this is using an explicit height).

https://jsfiddle.net/h6s9ds5a/

CSS

.wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.wrapper div {
  width: 50%;
}

HTML

<div class="wrapper">
  <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>
  <div>Item 8</div>
  <div>Item 9</div>
  <div>Item 10</div>
</div>

Upvotes: 2

Views: 1169

Answers (2)

Rohit
Rohit

Reputation: 1802

What you need is wrapper for both the columns

.wrapper {
  display: flex;
}
.wrapper div {
  width: 50%;
}
<div class="wrapper">
  <div class="col1">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
  </div>
  <div class="col2">
    <div>Item 6</div>
    <div>Item 7</div>
    <div>Item 8</div>
    <div>Item 9</div>
    <div>Item 10</div>
  </div>      
</div>

Upvotes: 1

junkfoodjunkie
junkfoodjunkie

Reputation: 3178

You can do it like this, by using two wrappers, but that might not work for you: https://jsfiddle.net/h6s9ds5a/2/

.wrapper {
  display: flex;
}
.wrapper .column {
  flex: 1 1 0;
}

.column div {
  flex-direction: column;
  }
<div class="wrapper">
  <div class="column">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
  </div>
  <div class="column">
    <div>Item 6</div>
    <div>Item 7</div>
    <div>Item 8</div>
    <div>Item 9</div>
    <div>Item 10</div>
  </div>
</div>

Upvotes: 1

Related Questions