CODEWITHSUNDEEP
htmlcssflexbox
Marvin3
Marvin3

Reputation: 6041

Make flex item take 100% width of new line

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>

Quick mockup:

enter image description here

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!

Upvotes: 2

Views: 13803

Answers (2)

Daniel
Daniel

Reputation: 1953

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>

Upvotes: 1

Michael Benjamin
Michael Benjamin

Reputation: 371271

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:

Upvotes: 7

Related Questions