【读】理解弹性盒：必知必会

弹性容器（Flex Container） : 设置 display: flex 的父元素。

---

弹性容器的属性

** Flex-direction || Flex-wrap || Flex-flow || Justify-content || Align-items || Align-content **

Flex-direction

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

Flex-wrap

flex-wrap: wrap || no-wrap || wrap-reverse

Flex-flow

flex-direction 和 Flex-wrap的简写属性

Justify-content

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

Align-items

flex-start || flex-end || center || stretch || baseline

Align-content

flex-start || flex-end || center || stretch

---

弹性项目（Flex Item） : 弹性容器内的子元素。

弹性项目的属性

** Order || Flex-grow || Flex-shrink || Flex-basis **

Order

数字值，默认为0

flex-grow 和 flex-shrink

默认情况下，flex-grow 属性被设置为 0，shrink 属性被为值为 1

Flex-basis

默认值是 flex-basis: auto

flex 简写

一次就设置好 flex-grow、flex-shrink 和 flex-basis 属性

如果只设置了 flex-grow 和 flex-shrink 值，flex-basis 会被默认设置为零。这被称为绝对弹性。

如果只设置 flex-basis，就得到一个相对弹性

(1) flex: 0 1 auto
(2) Flex: 0 0 auto
(3) Flex: 1 1 auto
(4) Flex: "正数"

Align-self

auto || flex-start || flex-end || center || baseline || stretch

原文