Question 71940 in CSS Question posted in
Some basic documentation can be found here.

How to inline a tag in text with flex layout? – Css

How can I simulate the display: box with display: flex? It’s seems that the box is abandoned, but I need render the element inline.

The flex will override the layout with it’s own rule row or column. So the tag in flex container won’t be rendered inline.

EDIT:
What I do is writing an user script for a page. I don’t want to modify the parent of my element inserted. Otherwise I have to fit every page that parent is display: flex by myself.

EDIT2:
I don’t want to change the struct of text nodes<a href></a>text nodes

#container {
  display: flex;
  width: 100px;
}

#box {
  display: -webkit-box;
  width: 100px;
}

#a {
  display: inline-flex;
}

#tag {
  display: flex;
}
`display: flex`
<p id="container">
  <span id="tag">[TAG]</span>&nbsp; Hello world and&nbsp;<a id="a" href="/">StackOverflow</a>! Show me the money
</p>

Expected: `display: -webkit-box`
<p id="box">
  <span id="tag">[TAG]</span>&nbsp; Hello world and&nbsp;<a id="a" href="/">StackOverflow</a>! Show me the money
</p>

`display: block` is fine. But it will failed when tag display as flex(`inline-flex` is fine)
<p id="container" style="display: block">
  <span id="tag">[TAG]</span>&nbsp; Hello world and&nbsp;<a id="a" href="/">StackOverflow</a>! Show me the money
</p>
Tags:

3

Answers


  1. 0

    You can simply assign a width to the message.

    #container {
display:flex;

}

#message {
  width:5rem;
}
    <p id="container">
  <span id="tag">[TAG]</span> <span id="message">Hello world and <a id="a" href="/">StackOverflow</a>! Show me the money</span>
</p>
    Login or Signup to reply.
  2. 0

    Add another flex-box and set flex-direction: column;.

    #container {
  display: flex;
  width: 100px;
}

#flex-column {
  display: flex;
  flex-direction: column;
}

#a {
  display: inline-flex;
}

#tag {
  display: flex;
}
    <p id="container">
  <span id="tag">[TAG]</span><span id="flex-column">&nbsp; Hello world and&nbsp;<a id="a" href="/">StackOverflow</a>! Show me the money</span>
</p>
    Login or Signup to reply.
  3. 0

    you can do it with CSS grid:

    #container {
  display: grid;
  grid-template-columns: auto auto; /* 2 columns */
  width: 100px;
}

#box {
  display: -webkit-box;
  width: 100px;
}

#a {
  display: inline-flex;
}

#tag {
  display: flex;
  grid-row: span 50; /* a big value to create many rows*/
}
    `display: grid`
<p id="container">
  <span id="tag">[TAG]</span>&nbsp; Hello world and&nbsp;<a id="a" href="/">StackOverflow</a>! Show me the money
</p>

Expected: `display: -webkit-box`
<p id="box">
  <span id="tag">[TAG]</span>&nbsp; Hello world and&nbsp;<a id="a" href="/">StackOverflow</a>! Show me the money
</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search