本文详细介绍了CSS3的弹性盒模型（Flexbox），包括`display: flex`、`flex-direction`、`flex-wrap`、`justify-content`、`align-items`、`align-content`等属性的用法，通过这些属性可以实现子元素水平占满父元素的效果，以及各种灵活的布局方式。特别强调了`stretch`值在垂直居中和填充高度方面的作用。
flex-direction：
flex-wrap：
justify-content:
align-items：
align-content：
display：flex；
可以填入两个值： inline-flex、flex(flex用到的比较多)
给父级设置display：flex；这个父级就变成了一个具备弹性功能的盒子区域，在这个区域里面我们就可以使用它的功能，父子级相互配合使用。
flex-direction：
flex还有两条轴，一个是主轴(X轴)还有交叉轴(Y轴)
可以填入4个值：row | row-reverse | column | column-reverse
row：默认方向，即主轴由左往右
row-reverse：对齐方式与row相反。
column：即纵向主轴从上往下排列(顶对齐)。
column-reverse：对齐方式与column相反。
flex-wrap
可填入3个值：nowrap | wrap | wrap-reverse
nowrap是默认
471
2113
536
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
最低0.47元/天 解锁文章
