【css】常用样式flex相关

1 flex

设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间

1语法

/* 关键字值 */
flex: auto;
flex: initial;
flex: none;

/* 一个值，无单位数字：flex-grow */
flex: 2;

/* 一个值，width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: min-content;

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

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

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

/*全局属性值 */
flex: inherit;
flex: initial;
flex: unset;

可以使用一个，两个或三个值来指定 `flex`属性。

**单值语法**: 值必须为以下其中之一：

- 一个无单位**数 (**[**`<number>`**](https://developer.mozilla.org/zh-CN/docs/Web/CSS/number)**)**: 它会被当作`flex:<number> 1 0;` [`<flex-shrink>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-shrink)的值被假定为 1，然后[`<flex-basis>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-basis) 的值被假定为`0`。
- 一个有效的**宽度 ([`width`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/width))**值：它会被当作 `<flex-basis>的值。`
- 关键字[`none`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex#none)，[`auto`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex#auto)或`initial`.

**双值语法**: 第一个值必须为一个无单位数，并且它会被当作 [`<flex-grow>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-grow) 的值。第二个值必须为以下之一：

- 一个无单位数：它会被当作 [`<flex-shrink>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-shrink) 的值。
- 一个有效的宽度值：它会被当作 [`<flex-basis>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-basis) 的值。

**三值语法：**

- 第一个值必须为一个无单位数，并且它会被当作 [`<flex-grow>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-grow) 的值。
- 第二个值必须为一个无单位数，并且它会被当作 [`<flex-shrink>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-shrink) 的值。
- 第三个值必须为一个有效的宽度值，并且它会被当作 [`<flex-basis>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-basis) 的值

2 取值

`initial`

  元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器 。相当于将属性设置为"`flex: 0 1 auto`"。

`auto`

  元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为 "`flex: 1 1 auto`".

`none`

  元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为"`flex: 0 0 auto`"。

`<'flex-grow'>`

  定义 flex 项目的 [`flex-grow`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-grow) 。负值无效。省略时默认值为 1。 (初始值为 `0`)

`<'flex-shrink'>`

  定义 flex 元素的 [`flex-shrink`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-shrink) 。负值无效。省略时默认值为`1`。 (初始值为 `1`)

`<'flex-basis'>`

  定义 flex 元素的 [`flex-basis`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-basis) 属性。若值为`0`，则必须加上单位，以免被视作伸缩性。省略时默认值为 0。(初始值为 auto)

3 正式语法

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

2 flex-wrap

flex-wrap 属性指定 flex 元素单行显示还是多行显示。如果允许换行，这个属性允许你控制行的堆叠方向

flex-wrap: nowrap; /* Default value */
flex-wrap: wrap;
flex-wrap: wrap-reverse;

/* Global values */
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: revert;
flex-wrap: unset;

nowrap

flex 的元素被摆放到到一行，这可能导致 flex 容器溢出。**cross-start** 会根据 [`flex-direction`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-direction) 的值等价于 **start** 或 **before**。为该属性的默认值。

wrap

flex 元素 被打断到多个行中。**cross-start** 会根据 [`flex-direction`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-direction) 的值等价于 **start** 或**before**。**cross-end** 为确定的 **cross-start** 的另一端。

wrap-reverse

和 wrap 的行为一样，但是 **cross-start** 和 **cross-end** 互换

3 flex-direction

flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向 (正方向或反方向)

/* The direction text is laid out in a line */
flex-direction: row;

/* Like <row>, but reversed */
flex-direction: row-reverse;

/* The direction in which lines of text are stacked */
flex-direction: column;

/* Like <column>, but reversed */
flex-direction: column-reverse;

/* Global values */
flex-direction: inherit;
flex-direction: initial;
flex-direction: unset;

row

flex 容器的主轴被定义为与文本方向相同。主轴起点和主轴终点与内容方向相同。

row-reverse

表现和 row 相同，但是置换了主轴起点和主轴终点

column

flex 容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同

column-reverse

表现和`column`相同，但是置换了主轴起点和主轴终点

格式：flex-direction = row | row-reverse | column | column-reverse