0

This question is about understanding how flex effect the display of child elements. The centering is peripheral and not the point of the question. Please see comments below if the question does not make sense.

From my reading of how flex works it should do the opposite and make the child elements behave like block elements.

However, in this minimal example it makes the paragraph element behave like an inline element.

I am using flex to center content.

<style>

/* display flex should cause child elments to behave like block elements
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
*/

#wrapper{
  display:flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

#image{
  margin: 0px;
  border: 1px dotted #888888;
}

#percentage{
  margin: 0px;
  font-size: 40px;
  font-weight: bold;
  border: 1px dotted #888888;
}
</style>

<div id="wrapper" >
<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/1/1c/Crystal_128_penguin.png" alt="wikimedia" width="128" height="128">   
<p id="percentage"> 10%</p>
</div>
  • If you don't want it as an inline element then change the `flex-direction`. You could change it to like `row` or `column` – GucciBananaKing99 Apr 16 '21 at 04:51
  • Flex kind of makes the child elements more like `inline-block` that `inline` . Flex's role is to define how the child elements behave in a given direction, by default row/horizontal. Not wanting to appear harsh, but your reading of flex behavior is wrong – Jon P Apr 16 '21 at 05:05
  • This is the important thing to note from the article linked in your code : "By default, flex items will **all try to fit onto one line.**" Flex items being the children of the container with `display:flex` – Jon P Apr 16 '21 at 05:13
  • 1
    @Jon P: Flex items share traits with both, but they do have much more in common with block-level boxes than inline-level boxes - flex layout itself has much more in common with block layout than inline layout. The flexbox spec itself says that flex items are "blockified" - that is, if you attempt to specify an inline-level display type on a flex item, it gets turned into its block-level counterpart, and the flex item behaves accordingly. – BoltClock Apr 16 '21 at 05:16
  • @BoltClock - that is how I read it and why I found it odd, that the paragraph tag was not given its own line. I think it is clear that documentation is unclear. Seems like with most CSS you must just accept the behavior and not try to reason why. –  Apr 16 '21 at 23:56
  • @j.m.00acee: The reason is actually pretty mundane: flexbox was envisioned as a modern layout-based replacement for the float "layouts" that people had been cobbling together for nearly a decade as it was the only option at the time. Floats are basically blocks laid out horizontally with wrapping, so it makes sense for horizontal layout to be the default for flexbox, but that's where the similarities with inline layout end. Inline layout is really its own beast, there is nothing quite like it. And flex layout has the extra bonus of being able to work horizontally or vertically. – BoltClock Apr 17 '21 at 02:26

1 Answers1

0

Basically, flexbox has a default flex-direction of row that's why the elements are inline, to make them appear on like block elements you can set flex-direction to column.

Rohit Dhas
  • 207
  • 1
  • 3
  • 9