Flex 布局的基本概念
Flex,Flexible Box 的缩写, 意为弹性布局. 任何容器都可指定为 Flex 布局.
- .box{
- display: flex;
- }
行内元素也可使用 Flex 布局.
- .box{
- display: inline-flex;
- }
webkit 内核浏览器 (Chrome,Safari) 需要加上前缀. 设为 Flex 布局后子元素的 float,clear,vertical-align 属性将失效. 采用 Flex 布局的元素称为 flex container, 建成容器, 其所有子元素自动成为容器成员, 成为 flex item, 简称项目.
容器存在主轴与交叉轴. 项目默认沿主轴排列.
容器的属性
flex-direction
决定主轴的方向即项目的排列方向. 4 个值: row: 从左往右(默认) row-reverse: 从右往左 column: 从上往下 column-reverse: 从下往上
flex-wrap
规定换行方式. 3 个值: nowrap: 不换行(默认) wrap: 换行 wrap-reverse: 换行, 但第一行在下方, 如下图:
flex-flow
上述 flex-derection 和 flex-wrap 的简写, 默认值 row nowrap.
justify-content
定义项目在主轴上的对齐方式.
space-around: 每个项目两侧的间隔相等. 所以, 项目之间的间隔比项目与边框的间隔大一倍.
align-items
定义项目在交叉轴的对齐方式.
baseline: 项目的第一行文字的基线对齐. stretch: 如果项目未设置高度或设为 auto, 将占满整个容器的高度.(默认)
align-content
定义多根轴线的对齐方式. 如果项目只有一根轴线则该属性不起作用.
space-between: 与交叉轴两端对齐, 轴线之间的间隔平均分布. space-around: 每根轴线两侧的间隔都相等. 所以, 轴线之间的间隔比轴线与边框的间隔大一倍. stretch: 轴线占满整个交叉轴.(默认)
项目的属性
order:
定义项目的排列顺序. 数值越小, 排列越靠前, 默认为 0.
- .item{
- order: <integer>;
- }
flex-grow
定义项目的放大比例, 默认为 0, 即如果存在剩余空间, 也不放大.
如果所有项目的 flex-grow 属性都为 1, 则它们将等分剩余空间(如果有的话). 如果一个项目的 flex-grow 属性为 2, 其他项目都为 1, 则前者占据的剩余空间将比其他项多一倍.
flex-shrink
属性定义了项目的缩小比例, 默认为 1, 即如果空间不足, 该项目将缩小.
如果所有项目的 flex-shrink 属性都为 1, 当空间不足时, 都将等比例缩小. 如果一个项目的 flex-shrink 属性为 0, 其他项目都为 1, 则空间不足时, 前者不缩小.
负值对该属性无效.
flex-basis
定义了在分配多余空间之前, 项目占据的主轴空间(main size). 浏览器根据这个属性, 计算主轴是否有多余空间. 它的默认值为 auto, 即项目的本来大小. 它可以设为跟 width 或 height 属性一样的值(比如 350px), 则项目将占据固定空间.
- .item{
- flex-basis: <length> | auto;
- }
flex
是 flex-grow, flex-shrink 和 flex-basis 的简写, 默认值为 0 1 auto. 后两个属性可选.
align-self
align-self 属性允许单个项目有与其他项目不一样的对齐方式, 可覆盖 align-items 属性. 默认值为 auto, 表示继承父元素的 align-items 属性, 如果没有父元素, 则等同于 stretch.
来源: https://juejin.im/post/5c0731e951882516da0e373d