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>
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.
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.
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.
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:
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With