2

I want to know if it's possible using flexbox to create the layout the 1st/top rectangle of my diagram.

enter image description here

I'm dealing with blocks, not text/words, but I want my (flex or other) block elements to behave like inline elements, as if a sentence wrapping to next line was inside a span (see code below. This is just an example of the layout behaviour I want to achieve, not that I'm trying to apply flexbox layout to words).

If it's not possible, how would you do it in CSS? If you're using all inline styling, how to do it in a way that negates the whitespace between elements?

p { width: 200px; }
<p>But ere she from the <span style="background: orangered;">church-door stepped
    She</span> smiled and told us why:
'It was a wicked woman's curse,'
     Quoth she, 'and what care I?'

She smiled, and smiled, and passed it off
     Ere from the door she stept—</p>
bot19
  • 664
  • 8
  • 18
  • Not sure what you're asking. Are you trying to add `display: flex` to `

    `'s parent, and then turn `

    ` into `flex: 1` (or similar)? Because wrapping is the *default* for a flex element. And what whitespace between elements? You only have one `

    ` in your example. Do you mean the `line-height`??

     – Obsidian Age Sep 05 '19 at 03:29
  • 1
    Please correct me if Im wrong are you trying to achieve the same result for the `span` using `flex` instead of its default inline display? – Yor Sep 05 '19 at 03:41
  • @ObsidianAge the code below has no relation other than trying to demonstrate a wrapping behaviour. I want a flexbox/block parent to break/split between its current row and the row below if there's not enough space, distributing its child blocks the same way an inline element, say a `span` would wrap a sentence breaking/splitting over current line and the next line, does that make sense? Just comparing, I want this layout for block elements, not text. – bot19 Sep 05 '19 at 03:42
  • @yor this. I wanted to know if it's possible, and if not, how would people do it, because as you know when you use `inline-block` the whitespace between elements is rendered from the markup. – bot19 Sep 05 '19 at 03:43
  • I think you can use `inline-flex` to do this tho it will not achieve the same exact behavior of the `inline` – Yor Sep 05 '19 at 03:48
  • I played around with inline-flex but couldn't get that effect :( @Yor – bot19 Sep 05 '19 at 03:49
  • 1
    Regarding negating the spaces between you can check this https://css-tricks.com/fighting-the-space-between-inline-block-elements/ its for `inline-block` but you can get some tips that you can apply on inline elements aswell – Yor Sep 05 '19 at 04:21
  • 1
    This is **not** possible with flexbox. – Paulie_D Sep 05 '19 at 08:45
  • 1
    instead of a complex thinking, simply search how to avoid whitespace between span. This is what you are looking for. – Temani Afif Sep 05 '19 at 09:01

0 Answers0