131

Imagine I have following markup

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

and style

.item {
  width: 100%
}

and due to certain reasons I can't change the width of the .item Can I arrange 2 items in each row by styling parent container .container, using flexbox or any other way?

dippas
  • 58,591
  • 15
  • 114
  • 126
PranavPinarayi
  • 3,037
  • 5
  • 21
  • 32

3 Answers3

282

You can give flex: 50% to children divs without touching .item

.item {
  width: 100%
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container > div {
  flex: 50%; /* or - flex: 0 50% - or - flex-basis: 50% - */
  /*demo*/
  box-shadow: 0 0 0 1px black;
  margin-bottom: 10px;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
dippas
  • 58,591
  • 15
  • 114
  • 126
  • He said he couldn't change the width of the divs, you just did that with a different selector – Ben Jul 11 '17 at 15:11
  • I assume this: `Assuming .item is used globally so you cannot change the style of it` – dippas Jul 11 '17 at 16:26
  • 3
    If that was the case, wouldn't OP give it another class? – Ben Jul 11 '17 at 16:32
  • 4
    description of `flex` on css-tricks.com: this is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. Default is 0 1 auto. – Rik Schoonbeek Mar 12 '19 at 19:22
  • if you only have one element, you also need `max-width: 50 %;` ...? – O-9 Nov 01 '21 at 07:02
  • not true. use have to stop the flex item to grow so either use either one of my other "or" options given in the answer `flex: 0 50%` or `flex-basis: 50%` – dippas Nov 01 '21 at 09:08
  • I don't understand why you need the selector `.container > div`?? Why can't you just put it into the `.item` selector? It selects the same! – Black Feb 03 '22 at 12:30
  • @Black you're right, but IP mentioned didn't want/couldn't touch that selector. – dippas Feb 03 '22 at 13:43
  • If you add a further 5th row (or any even number), then the last row will take the whole line space. How can we prevent that? – micgala Nov 24 '22 at 17:26
  • 1
    @micgala you have to use `flex-grow: 0` , or the other options I gave in the answer ` `flex: 0 50%` (where `0` is flex-grow) or just use `flex-basis: 50%` so `flex-grow` will keep its default value , I have already replied to a similar comment in this answer a [little bit up](https://stackoverflow.com/questions/45037844/arrange-2-items-per-row-using-flexbox/45038018?noredirect=1#comment123370119_45038018) – dippas Nov 24 '22 at 18:09
6

The below solution worked for me

.parent{
  display: flex;
  flex-wrap: wrap;
}

.child{
  width: 25%;
  box-sizing: border-box;
}

Sample: https://codepen.io/capynet/pen/WOPBBm

Deepak Terse
  • 652
  • 8
  • 30
0

Assuming that the width property must not be changed, I can think of a few possible solutions, the first being fit-content which has amazingly poor browser support. The second, is use positioning, which is an equally bad idea due to its finicky nature and likelihood to fail on different screen sizes.

Now the last two, are very similar, one is to use two containers, give them display:inline; give them a limited width, and fill them with items. If you didn't notice, this is essentially a 2×1 table.

Lastly you could make a 2×1 table, and while it is probably the easiest solution here, it is a bad idea to get in the habit of using tables to position things other than forms and tables. However, it is an option that I will make available to you.

Good luck!

Ben
  • 2,200
  • 20
  • 30