Make flex item take 100% width of new line

Question

I have HTML structure like:

<div class="container">
  <div class="btn-1"></div>
  <div class="btn-2"></div>
  <div class="btn-3"></div>

  <div class="text">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. A veritatis harum illum assumenda odio ut, quos, ipsam molestias et sint nemo, saepe! Soluta a, quasi sequi, ut corrupti eius molestias.
  </div>
</div>

btn-1 should be aligned to the top left, all other buttons (btn-2, btn-3...) should be aligned to the top right.
The text after all these buttons should be 100% width.

Quick mockup:

I figured out the first part (buttons) with:

.container {
  display: flex;
  justify-content: flex-end;
}
.btn-1 {
  /* align first button to the left */
  margin-right: auto;
}

Bu not matter what I do, the text doesn't flow to the next line...

Here's my JSFiddle https://jsfiddle.net/an0o7taq/

Thanks for any help!

Side note: The auto margin is enough. You don't need `justify-content`. — Michael Benjamin, Oct 14 '17 at 11:59

Michael Benjamin · Accepted Answer · 2017-10-14T11:55:56.783

6

You need to add flex-wrap: wrap to the container.

By default, flex containers are set to flex-wrap: nowrap, forcing items to remain on a single line.

revised jsfiddle

Spec reference:

5.2. Flex Line Wrapping: the flex-wrap property

edited Oct 14 '17 at 11:55

answered Oct 14 '17 at 11:49

Michael Benjamin

346,931
104
581
701

Thanks, that's very close to what I need, but now the text is aligned to the middle of the parent - https://jsfiddle.net/o3ucfbrg/ (instead of being right below buttons). Is there a way to change this? I tried align-self: flex-start on "text" element, but it doesn't seem to help. – Marvin3 Oct 14 '17 at 12:08
That's because you added height to the container. Now you need to add `align-content: flex-start` ([revised demo](https://jsfiddle.net/o3ucfbrg/1/)). – Michael Benjamin Oct 14 '17 at 12:10
[Remove space (gaps) between multiple lines of flex items when they wrap](https://stackoverflow.com/q/40890613/3597276) – Michael Benjamin Oct 14 '17 at 12:11
[How does flex-wrap work with align-self, align-items and align-content?](https://stackoverflow.com/q/42613359/3597276) – Michael Benjamin Oct 14 '17 at 12:13

Daniel · Answer 2 · 2017-10-14T12:43:22.983

You need more container with different flex flows and styles. Tip: learn most important flex props: align-items, flex-flow, justify-content. They all apply to the direct children of the container. So when you want your layout you need more container with different flex flows.

This guide helped me a lot. They also have great examples:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.container {
  display: flex;
  flex-flow: column nowrap;
}

.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.header-left, .header-right {
  display: flex;
  flex-flow: row nowrap;
}

.btn {
  width: 40px;
  height: 40px;
  border: 1px solid #ddd;
  background-color: #eee;
}

.text {
  width: 100%;
}

<div class="container">
  <div class="header">
    <div class="header-left">
      <div class="btn">btn1</div>
    </div>
    <div class="header-right">
      <div class="btn">btn2</div>
      <div class="btn">btn3</div>
    </div>
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A veritatis harum illum assumenda odio ut, quos, ipsam molestias et sint nemo, saepe! Soluta a, quasi sequi, ut corrupti eius molestias.
  </div>
</div>

Make flex item take 100% width of new line

2 Answers2

Linked

Related