Flex column: How to display 2 item on the same line

Question

I am currently trying to display 2 item on the same line using Flexbox, in the exemple below I would like to display Item 1 and Item 2 on the same line

I already tried to add flex: 1 0 50%; But it doesn't work

.container {
  flex: 1;
  display: flex;
  border: 1px solid #000;
  background: #FFF;
  flex-direction: column;
}

.item {
  padding: 14px;
  margin: 12px;
  background: #ED8896;
}

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

possible duplicate : https://stackoverflow.com/questions/53020698/how-to-add-1px-margin-to-a-flex-item-that-is-flex-0-0-25/53020778#53020778 ... not exactly the same but will show you how to deal with margin+flex-basis — Temani Afif, Dec 13 '18 at 13:57
@Termani Afif can you please show me a working example then please? baceause I juste tried with 34% and still have the same result — Ced, Dec 13 '18 at 13:57
This is not a duplicate ! You said it yourself "not exactly the same" .. — Ced, Dec 13 '18 at 13:58
and did I close as duplicate? no .. I wanted to help but sorry to bother because your answer is there — Temani Afif, Dec 13 '18 at 13:59
You're using `column` as `flex-direction`. So in the best case, it will be something like 1 on the first row, 2 on the second row, then 3 on the first row again ( wrapped to another column ) and finally 4 on the second row again. the best result would be using `row ` for ` flex-direction` as @DogukanCavus has written below, but the other parts are just math. You can use `width: 48%` and `margin: 1%` for example, or just stick to the provided answer. Hope this will give you the idea. — mrReiha, Dec 13 '18 at 14:09
Thank you @mrReiha but I think if would be easier to understand if you write is as an answer instead of a comment — Ced, Dec 13 '18 at 14:11

score 3 · Accepted Answer · edited Dec 13 '18 at 16:05

3

You can find the solution below:

.container {
  display: flex;
  border: 1px solid #000;
  background: #FFF;
  flex-direction: row; /* change this to row instead of 'column' */
  flex-wrap:wrap; /* added flex-wrap */
}

.item {
  padding: 14px;
  box-sizing: border-box; /* I added */
  margin: 12px;
  background: #ED8896;
  width:100%; /* I added */
}

.item:nth-child(1){
    width:calc(50% - 24px);
}

.item:nth-child(2){
    width:calc(50% - 24px);
}

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

edited Dec 13 '18 at 16:05

Ced

1,293
5
23
34

answered Dec 13 '18 at 13:59

doğukan

23,073
13
57
69

4

Please explain what you have changed and not just expect people to spot the difference – Pete Dec 13 '18 at 14:06
Thank you for your answer but it doesn't truly solve my problem, I want only the first line to contain 2 item, not all of them – Ced Dec 13 '18 at 14:06
3

also you can use `:nth-child(-n+2)` for the first 2 children so you do not need to repeat code – Pete Dec 13 '18 at 14:09
@Pete thanks. as much as i can. but my english not enough good for this. – doğukan Dec 13 '18 at 14:10
2

just comment the line of code you have edited then - eg `flex-direction: row; /* change this */ flex-wrap:wrap; /* add this */` - just something simple so we know what we are looking at – Pete Dec 13 '18 at 14:11
Thank you guys for your help :D – Ced Dec 13 '18 at 14:20

Flex column: How to display 2 item on the same line

1 Answers1