由于它们都是使用flexBox从根本上构建的,所以我看不出任何替换它们的缺点.事实上,我觉得.d-flex需要更少的css类名,并使html中的内容更具可读性.
还有其他原因我喜欢d-flex而不是旧col：
>水平和垂直元素 – d-flex支持水平(.flex-row)和垂直(.flex-column)创建元素. Col仅支持水平.
>内联元素 – 元素的宽度将继承自子元素,并且可以使用d-inline-flex动态对齐. col网格是固定的.
>提前重新排序 – d-flex使用.order-x和col使用.push和.pull.在我看来,d-flex更直观,元素的顺序通过编号表示,另一方面.col中的数字是从前一个状态推动和拉开的网格数量.当你构建一个更复杂的网站时,它会变得混乱….
如果我错了,请纠正我.
解决方法
您现在可以只使用flex实现整个网格,并且减少了所需的类数. Bootstrap网格系统的主要优点是你的列周围有填充,而.row包装上有负边距.这样,当列包裹时(例如在较小的屏幕上),它们将保持正确对齐.
回答你的3点：
>水平和垂直元素
只需使用常规.row类即可实现flexBox网格.您甚至可以添加.flex-column(even with breakpoints,如.flex- {breakpoint} -column).知道.row类有flex-wrap：wrap属性.
>内联元素
列宽不一定是固定的：
>您可以使用.col-auto在列上设置width：auto
>您可以使用the unit-less .col类使列使用可用空间
>您可以将它们与所有Flex实用程序Bootstrap provides对齐
>你可以mix column sizes(一些固定的和一些动态的)：例如.col-md-auto后跟.col.col-lg-2
>提前重新订购
> .col-push / pull- {breakpoint} has been replaced by .order-{breakpoint}.
>您可以使用margin utilities(例如m- {breakpoint} -auto)来替换.col-offset- {breakpoint}
