Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Inline-level element being forced to a new line in flexbox

Tags:

html

css

flexbox

How come the <strong> element, which is an inline element, is forced to a new line?

This setup has a flex within a flex, nothing particularly crazy I wouldn't have thought. So perhaps it's just my misunderstanding of how flexbox works.

Take a look at: http://codepen.io/leads/pen/mEYOay

* {
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  border: 1px solid red;
  height: 200px;
  max-width: 600px
}
.left {
  flex: 1;
  background: rgba(0, 0, 0, .3);
}
.middle {
  flex: 0 0 200px;
  background: rgba(0, 0, 0, .4);
  text-align: center;
  display: flex;
  flex-direction: column;
}
.middle button {
  flex: 0 0 50px;
}
.middle p {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
}
strong {
  background: red;
}
.right {
  text-align: center;
  flex: 0 0 100px;
  background: rgba(0, 0, 0, .5);
}
<div class="container">
  <div class="left">
    <p>some content in the top left</p>
  </div>
  <div class="middle">
    <p>Lorem ipsum <strong>dolor</strong> sit amet, consectetur adipisicing elit.
    </p>
    <button>CTA</button>
  </div>
  <div class="right">
    <p>CTA</p>
  </div>
</div>
like image 459
Leads Avatar asked Aug 22 '16 14:08

Leads


People also ask

Does Flexbox work with inline elements?

With inline-flex or inline-grid , you have all the power of a flexbox or grid layout system within a block that lays out in the inline direction.

What is the difference between inline and Inline-Flex?

There is only one main difference between the inline-block and inline-flex: inline-block: Create specific block for each element under its section maintain the structure of each element. inline-flex: Does not reserved any specific space in normal form.

How do you put a flex item on the next line?

The solution is to force them by adding a collapsed row (height 0) which takes up the entire width of the container, making it occupy an entire row, thus pushing the 3rd item on the next row. Think of it like a <br> tag.


1 Answers

The <strong> element is a child in a flex container with flex-direction: column.

Hence, it will stack vertically with its siblings (which includes anonymous flex items, like in your code.)

Also note that:

  • When elements are children of a flex container, their display value is blockified.
  • In other words, display: inline, display: table, etc., will become display: block within the rules of a flex formatting context.

As an alternative, you can use flex auto margins to create your layout:

* {
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  border: 1px solid red;
  height: 200px;
  max-width: 600px
}
.left {
  flex: 1;
  background: rgba(0, 0, 0, .3);
}
.middle {
  flex: 0 0 200px;
  background: rgba(0, 0, 0, .4);
  text-align: center;
  display: flex;
  flex-direction: column;
}
.middle button {
  flex: 0 0 50px;
  margin-top: auto;   /* NEW */
}
.middle p {
  margin-top: auto;   /* NEW */
}
strong {
  background: red;
}
.right {
  text-align: center;
  flex: 0 0 100px;
  background: rgba(0, 0, 0, .5);
}
<div class="container">
  <div class="left">
    <p>some content in the top left</p>
  </div>
  <div class="middle">
    <p>Lorem ipsum <strong>dolor</strong> sit amet, consectetur adipisicing elit.
    </p>
    <button>CTA</button>
  </div>
  <div class="right">
    <p>CTA</p>
  </div>
</div>

Revised Codepen

like image 154
Michael Benjamin Avatar answered Oct 20 '22 06:10

Michael Benjamin