本文总结了Flexbox布局的使用，包括`display: flex`、`flex-direction`、`justify-content`和`align-items`等属性。还回顾了传统的浮动布局、百分比宽度布局、定位布局以及圣杯布局和双飞翼布局。最后提到了媒体查询、Grid布局以及布局中常见的问题和解决方案。
Flexbox display: flex;
如果也想设置内联元素为弹性盒子，可以使用display:inline-flex;
实现三种其他布局难以达到的效果：
在父内容里面垂直居中一个块内容。
使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用。
使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。
flex盒子属性(只对flex container弹性盒子起作用)
属性
值
备注
flex-direction
row(默认)/column
用来指定主轴方向
flex-wrap
wrap/wrap-reverse
自动换行，防止内容溢出
justify-content
flex-start(默认)/flex-end/center/space-around(均匀分布)/space-between(不会在两端留下任何空间)
控制子项在主轴上的位置
align-items
stretch(默认)/center/flex-start/flex-end
控制子项在交叉轴上的位置，align-self可以覆盖align-itemsflex-flow：flex-direction和flex-wrap的缩写。
弹性盒子的子元素上可以应用flex属性，实现每个元素的动态尺寸，并可以自由处理剩余空间。
弹性盒子的子元素上可以应用order属性进行子项的任意排序。
兼容性(只支持IE11)
布局方案汇总
以前只有fl
最低0.47元/天 解锁文章
扫一扫
1428
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
