Why using flexbox in a container can prevent extra inline-block space
When I use inline-block
, I encounter a space problem. As many solutions are suggested here The solution I liked the most is using FlexBox. Simple, just add display:flex
to the container. As an 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 inline-block
. (I know why the extra space exists when using inline-block). I have read several docs about FlexBox, but the doc doesn’t talk about the relationship between FlexBox andinline-block
source to share
Flex layout based on block layout . Spaces are ignored in both layout modes.
But in inline layout, the spaces between inline blocks are significant as white space is considered part of the inline content . As in my answer to your previous question , it looks like a two-word phrase separated by a space - the space between the two inline blocks behaves exactly the same as the space itself. 1
Flex layout and inline boxes have absolutely no relationship and are incompatible with each other. When you declare display: flex
in a container, its children become flex items that can never appear inline (they can contain their own inline content, however).
1This is why I argue that trying to remove the space between inline blocks really solves the wrong problem - you should never use inline-block
in the first place unless you understand well inline layout, and inline layout is what you want.
source to share