玩转 flex 模式结合实践总结 flex 模式

图解Flex布局.内容分为两部分.

学习Flex布局

　什么是弹性布局?

弹性盒子(Flexible Box 或 Flexbox)背后的主要思想是让容器能够更改其项目(flex-item)的宽度/高度（和顺序），以最大限度地填充可用空间（主要适用于各种显示设备和屏幕尺寸）。

注意点

多栏布局模块的 column-* 属性对弹性项目无效。
float 与 clear 对弹性项目无效。使用 float 将使元素的 display 属性计为block。
vertical-align 对弹性项目的对齐无效

弹性布局的基本概念

container

弹性容器: 包含着弹性项目的父元素。通过设置 display 属性的值为 flex 或 inline-flex 来定义弹性容器。

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

flex-direction

flex-direction: 决定了主轴的方向,也就是项目的排列的方向.

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
- row（默认值）：主轴为水平方向，从左到右。
- row-reverse：主轴为水平方向，从右到左。
- column：主轴为垂直方向，从上到下。
- column-reverse：主轴为垂直方向，从下到上。

flex-wrap

flex-wrap: 弹性项目可以排布在单个行或者多个行中。此属性控制侧轴的方向和新行排列的方向。

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
- nowrap(默认值): 所有的flex项目将在一行 
- wrap: 换行,flex项目将按照从上到下开始一个新行
- wrap-reverse: 换行,flex项目将按照从下往上开始一个新行

flex-flow

flex-flow:　是 flex-direction 和 flex-wrap 属性的简写，决定弹性项目如何排布．

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

justify-content

justify-content:　定义了项目在主轴上的对齐方式．

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
- flex-start(默认值): 从项目左边开始对齐
- flex-end: 从项目右边开始对齐
- center: 项目居中对齐
- space-between: 两端对齐，项目之间的间隔都相等
- space-around: 均匀排列每个元素,每个元素周围分配相同的空间

align-items

align-items: 定义项目在交叉轴上如何对齐.

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
- flex-start: 元素向侧轴起点对齐
- flex-end: 元素向侧轴终点对齐。
- center: 元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同.
- baseline: 项目的第一行文字的基线对齐。
- stretch(默认值): 如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content

align-content:定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用．

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
- flex-start：与交叉轴的起点对齐。
- flex-end：与交叉轴的终点对齐。
- center：与交叉轴的中点对齐。
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch（默认值）：轴线占满整个交叉轴

items

弹性项目(Flex item): 弹性容器的每个子元素都称为弹性项目。弹性容器直接包含的文本将被包覆成匿名弹性单元.

order

order: 属性将元素与序号关联起来，以此决定哪些元素先出现.越小先考前(上).

.item {
  order: <integer>;
}

flex-grow

flex-grow: 把各个项目的flex-grow/总flex-grow来进行分配空间。

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

flex-shrink

flex-shrink：属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

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

flex-basis

flex-basis: 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

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

flex

flex: 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写，描述弹性项目的整体的伸缩性。

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

align-self

align-self: 定义了单个弹性项目在侧轴上应当如何对齐，这个定义会覆盖由 align-items 所确立的默认值。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
- auto:设置为父元素的 align-items 值，如果该元素没有父元素的话，就设置为 stretch
- flex-start: flex 元素会对齐到 cross-axis 的首端
- flex-end: flex 元素会对齐到 cross-axis 的尾端。
- center: flex 元素会对齐到 cross-axis 的中间，如果该元素的 cross-size 的尺寸大于 flex 容器，将在两个方向均等溢出。
- baseline: 所有的 flex 元素会沿着基线对齐
- stretch: flex 元素将会基于容器的宽和高，按照自身 margin box 的 cross-size 拉伸.