Vin*_*hua 12 html css css3 flexbox twitter-bootstrap
由于新的Bootstrap 4正在从使用" 浮动 "元素迁移到更好的" flexbox "方法,只是想知道使用.d-flex而不是现有.container .row .col方法构建整个网格结构是否可行？
由于它们都是使用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是从前一个状态推动和拉开的网格数量.当你构建一个更复杂的网站时,它会变得混乱....
如果我错了,请纠正我.
Bootstrap 4 beta刚刚问世,整个网格系统从现在开始使用flexbox.
您现在可以只使用flex实现整个网格,并且减少了所需的类数.Bootstrap网格系统的主要优点是您的列周围有填充,而.row包装器上有负边距.这样,当列包裹时(例如在较小的屏幕上),它们将保持正确对齐.
回答你的3点:
水平和垂直元素
只需使用常规.row类即可实现flexbox网格.您甚至可以添加.flex-column(即使有断点,像.flex-{breakpoint}-column).知道.row班级flex-wrap: wrap有财产.
内联元素
列宽不一定是固定的:
.col-auto用来设置width: auto列.col类使列使用可用空间.col-md-auto后面跟着.col.col-lg-2提前重新订购
.col-push/pull-{breakpoint} 已被取代.order-{breakpoint}.m-{breakpoint}-auto)进行替换.col-offset-{breakpoint}