Why using flexbox in container can prevent extra space of inline-block

Question

When I use inline-block, I meet space problem. As many solutions propose here The solution that I liked best is using FlexBox. Just simple, we just add display:flex in container. As example below:

.flexbox {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
   li {
  background: slategrey;
  display: inline-block;
  /* inline block hack for IE 6&7 */
  zoom: 1;
  *display: inline;
  padding: 4px;
  color: white
}

<ul class="flexbox">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

My question is: Why FlexBox can prevent extra space of inline-block. (I know why extra space exist when using inline-block). I have read some documents about FlexBox but no document mentions clearly about relationship between flexbox and inline-block

Can you explain me more detail, please ? Which values will flex model override ? If they override all attributes, so `inline-block` is useless ? thanks :) — Trần Kim Dự, May 12 '15 at 18:27
@GCyrillus I have edited my question in code for clearer purpose. thanks — Trần Kim Dự, May 12 '15 at 18:31

score 8 · Accepted Answer · edited May 23 '17 at 11:52

8

Flex layout is based on block layout. Whitespace is ignored in both of these layout modes.

But in inline layout, whitespace between inline boxes is significant as the whitespace is considered part of the inline content. As in my answer to your previous question, this is akin to having a phrase consisting of two words separated by a space — whitespace between two inline blocks behaves exactly the same as such a space.¹

Flex layout and inline-blocks have absolutely no relation whatsoever and are not compatible with one another. When you declare display: flex on a container, its children become flex items, which can never be displayed inline (they can contain their own inline contents, however).

¹ _{This is also why I contend that trying to remove whitespace between inline-blocks is really solving the wrong problem — you should never be using inline-block in the first place unless you well and truly understand inline layout and inline layout is actually what you need.}

edited May 23 '17 at 11:52

Community

1
1

answered May 12 '15 at 18:33

BoltClock

700,868
160
1,392
1,356

As I understand base on your explanation (and I have tested), if we removed line `display:inline-block` and `display:inline`, no thing changes in this case, right ? thanks :) – Trần Kim Dự May 12 '15 at 18:42
Moreover, I read many document they said prefer `inline-block` to `float`. As you take note (1), we should limit `inline-block` when we don't understand all and move to use `float` ? – Trần Kim Dự May 12 '15 at 18:46
2

@Trần Kim Dự: Yes, display: inline and inline-block have no effect as long as the parent element is display: flex. As for inline-block vs float, I'd rather not open that can of worms tonight :) – BoltClock May 12 '15 at 18:47
1

thanks :) So I think those tutorials I read, they put `display:inline-block` just for saving space for another examples. Just about experience, do you prefer using `display:flex` as a solution for above problem ? thanks :) – Trần Kim Dự May 12 '15 at 18:50

Why using flexbox in container can prevent extra space of inline-block

1 Answers1