Flex是Flexible Box的缩写,意为”弹性布局”,是一种一维布局,一次只能处理一个维度上的元素,一行或一列,适合用做局部处理,比如移动端导航栏。可以通过display: flex设置。
设置了display: flex属性的元素称为“flex容器”,其存在两根轴,水平方向上的主轴和垂直方向上的交叉轴(默认状态下,可以通过flex-direction修改)
![](https://i-blog.csdnimg.cn/blog_migrate/07885e0011a6062d0f6c5f75e7f122bf.png)
flex容器内的元素默认沿主轴的方向排列。
flex容器的属性
属性 | 功能 |
flex-direction | 决定主轴的方向 |
flex-wrap | 默认情况下,容器内成员都排在一条轴线上。flex-wrap属性定义,如果一条轴线排不下,如何换行 |
flex-flow | flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap |
justify-content | 容器内成员在主轴上的对齐方式 |
align-items | 容器内成员在交叉轴上的对齐方式 |
align-content | 与align-items类似,但是是换行情况下的排列 |
flex-direction
flex-direction: row | row-reverse | column | column-reverse;
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。
![](https://i-blog.csdnimg.cn/blog_migrate/1fb9c84687f18b94c65721e18f1c9ab6.png)
从上到下分别是row | row-reverse | column | column-reverse
flex-wrap
flex-wrap: nowrap | wrap | wrap-reverse;
nowrap(默认):不换行。
wrap:换行,第一行在上方。
wrap-reverse:换行,第一行在下方。
![](https://i-blog.csdnimg.cn/blog_migrate/b2ffda3b8f7e4941b940477b1edf3ebe.png)
从上到下分别是nowrap | wrap | wrap-reverse
flex-flow
flex-flow: <flex-direction> <flex-wrap>;
justify-content
justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start(默认值):左对齐
flex-end:右对齐
center: 居中
space-between:两端对齐,容器内成员之间的间隔都相等。
space-around:每个成员两侧的间隔相等。所以,成员之间的间隔比成员与边框的间隔大一倍。
![](https://i-blog.csdnimg.cn/blog_migrate/0901b394bfb2663ab72a1b2eb2011fd3.png)
从上到下分别是 flex-start | flex-end | center | space-between | space-around
align-items
align-items: flex-start | flex-end | center | baseline | stretch;
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。:
baseline: 成员的第一行文字的基线对齐。
stretch(默认值):如果成员未设置高度或设为auto,将占满整个容器的高度。
![](https://i-blog.csdnimg.cn/blog_migrate/897b532b2a0a7df14a2db14e7b8d2e6b.png)
上述的所有成员均未设置高度,且每个成员的文字大小都不一样
从上到下分别是 flex-start | flex-end | center | baseline | stretch,对于baseline,以成员的第一行文字的基线对齐
![](https://i-blog.csdnimg.cn/blog_migrate/651f1943f819dfcd05dc79e20191563f.png)
align-content
align-content属性与align-items属性类似,区别是align-items作用于flex容器中成员不换行的情况(flex-wrap: nowrap),而align-content则是作用于flex容器中成员换行的情况(flex-wrap: nowrap下无效)。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。
![](https://i-blog.csdnimg.cn/blog_migrate/80a743561ec9e445c3ff95c6a47d8458.png)
从上到下分别是 flex-start | flex-end | center | space-between | space-around | stretch
flex容器内成员的属性
属性 | 功能 |
order | 定义成员的排列顺序。数值越小,排列越靠前,默认为0 |
flex-grow | 定义成员的放大比例,默认为0,即如果存在剩余空间,也不放大 |
flex-shrink | 定义了成员的缩小比例,默认为1,即如果空间不足,该成员将缩小 |
flex-basis | 规定弹性成员的初始长度。它的默认值为auto,即成员的本来大小。 |
flex | flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。 |
align-self | 允许单个成员有与其他成员不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。 |
order
order: <integer>;
![](https://i-blog.csdnimg.cn/blog_migrate/e7fba627ddc09b5d24cc9bdf63cb1d57.png)
<view class="css a">1</view> <!-- order: 5-->
<view class="css b">2</view> <!-- order: 4-->
<view class="css c">3</view> <!-- order: 3-->
<view class="css d">4</view> <!-- order: 2-->
<view class="css e">5</view> <!-- order: 1-->
flex-grow
flex-grow: <number>;
![](https://i-blog.csdnimg.cn/blog_migrate/e70ea586389b167a2bb41af22532fa1b.png)
<view class="css a">1</view> <!-- flex-grow: 1;-->
<view class="css b">2</view> <!-- flex-grow: 2;-->
<view class="css c">3</view> <!-- flex-grow: 3;-->
<view class="css d">4</view> <!-- flex-grow: 4;-->
<view class="css e">5</view> <!-- flex-grow: 5;-->
flex-grow越大所占空间越多,如果相等,则平分剩余空间(如果剩余空间有的话)
flex-shrink
flex-shrink: <number>;
![](https://i-blog.csdnimg.cn/blog_migrate/4290f0d10646305618b19f784e0196dd.png)
<view class="css a">1</view> <!-- flex-shrink:1;-->
<view class="css b">2</view> <!-- flex-shrink:0;-->
<view class="css c">3</view> <!-- flex-shrink:1;-->
<view class="css d">4</view> <!-- flex-shrink:0;-->
<view class="css e">5</view> <!-- flex-shrink:5;-->
设置了每个成员宽度为25%,空间必定不足,当空间不足时,flex-shrink:0不缩小。除0外,数值越大,缩小程度越明显。
flex-basis
flex-basis: <length> | auto;
![](https://i-blog.csdnimg.cn/blog_migrate/10f28de707cb49275bbff91e179b2e3c.png)
<view class="css a">1</view> <!-- flex-basis:auto;-->
<view class="css b">2</view> <!-- flex-basis: 100px;-->
<view class="css c">3</view> <!-- flex-basis: 50px;-->
初始给每个盒子宽度设为25%,盒子1宽度即为25%,盒子2、3宽度分别为100px,50px。flex-basis优先级大于width(或者在 flex-direction: column 情况下设置了height,flex-basis优先级大于height)
flex
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)
align-self
align-self: auto | flex-start | flex-end | center | baseline | stretch;
比align-items多一个auto,为默认值,表示继承父元素的align-items属性,其它属性与align-items属性含义一样
![](https://i-blog.csdnimg.cn/blog_migrate/b5e6b93108ebc11aba87d8f8d4a02592.png)
<view class="css a">1</view> <!-- align-self: auto;-->
<view class="css b">2</view> <!-- align-self: flex-start;-->
<view class="css c">3</view> <!-- align-self: flex-end;-->
<view class="css d">4</view> <!-- align-self: center;-->
<view class="css e">5</view> <!-- align-self: baseline;-->
<view class="css f">6</view> <!-- align-self: stretch;-->
以上的盒子都未设置高度,它们的父元素的align-items:stretch