# 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: <integer>;
}
- flex-grow 默认1
- 如果所有的项目都有弹性增长设置为1，在容器中的剩余空间将平等地分配给所有的孩子。如果其中一个孩子的价值为2，剩下的空间将占用的空间是其他人的两倍（或至少会尝试）。
.item {
flex-grow: <number>; /* default 0 */
}
flex-shrink默认1
缩放量化,负数无效
.item {
flex-shrink: <number>; /* 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: <length> | 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/
