Flexbox - how to align left the last flex item?

Question

Do you have an idea how to align the last string in flexbox block?

.wrapper {
  display: flex;
  flex-flow: row wrap;
}

.wrapper p {
  flex: auto;
  width: 200px;
}

<div class="wrapper">
  <p>A</p>
  <p>B</p>
  <p>C</p>
  <p>D</p>
  <p>E</p>
  <p>F</p>
  <p>G</p>
  <p>H</p>
  <p>I</p>
  <p>J</p>
</div>

Everything works fine but the last string breaks blocks not as good as I wanted. On the screenshot below you can see behavior of the block and my red notes how I wanted.

Thanks a lot for any help!

-- EDITED --

Sorry, I didn't specify that I wanted save full width of wrapper tag. If I remove flex: auto; from child blocks it became not full width https://i.stack.imgur.com/YrzCV.png

Set flex grow to 0 for the `p`s if you want to keep that `flex: auto` — Huangism, Aug 21 '17 at 15:09

score 1 · Answer 1 · answered Aug 21 '17 at 15:12

Just remove flex: auto; from the rule for .wrapper p:

.wrapper {
  display: flex;
  flex-flow: row wrap;
}

.wrapper p {
  width: 200px;
}

<div class="wrapper">
  <p>A</p>
  <p>B</p>
  <p>C</p>
  <p>D</p>
  <p>E</p>
  <p>F</p>
  <p>G</p>
  <p>H</p>
  <p>I</p>
  <p>J</p>
  <p>K</p>
</div>

score 0 · Answer 2 · edited Aug 21 '17 at 15:41

0

Try removing the flex:auto; from your code.

.wrapper {
  display: flex;
  flex-flow: row wrap;
}

.wrapper p {
  width: 200px;
}

<div class="wrapper">
  <p>A</p>
  <p>B</p>
  <p>C</p>
  <p>D</p>
  <p>E</p>
  <p>F</p>
  <p>G</p>
  <p>H</p>
  <p>I</p>
  <p>J</p>
</div>

edited Aug 21 '17 at 15:41

demo

6,038
19
75
149

answered Aug 21 '17 at 15:15

mjarenyap

1
2

Flexbox - how to align left the last flex item?

2 Answers2