引言
最近记性特别不好,居然忘记 Flex 布局子项居中怎么写了,于是又看了一遍阮一峰老师的《Flex 布局教程》,为了能够加深记忆,边做记录边练习,因此整理本文作为自学笔记。
本文来源:阮一峰老师的《Flex 布局教程》
Flex 布局又称 "弹性布局" 。任何一个容器都可以指定为 Flex 布局。
采用 Flex 布局的外层元素叫做 “容器” ,子元素叫做 “项”。
容器必须设置下面的代码,才能采用 Flex 布局。
display: flex | inline-flex
inline-flex 代表容器是个行内元素。
容器有两根轴:水平的主轴和垂直的交叉轴。
容器属性
flex-direction
项的排列方向。
.container { flex-direction: row | row-reverse | column | column-reverse;}
row :默认,水平方向排列,方向起点在左侧。
row-reverse :水平方向逆向排列,方向起点在右侧。
column :垂直方向排列,方向起点在顶端。
column-reverse :垂直方向排列,方向起点在底端。
flex-wrap
项会自动排列在一个方向上,不会换行。如果换行显示,就需要 flex-wrap 属性。
.container { flex-wrap: nowrap | wrap | wrap-reverse;}
wrap :默认,不换行。
wrap:换行,第一行在上面。
wrap-reverse :换行,第一行下下面。
flex-flow
flex-direction 属性和 flex-wrap 属性的简写,默认值为 row nowrap 。
.container { flex-flow: | ;}
justify-content
项 (水平) 对齐的方式。根据 flex-direction设置的方向决定水平或垂直对齐。
.container { justify-content: flex-start | flex-end | center | space-between | space-around;}
flex-start :默认,项左对齐。
flex-end :项右对齐。
center :项居中对齐。
space-between :项两端对齐,项之间的间隔相等。
space-around :项两侧间隔相等,所以第 1 项和第 2 项与边框的距离要比项之间的距离小 1 倍。
align-items
项 (垂直) 对齐的方式。根据 flex-direction设置的方向决定水平或垂直对齐。
.container { align-items: stretch | flex-start | flex-end | center | baseline;}
stretch :默认,如果项没有设置高度或者高度为 auto ,则占满整个容器的高度。
flex-start :顶端对齐。
flex-end :底端对齐。
center :居中对齐。
baseline :baseline :第一行文字的底端 (基线) 对齐。可以设置项的 line-height 看效果。
align-content
align-content 属性定义如何使用垂直的剩余空间,也就是说如果项只占用一行,这个属性不发挥作用,如果项换行了,则可以设置剩余垂直空间的对齐方式。根据 flex-direction设置的方向决定水平或垂直对齐。
.container { align-content: stretch | flex-start | flex-end | center | space-between | space-around;}
stretch :默认,占满这个垂直高度。
flex-start :顶端对齐。
flex-end :底端对齐。
center :居中对齐。
space-between :两端对齐,间隔平均分布。
space-around :项两侧的间隔都相等。所以,边框和项的距离比项与项之间的距离小 1 倍。
项属性
order
定义项的顺序。数值越小,越靠前,默认为 0 。
.item { order: ;}
例如:
.item-1 { order: 6;}
flex-grow
.item { flex-grow: ; /* 默认 0 */}
定义项的放大比例,默认为 0 ,不放大。
所有项的 flex-grow 属性都为 1 时,如果还有剩余空间,则它们将等分剩余空间。相当于 “份” 的概念。
flex-shrink
项的缩小比例。项仅在默认宽度之和大于容器的时候才会发生缩小,也就是说在容器宽度不够的时候,才缩小,其缩小的比例是依据 flex-shrink 的值进行设置。默认值为 1 。
容器空间不足时,项将等比缩放,如果一个项的 flex-shrink 属性为 0,为 0 的项不缩放。
.item { flex-shrink: ; /* default 1 */}
2、3 项的 flex-shrink 属性为 0。
flex-basis
定义了项占据容器空间的初始大小。默认为 auto ,即项的本来大小,浏览器会根据这个属性,计算容器是否有多余空间。
当设置了项的 width 或 height 时,flex-basis 优先级更高。
.item { flex-basis: | auto; /* 默认 auto */}
例如,给第 2 项同时设置了 width 和 flex-basis ,那么在分配剩余空间前先计算出第 2 项的尺寸,然后再分配剩余空间,同时第 2 项的宽度为 flex-basis 设置的值,因为它的优先级高。
.item-2 { width: 100px; flex-basis: 300px;}
align-self
设置单个项的对齐方式,可覆盖容器的 align-items 属性。默认值为 auto,表示继承父元素的 align-items 属性,如果父元素没有 align-items 属性,则等同于 stretch 。根据容器的 flex-direction设置的方向决定水平或垂直对齐。
.item { align-self: stretch | auto | flex-start | flex-end | center | baseline;}
stretch :如果项没有设置高度或者高度为 auto,且没有父元素的 align-items 属性 ,则占满整个容器的高度。
auto :继承父元素的 align-items 属性,如果父元素没有 align-items 属性,则等同于 stretch 。
flex-start :顶端对齐。
flex-end :底端对齐。
center :居中对齐。
baseline :第一行文字的底端 (基线) 对齐。可以设置 line-height 看效果。
flex
flex-grow , flex-shrink 、flex-basis 的简写,默认值为 0 1 auto 。后两个属性可选。
.item { flex: none | auto | [ || ]}
none :为 0 0 auto 。
auto :就是默认值 1 1 auto 。
flex:1; 代表按照容器减去其它项后的尺寸,然后该容器填满这个尺寸。相当于 flex-grow: 1; 。
总结
水平位置和垂直位置对齐要根据容器的 flex-direction设置。
本文非原创,根据阮一峰老师《Flex 布局教程》自学整理。对于我个人不好理解的词句,多读了几遍,用我个人理解的意思表达,但整体思路和顺序,依然遵循阮一峰老师的文章。
最近记性特别不好,居然忘记 Flex 布局子项居中怎么写了,于是又看了一遍阮一峰老师的《Flex 布局教程》,为了能够加深记忆,边做记录边练习,因此整理本文作为自学笔记。
本文来源:阮一峰老师的《Flex 布局教程》