Flexbox 弹性布局

[PolluxLee]

# display

创建 Flex 容器，inline 或 block 取决于 inline-flex 和 flex，为所有直接子元素创建 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：主轴 为垂直方向，起点在下沿

# justify-content

justify-content 属性定义了项目在主轴（main axis）上的对齐方式

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

• flex-start (默认值)：左对齐
• flex-end：右对齐
• center：居中
• space-between：两端对齐，项目之间间隔相等
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
• space-evenly：项目与项目之间，项目与边之间，所有间隔都相等

# align-content

与 justify-content 对齐每个 item 的方式类似，align-content 用于对齐交叉轴上的每一行，当 flexbox 只有一行的时候，这个属性不会产生任何效果

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

• 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

# align-items

align-items 属性定义项目在交叉轴（cross-axis）上如何对齐

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

• flex-start：交叉轴的起点对齐
• flex-end：交叉轴的终点对齐
• center：交叉轴的中点对齐
• baseline: 项目的第一行文字的基线对齐
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

# order

属性定义项目的排列顺序。数值越小，排列越靠前，默认为0

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

# flex-flow (Applies to: parent flex container element)

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

# align-self

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch

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

# flex

CSS 属性 flex 规定了弹性元素如何伸长或缩短以适应 flex 容器中的可用空间。这是一个简写属性，可以同时设置 flex-grow, flex-shrink 与 flex-basis
此属性设置在每一个 item 中

flex-grow

设置或检索弹性盒的扩展比率，0 值表示不拉伸，大于 0 的值表示根据剩余空间和比例，决定应该给项目增加多大的空间

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

flex-shrink

设置或检索弹性盒的收缩比率，0 值表示不收缩，大于 0 的值表示根据收缩空间和比例，决定应该给项目压缩多大的空间

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

flex-basis

设置或检索弹性盒伸缩基准值

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

flex-basis 规定的是子元素的基准值。所以是否溢出的计算与此属性息息相关。flex-basis 规定的范围取决于 box-sizing。这里主要讨论以下 flex-basis 的取值情况：

• 当 item 基准值取 0% 的时候，是把该项目视为零尺寸的，项目设置的宽度不生效

• auto：首先检索该子元素的主尺寸，如果主尺寸不为 auto，则使用值采取主尺寸之值；如果也是 auto，则使用值为 content

• 百分比：根据其包含块（即伸缩父容器）的主尺寸计算。如果包含块的主尺寸未定义（即父容器的主尺寸取决于子元素），则计算结果和设为 auto 一样

默认状态下，伸缩项目不会收缩至比其最小内容尺寸（最长的英文词或是固定尺寸元素的长度）更小。网页作者可以靠设置「min-width」或「min-height」属性来改变这个默认状态

单值语法

• 一个无单位数(): 它会被当作的值
• 一个有效的宽度(width)值: 它会被当作 的值
• 关键字 none, auto,或 initial

值	等价于	描述
auto	flex: 1 1 auto	元素会根据自身的宽度与高度来确定尺寸，但是会自行伸长以吸收flex容器中额外的自由空间，也会缩短至自身最小尺寸以适应容器
initial	flex: 0 1 auto	属性默认值， 元素会根据自身宽高设置尺寸。它会缩短自身以适应容器，但不会伸长并吸收flex容器中的额外自由空间来适应容器
none	flex: 0 0 auto	元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应flex容器
正数	flex: 1 0px	该值使元素可伸缩，并将伸缩基准值设置为零，导致该项目会根据设置的比率占用伸缩容器的剩余空间

双值语法

• 一个无单位数：它会被当作的值
• 一个有效的宽度值: 它会被当作的值

三值语法

• 第一个值必须为一个无单位数，并且它会被当作的值
• 第二个值必须为一个无单位数，并且它会被当作 的值
• 第三个值必须为一个有效的宽度值， 并且它会被当作的值

参考

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex

https://segmentfault.com/q/1010000004080910/a-1020000004121373