flex布局怎么设置子元素大小_自学整理 CSS Flex 布局

引言

最近记性特别不好，居然忘记 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 布局教程》