What s the difference between display inline-flex and display flex

Question

I am trying to vertically align elements within an ID wrapper  I gave the property display inline-flex  to this ID as the ID wrapper is the flex container   But there is no difference in presentation  I expected that everything in the wrapper ID would be displayed inline  Why isn t it    x000D   x000D   wrapper   x000D      display  inline-flex  x000D        no difference to display flex     x000D    x000D   lt body gt  x000D       lt div id  wrapper  gt  x000D           lt header gt header lt  header gt  x000D           lt nav gt nav lt  nav gt  x000D           lt aside gt aside lt  aside gt  x000D           lt main gt main lt  main gt  x000D           lt footer gt footer lt  footer gt  x000D       lt  div gt  x000D   lt  body gt  x000D   x000D   x000D

User · Answer

Display flex apply flex layout to the flex items or children of the container only  So  the container itself stays a block level element and thus takes up the entire width of the screen   This causes every flex container to move to a new line on the screen   Display inline-flex apply flex layout to the flex items or children as well as to the container itself  As a result the container behaves as an inline flex element just like the children do and thus takes up the width required by its items children only and not the entire width of the screen   This causes two or more flex containers one after another  displayed as inline-flex  align themselves side by side on the screen until the whole width of the screen is taken

User · Answer

OK  I know at first might be a bit confusing  but display is talking about the parent element  so means when we say  display  flex   it s about the element and when we say display inline-flex   is also making the element itself inline     It s like make a div inline or block  run the snippet below and you can see how display flex breaks down to next line    x000D   x000D   inline-flex   x000D    display  inline-flex  x000D    x000D   x000D   flex   x000D    display  flex  x000D    x000D   x000D  p   x000D    color  red  x000D    x000D   lt body gt  x000D     lt p gt Display Inline Flex lt  p gt  x000D     lt div class  inline-flex  gt  x000D       lt header gt header lt  header gt  x000D       lt nav gt nav lt  nav gt  x000D       lt aside gt aside lt  aside gt  x000D       lt main gt main lt  main gt  x000D       lt footer gt footer lt  footer gt  x000D     lt  div gt  x000D   x000D     lt div class  inline-flex  gt  x000D       lt header gt header lt  header gt  x000D       lt nav gt nav lt  nav gt  x000D       lt aside gt aside lt  aside gt  x000D       lt main gt main lt  main gt  x000D       lt footer gt footer lt  footer gt  x000D     lt  div gt  x000D   x000D     lt p gt Display Flex lt  p gt  x000D     lt div class  flex  gt  x000D       lt header gt header lt  header gt  x000D       lt nav gt nav lt  nav gt  x000D       lt aside gt aside lt  aside gt  x000D       lt main gt main lt  main gt  x000D       lt footer gt footer lt  footer gt  x000D     lt  div gt  x000D   x000D     lt div class  flex  gt  x000D       lt header gt header lt  header gt  x000D       lt nav gt nav lt  nav gt  x000D       lt aside gt aside lt  aside gt  x000D       lt main gt main lt  main gt  x000D       lt footer gt footer lt  footer gt  x000D     lt  div gt  x000D   lt  body gt  x000D   x000D   x000D    Also quickly create the image below to show the difference at a glance

User · Answer

You need a bit more information so that the browser knows what you want  For instance  the children of the container need to be told  how  to flex   Updated Fiddle  I ve added  wrapper  gt      flex  1  margin  auto    to your CSS and changed inline-flex to flex  and you can see how the elements now space themselves out evenly on the page

User · Answer

display  inline-flex does not make flex items display inline  It makes the flex container display inline  That is the only difference between display  inline-flex and display  flex  A similar comparison can be made between display  inline-block and display  block  and pretty much any other display type that has an inline counterpart 1  There is absolutely no difference in the effect on flex items  flex layout is identical whether the flex container is block-level or inline-level  In particular  the flex items themselves always behave like block-level boxes  although they do have some properties of inline-blocks   You cannot display flex items inline  otherwise you don t actually have a flex layout   It is not clear what exactly you mean by  vertically align  or why exactly you want to display the contents inline  but I suspect that flexbox is not the right tool for whatever you are trying to accomplish  Chances are what you re looking for is just plain old inline layout  display  inline and or display  inline-block   for which flexbox is not a replacement  flexbox is not the universal layout solution that everyone claims it is  I m stating this because the misconception is probably why you re considering flexbox in the first place      1 The differences between block layout and inline layout are outside the scope of this question  but the one that stands out the most is auto width  block-level boxes stretch horizontally to fill their containing block  whereas inline-level boxes shrink to fit their contents  In fact  it is for this reason alone you will almost never use display  inline-flex unless you have a very good reason to display your flex container inline

User · Answer

The Difference between  flex  and  inline-flex   Short answer    One is inline and the other basically responds like a block element but has some of it s own differences    Longer answer   Inline-Flex - The inline version of flex allows the element  and it s children  to have flex properties while still remaining in the regular flow of the document webpage  Basically  you can place two inline flex containers in the same row  if the widths were small enough  without any excess styling to allow them to exist in the same row  This is pretty similar to  inline-block    Flex - The container and it s children have flex properties but the container reserves the row  as it is taken out of the normal flow of the document  It responds like a block element  in terms of document flow  Two flexbox containers could not exist on the same row without excess styling   The problem you may be having  Due to the elements you listed in your example  though I am guessing  I think you want to use flex to display the elements listed in an even row-by-row fashion but continue to see the elements side-by-side   The reason you are likely having issues is because flex and inline-flex have the default  flex-direction  property set to  row   This will display the children side-by side  Changing this property to  column  will allow your elements to stack and reserve space width  equal to the width of its parent   Below are some examples to show how flex vs inline-flex works and also a quick demo of how inline vs block elements work     display  inline-flex  flex-direction  row    Fiddle  display  flex  flex-direction  row    Fiddle  display  inline-flex  flex-direction  column    Fiddle  display  flex  flex-direction  column    Fiddle  display  inline    Fiddle  display  block   Fiddle  Also  a great reference doc  A Complete Guide to Flexbox - css tricks

