Flex 布局学习与总结

[sweeetcc]

---

相关属性

一、 弹性元素属性

1. 占地面积相关：

flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写。

属性	初始值	作用	备注
flex-grow	0	元素宽度之和不足容器宽度时，元素放大的比例	负值无效
flex-shrink	1	元素宽度之和不足容器宽度时，元素缩小的比例	负值无效
flex-basis	auto	元素的初始宽度，若元素宽度之和超过容器宽度时，元素按照flex-basis的比例缩放	若为0，必须带单位

none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

flex: none;

同：

flex: 0 0 auto;

/* 单个值，不带单位，指的是 flex-grow */
flex: 1;

/* 单个值，带单位，指的是 flex-basis */
flex: 200px;

/* 两个值： flex-grow | flex-basis */
flex: 1 30px;

/* 两个值：flex-grow | flex-shrink */
flex: 1 1;

/* 三个值：flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

2. 其他属性：

属性	作用	类别
order	元素在容器中的排列顺序	排列
align-self	元素在容器中的对齐方式，针对单个	对齐

---

二、弹性容器属性

1. 排列相关：

属性	作用	类别
flex-direction	元素在容器中的排列方向	排列
flex-wrap	元素在容器中的换行效果	排列
flex-flow	前两者的复合属性	排列

2. 对齐相关：

属性	作用	类别
justify-content	元素在容器中的水平对齐	对齐
align-items	元素在容器中的垂直对齐	对齐
align-content	元素为多行时在容器中的整体垂直对齐	对齐

示例：

一、父元素属性

1. flex-direction:

flex-direction: row | row-reverse | column | column-reverse;

2. flex-wrap:

3. flex-flow:

flex-flow: <'flex-direction'> || <'flex-wrap'>;

4. justify-content:

justify-content: flex-start | flex-end | center | space-between | space-around;

5. align-items:

align-items: flex-start | flex-end | center | baseline | stretch;

6. align-content:

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

二、 子元素属性：

1. order:

2. flex-grow:

3. flex-shrink:

4. align-self:

[sweeetcc]

说是总结，就是把所有属性都过了一遍，写 react native 感受颇深，需要用到 flex 的地方有时候概念并不清楚，好啦~ 现在清楚啦，以后多温习~