使用flexbox相比display:inline、float布局的核心优势有哪些？

仅给父容器设置display: flex（不使用任何flex高阶属性），相比给子元素统一设置display: inline的方案，核心优势可以归纳为4点：

• 自动消除子元素间的空白间隙：inline元素会因为HTML代码中的换行、空格产生默认的4px左右间隙，要解决这个问题需要手动删除代码里的空格、或是给父元素设置font-size: 0再单独给子元素重置字号，属于典型的无意义hack；flex布局默认没有这类问题，不需要额外处理。
• 默认实现子元素等高对齐：inline元素默认按文本基线对齐，子元素高度不同时会出现上下错位，手动调整vertical-align也无法实现所有子元素自动和最高元素等高；flex布局默认开启align-items: stretch，所有子元素高度会自动匹配最高子元素的高度，无需额外代码。
• 子元素盒模型属性完全生效：inline元素设置width、height、上下margin、上下padding均不会生效，只能靠内容撑开尺寸，如果要自定义尺寸必须改成inline-block，但依然会有空白间隙问题；flex子元素默认支持所有盒模型属性，宽高、内外边距设置都能正常生效。
• 完全规避浮动塌陷问题：如果使用float布局，父容器未设置固定高度时会出现高度塌陷，需要额外写clearfix规则清除浮动；flex布局完全没有这个问题，父容器高度会自动适配子元素总高度，不需要额外的清除逻辑。

多元素水平排列自适应占满容器的实现说明 #

这个效果可以通过inline或float方案实现，但需要大量额外hack，且限制很多：

用inline方案实现时，首先要把子元素的显示类型改为inline-block（纯inline无法设置宽度），再给父元素设置font-size: 0消除间隙，然后手动给每个子元素设置width: calc(100% / 元素数量)，同时要加box-sizing: border-box避免边框、内边距撑宽元素；如果子元素数量是动态的，还需要配合JS动态计算宽度，适配成本极高。
用float方案实现时，同样需要手动计算每个子元素的宽度、设置box-sizing，还要额外添加clearfix规则解决父容器塌陷问题，且子元素高度不一致时会出现排版错位，无法自动等高。
而用flex基础能力实现，只需要给父容器加display: flex，再给所有子元素加flex: 1即可，不管子元素数量是否动态变化，都会自动等分占满容器，没有多余的hack逻辑。

基础flex能力的优越性总结 #

哪怕不使用direction、wrap、justify-content这类flex高阶属性，仅用最基础的flex配置，就能避免传统布局中至少3~4个需要额外hack的问题，代码量减少60%以上，也不需要处理各种边界兼容场景，可维护性远高于传统inline、float布局。

内容的提问来源于stack exchange，提问作者unlimited101