Menu
I would like to have the flex children rendered inline-block so that border-bottom is under the li's width instead of the container's width.
Apparently flex children can't be set as inline-block?
Is there a workaround to this problem?
.menu {
display: flex;
flex-flow: column;
list-style: none;
padding: 0;
}
.menu > li {
display: inline-block;
margin-bottom: 1rem;
border-bottom: 3px solid black;
}<ul class="menu">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>https://codepen.io/joshuajazleung/pen/EbwZmJ
417
In particular, the flex items themselves always behave like block-level boxes (although they do have some properties of inline-blocks). You cannot display flex items inline; otherwise you don't actually have a flex layout.
The main difference between display: flex and display: inline-flex is that display: inline-flex will make the flex container an inline element while its content maintains its flexbox properties. In the below picture, the flex container comprises Computer, Science, Portal, and the yellow area. Example: html.
inline-flex. Displays an element as an inline-level flex container. inline-grid. Displays an element as an inline-level grid container. inline-table.
Add align-items: flex-start to the container:
.menu {
display: flex;
flex-flow: column;
align-items: flex-start; /* NEW */
list-style: none;
padding: 0;
}
.menu > li {
margin-bottom: 1rem;
border-bottom: 3px solid black;
}<ul class="menu">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>OR... switch from display: flex to display: inline-flex.
.menu {
display: inline-flex;
flex-flow: column;
list-style: none;
padding: 0;
}
.menu > li {
margin-bottom: 1rem;
border-bottom: 3px solid black;
}<ul class="menu">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>More details here: Make flex items take content width, not width of parent container
183
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
