使用flexbox在php环境中使用粗体文本格式

Question

I just recently started with coding , it's a small project and it's a web tool based on php and html. I started using flexbox to have more control over where snippets are on my site. I fetch a few things from my database and list them as shown in the example below. I have to use PHP because the actual content contains various php-parts to implement the data from the database.

//this is just an example, which when run, will show the problem...
//php part
echo "<div class='shell'>";
echo "<div class='shell a'>Headline<br> Something <br> another thing 
      <br> a third thing </div>";
echo "<div class='shell b'><b>Headline</b><br> Something <br> another thing 
      <br> a third thing </div>";
echo "<div class='shell c'><p><b>Headline</b><br> Something <br> another 
      thing <br> a third thing </p></div>";
echo "</div>";

//css part
.shell {display:flex; margin:auto; height:auto; width:600px; border: 1px 
solid black;justify-content:center;}
.a {width:auto;}
.b {width:auto;}
.c {width:auto;}

I want to use (shell b) for my boxes because without the (p) text formatting the box will only be around my actual text, example (shell c) will use space above and below the text, the border will show this. (Shell a) is there to show how it is supposed to look, and how i want (shell b) to look, with the bold headline. The problem is, that if i format anything in any kind without wrapping it in (p) it will get its own "row" and the following text will not be listed directly below it. Is this a known problem and is there a solution to it? I hope i could explain this so someone can understand it. Thanks in advance.

Edit: I added a picture so the problem can be seen without running the code somewhere. result of the code

Answer 1

As you use dispay: flex on all shell, it will look like this

.shell {
  display: flex;
  margin: auto;
  height: auto;
  width: 600px;
  border: 1px solid black;
  justify-content: center;
}

<div class='shell'>
  <div class='shell a'>Headline<br> Something <br> another thing
    <br> a third thing </div>
  <div class='shell b'><b>Headline</b><br> Something <br> another thing
    <br> a third thing </div>
  <div class='shell c'>
    <p><b>Headline</b><br> Something <br> another thing <br> a third thing </p>
  </div>
</div>

And the reason, for the 2nd item, is the <b></b> tags, which will be treated as a flex item, and in combination with the text, which is an anonymous flex item, they will render side-by-side.

The 3rd item solves this by having a wrapper, the p.

---

If you only set display: flex on the outer div, it likely will look what you expect

.shell.flex {
  display: flex;
  margin: auto;
  height: auto;
  width: 600px;
  justify-content: center;
}

.shell {
  border: 1px solid black;
}

<div class='shell flex'>
  <div class='shell a'>Headline<br> Something <br> another thing
    <br> a third thing </div>
  <div class='shell b'><b>Headline</b><br> Something <br> another thing
    <br> a third thing </div>
  <div class='shell c'>
    <p><b>Headline</b><br> Something <br> another thing <br> a third thing </p>
  </div>
</div>

---

Note, I didn't used the a/b/c classes as width: auto is the default

</div>