Css flexbox

[TOC]

css flexbox 由外层 container 和内部的 item 组成。

contaienr property

display

display 定义在 container(parent) 元素上。有如下两种属性：

flex
inline-flex

display-direction

item 的排列方向。

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

上面属性对应的是:

row(default): 从左到右, rtl 时反向
row-reverse: 右到左, rtl 时反向
column: 上到下, rtl 时反向
column-reverse: 下到上, rtl 时反向

flex-wrap

定义 item 是否换行。

nowrap (default): all flex items will be on one line
wrap: flex items will wrap onto multiple lines, from top to bottom.
wrap-reverse: flex items will wrap onto multiple lines from bottom to top.

flex-flow

flex-direction 和 flex-wrap 的缩写 property

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

justify-content

定义 items 在主轴的排列方式。此属性最重要的作用是当 items 不全是 flex 元素或者全是 flex 元素但是超出了一列的最大宽度时进行分配多余的空白空间。

flex-start (default): items are packed toward the start line

flex-end: items are packed toward to end line

center: items are centered along the line

space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line ----- 第一个 item 贴着起始边(start line)，最后一个 item 贴着结束边(end line)。其余 items 的空白区域平均分配。

space-around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren't equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies. --- 所有 item 含有相同的外边距，相邻的外边距不会合并。

space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal. --- 包括起始边和结束边到 item 的间距和所有间隔 item 的间距全部相等。

align-items

定义 flex items 在交叉轴(cross axis)上的排列方式。可以把 align-items 看作是 justify-content 的交叉轴版本。

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

flex-start: cross-start margin edge of the items is placed on the cross-start line

flex-end: cross-end margin edge of the items is placed on the cross-end line

center: items are centered in the cross-axis

baseline: items are aligned such as their baselines align

stretch (default): stretch to fill the container (still respect min-width/max-width)

align-content

此属性和 justify-content 很像，不同的是 align-cotent 是将多列 items 看作一个 item-container，并且在交叉轴上分配空白区域。

需要注意的是，如果 items 只有一列的话此属性没有任何效果的。(?????待理解)

flex-start: lines packed to the start of the container

flex-end: lines packed to the end of the container

center: lines packed to the center of the container

space-between: lines evenly distributed; the first line is at the start of the container while the last one is at the end

space-around: lines evenly distributed with equal space around each line

stretch (default): lines stretch to take up the remaining space --- ？？？？有疑问

flex item propery

Note that float, clear and vertical-align have no effect on a flex item!!!!

order

item 排列的顺序。

.item {
  order: <integer>; /* default is 0 */
}

flex-grow

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

规定特定的 flex-item 会被分配到的比例，数值越大分配的比例越大。负数是非法单位。

如果所有 flex-item 都被设置为 flex-grow:1 则所有的 item 会被分配到同样的空间，如果其中有一个是 2，则 2 的那个 item 会被分配到双倍的空间，其余 item 平分剩下的空间。

flex-shrink

类似 flex-grow，不过作用在当超出最大宽度时对应 item 收缩的比例。

同样，负数是非法单位。

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

flex-basis

定义分配空间之前的 flex-item 的默认大小。可以是长度单位或者一个关键字。

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

当此值是 0 的时候，所有的空间会按照 flex-grow 分配。如果设置为 auto，所有 item 的初始大小是基于其内容来决定的，剩余空间会按照 flex-grow 分配。

flex

是 flex-grow flex-shrink flex-basis 的缩写。默认值是 1 0 auto。

建议是使用缩写的 flex 属性代替为每一个属性单独设值，就好像用 margin 代替 margin-<direction> 一样。

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

align-self

此属性作为单个 flex-item 在交叉轴上的排列方式，当设置了会复写在 flex-container 上定义了的 align-items 属性。

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