Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bold text inside a flex container not appearing inline

Tags:

html

css

flexbox

I've got div containers that are using flex. I have a bold senescence inside my flex child containers.

example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at lectus vitae libero pulvinar fringilla. Nullam vel vestibulum orci.

However, when I create my flex container it's not making the bold text inline. It's creating a block between the regular text and the bold text.

example

Lorem ipsum dolor

sit amet, consectetur adipiscing elit. Nunc at lectus vitae libero pulvinar fringilla. Nullam vel vestibulum orci.

I've set my flex container as follows:

.flexparent { display: flex; flex-direction: row; justifty-content: center; flex-wrap: wrap-reverse }
.flexchild1 { display: inline-flex; flex-direction: column; flex-wrap: nowrap; justify-contetn: center; width: 65%; margin-right: 4%;}
.flexchild2 { display: inline-flex; flex-direction: column; flex-wrap: nowrap; justify-contetn: center; width: 35%;}

My ideal solution is something like this where .flexchild1 is green and .flexchild2 is yellow.

enter image description here

like image 750
Nick Avatar asked Sep 01 '16 02:09

Nick


1 Answers

If you're going to use a flex container, keep in mind that all child elements will become flex items and stack vertically or horizontally, depending on flex-direction.

So, if we consider this code:

<div class="flex-container"><b>Lorem ipsum dolor sit amet</b> consectetur adipiscing elit. <span>Nunc at lectus vitae libero</span> pulvinar fringilla. <i>Nullam vel vestibulum orci.</i></div>

Although, the <b>, <span> and <i> elements are inline-level in a block formatting content...

.flex-container {
    display: block;
    flex-direction: row;
    background-color: lightgreen;
}

span { color: red; }
<div class="flex-container"><b>Lorem ipsum dolor sit amet</b> consectetur adipiscing elit. <span>Nunc at lectus vitae libero</span> pulvinar fringilla. <i>Nullam vel vestibulum orci.</i></div>

ALL child elements are blockified in a flex formatting context...

.flex-container1 {
    display: flex;
    flex-direction: row;
    background-color: lightgreen;
}
.flex-container2 {
    display: flex;
    flex-direction: column;
    background-color: lightgreen;
}
span { color: red; }
<div class="flex-container1"><b>Lorem ipsum dolor sit amet</b> consectetur adipiscing elit. <span>Nunc at lectus vitae libero</span> pulvinar fringilla. <i>Nullam vel vestibulum orci.</i></div>

<hr>

<div class="flex-container2"><b>Lorem ipsum dolor sit amet</b> consectetur adipiscing elit. <span>Nunc at lectus vitae libero</span> pulvinar fringilla. <i>Nullam vel vestibulum orci.</i></div>

What you may want to do is wrap your text in its own block-level container within the flex container.

.flex-container1 {
    display: flex;
    flex-direction: row;
    background-color: lightgreen;
}

.flex-container2 {
    display: flex;
    flex-direction: column;
    background-color: lightgreen;
}

span {
    color: red;
}
<div class="flex-container1">
    <div>
        <b>Lorem ipsum dolor sit amet</b> consectetur adipiscing elit. <span>Nunc at lectus vitae libero</span> pulvinar fringilla. <i>Nullam vel vestibulum orci.</i>
    </div>
</div>

<hr>

<div class="flex-container2">
    <div>
        <b>Lorem ipsum dolor sit amet</b> consectetur adipiscing elit. <span>Nunc at lectus vitae libero</span> pulvinar fringilla. <i>Nullam vel vestibulum orci.</i>
    </div>
</div>
like image 138
Michael Benjamin Avatar answered Oct 28 '22 07:10

Michael Benjamin