User · Answer

Open in Full page for better understanding   x000D   x000D   item   x000D    width   100px  x000D    height   100px  x000D    margin  20px  x000D    border  1px solid blue  x000D    background-color  yellow  x000D    text-align  center  x000D    line-height  99px  x000D    x000D   x000D   flex-con   x000D    flex-wrap  wrap  x000D        lt A gt        x000D    display  flex  x000D       1  uncomment below 2 lines by commenting above 1 line    x000D        lt B gt       x000D       display  inline-flex     x000D    x000D    x000D   x000D   label   x000D    padding-bottom  20px  x000D    x000D   flex-inline-play   x000D    padding  20px  x000D    border  1px dashed green  x000D       lt C gt     x000D    width  1000px  x000D        lt D gt     x000D    display  flex  x000D    x000D   lt figure gt  x000D     lt blockquote gt  x000D        lt h1 gt Flex vs inline-flex lt  h1 gt  x000D       lt cite gt This pen is understand difference between x000D      flex and inline-flex  Follow along to understand this basic property of css lt  cite gt  x000D       lt ul gt  x000D         lt li gt Follow  1 in CSS  x000D           lt ul gt  x000D             lt li gt Comment  lt code gt display  flex lt  code gt  lt  li gt  x000D             lt li gt Un-comment  lt code gt display  inline-flex lt  code gt  lt  li gt  x000D           lt  ul gt  x000D         lt  li gt  x000D         lt li gt  x000D          Hope you would have understood till now  This is very similar to situation of  inline-block  vs  block   Lets go beyond and understand usecase to apply learning  Now lets play with combinations of A  B  C  amp  D by un-commenting only as instructed  x000D           lt ul gt  x000D        lt li gt A with D -- does this do same job as  lt code gt display  inline-flex lt  code gt   Umm  you may be right  but not its doesnt do always  keep going   lt  li gt  x000D             lt li gt A with C lt  li gt  x000D             lt li gt A with C  amp  D -- Something wrong   Keep going   lt  li gt  x000D             lt li gt B with C lt  li gt  x000D             lt li gt B with C  amp  D -- Still same   Did you learn something   inline-flex is useful if you have space to occupy in parent of 2 flexboxes  lt code gt  flex-con lt  code gt   That s the only usecase lt  li gt  x000D           lt  ul gt  x000D         lt  li gt  x000D       lt  ul gt  x000D     lt  blockquote gt  x000D     x000D   lt  figure gt  x000D   lt br  gt  x000D    lt div class  label  gt Playground  lt  div gt  x000D   lt div class  flex-inline-play  gt  x000D     lt div class  flex-con  gt  x000D       lt div class  item  gt 1 lt  div gt  x000D       lt div class  item  gt 2 lt  div gt  x000D       lt div class  item  gt 3 lt  div gt  x000D       lt div class  item  gt 4 lt  div gt  x000D     lt  div gt  x000D     lt div class  flex-con  gt  x000D       lt div class  item  gt X lt  div gt  x000D       lt div class  item  gt Y lt  div gt  x000D       lt div class  item  gt Z lt  div gt  x000D       lt div class  item  gt V lt  div gt  x000D       lt div class  item  gt W lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

flex and inline-flex both apply flex layout to children of the container  Container with display flex behaves like a block-level element itself  while display inline-flex makes the container behaves like an inline element

User · Answer

You can display flex items inline  providing your assumption is based on wanting flexible inline items in the 1st place  Using flex implies a flexible block level element  The simplest approach is to use a flex container with its children set to a flex property  In terms of code this looks like this   parent     display  inline-flex      children     flex  1     flex  1 denotes a ratio  similar to percentages of a element s width  Check these two links in order to see simple live Flexbox examples   https   njbenjamin com bundle-3 htm https   njbenjamin com bundle-4 htm  If you use the 1st example  https   njbenjamin com flex index 1 htm You can play around with your browser console  to change the display of the container element between flex and inline-flex

User · Answer

Using two-value display syntax instead  for clarity The display CSS property in fact sets two things at once  the outer display type  and the inner display type  The outer display type affects how the element  which acts as a container  is displayed in its context  The inner display type affects how the children of the element  or the children of the container  are laid out  If you use the two-value display syntax  which is only supported in some browsers like Firefox  the difference between the two is much more obvious   display  block is equivalent to display  block flow display  inline is equivalent to display  inline flow display  flex is equivalent to display  block flex display  inline-flex is equivalent to display  inline flex display  grid is equivalent to display  block grid display  inline-grid is equivalent to display  inline grid  Outer display type  block or inline  An element with the outer display type of block will take up the whole width available to it  like  lt div gt  does  An element with the outer display type of inline will only take up the width that it needs  with wrapping  like  lt span gt  does  Inner display type  flow  flex or grid  The inner display type flow is the default inner display type when flex or grid is not specified  It is the way of laying out children elements that we are used to in a  lt p gt  for instance  flex and grid are new ways of laying out children that each deserve their own post  Conclusion  The difference between display  flex and display  inline-flex is the outer display type  the first s outer display type is block  and the second s outer display type is inline  Both of them have the inner display type of flex  References   The two-value syntax of the CSS Display property on mozzilla org

[css] What's the difference between display:inline-flex and display:flex?

Examples related to css

Examples related to flexbox