Flex Layout

# Flex Layout

#### Flex Parent ****父属性布局

• 创建一个Container,使用Flex.

.container {
  display: flex; /* or inline-flex */
}

• 定义Flex方向
• row : 在ltr从左到右,rtl反之. rtl ltr 是文本方向定义,rtl right to left .
• row-reverse : 与row 相反.
• column : 从上往下.
• column-reverse : 从下往上.

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

• 定义换行属性 flex-wrap
• 默认Flex布局只有一行.
• nowrap : 只有一行
• wrap : 多行,ltr方向从左到右,rtl反之.
• wrap-reverse : 多行效果与wrap 相反.

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• flex-flow 结合flex-direction与flex-wrap 同时设置.

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

• justify-content 根据中轴线定义布局的排列对齐方式.
• flex-start : 默认选项,顶部对齐
• flex-end : 底部对齐
• center : 上下居中
• space-between : 项目是均匀分布在生产线；第一个项目是在开始线，最后一个项目的终点线.
• space-around: 均匀分布周围.

• align-items

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

• align-content
• 设置只有一行时无效.

#### Flex Children ****子视图属性

• order 控制子视图显示顺序

.item {
  order: ;
}

• flex-grow 默认1
• 如果所有的项目都有弹性增长设置为1，在容器中的剩余空间将平等地分配给所有的孩子。如果其中一个孩子的价值为2，剩下的空间将占用的空间是其他人的两倍（或至少会尝试）。

.item {
  flex-grow: ; /* default 0 */
}

• flex-shrink默认1

• 缩放量化,负数无效

.item {
  flex-shrink: ; /* default 1 */
}

• flex-basis

• 这定义了在剩余的空间分布之前的元素的默认大小。它可以是一个长度（如20%、5rem，等）或关键字。自动关键词就是“看我的宽度或高度的财产”（这是暂时由主要尺寸关键词直到弃用）。内容关键字的意思是“基于项目内容的大小”这个关键词还没有得到很好的支持，所以很难测试和更难知道它的兄弟会的内容，最小的内容，和适合的内容。

• If set to 0, the extra space around content isn't factored in. If set to auto, the extra space is distributed based on its flex-grow value. See this graphic.

.item {
  flex-basis:  | auto; /* default auto */
}

• flex flex-grow, flex-shrink and flex-basis 统一设置
• 第二第三个参数可选(flex-shrink and flex-basis) 默认0 1 auto

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

• align-self
• 对齐方式的单个属性,可以覆盖父属性的****align-items**** ,对齐方式与****align-items****相同.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

### ****引用原文**** ****https://css-tricks.com/snippets/css/a-guide-to-flexbox/