Flex 弹性布局拾缀

综述

flexbox是一个完整的模块而不是一个单独的属性，它包含了两个部分 父元素flex container，子元素flex items，这两个是属于一个包含关系

如图所示，flexbox有一个主轴main axis,还有一个侧轴cross axis

• main axis flex item排列的方向，当然这个方向是取决于flex-direction属性，并不是绝对的水平
• main start | main end 主轴的开始位置与结束位置
• main size 在主轴方向的宽度或高度就是项目的主轴长度
• cross axis 与主轴垂直方向的轴叫做侧轴
• cross start | cross end 侧轴的开始位置与结束位置
• cross size 侧周方向的宽度和高度就是项目的测轴长度

Flexbox容器

display

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

一旦设置容器为flex，容器内的CSS columns属性都会失效

flex-direction

定义主轴方向

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

• row (default): 如果书写方式是ltr，那么flexbox从左向右排列；如果书写方式是rtl，那么Flex项目从右向左排列
• row-reverse: 如果书写方式是ltr，那么flexbox从右向左排列；如果书写方式是rtl，那么Flex项目从左向右排列
• column: 与row相同，方向变为上下
• column-reverse: 与row相同，方向变为下上

flex-wrap

定义是否是一行展示

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

默认情况下，flex item都是在一行排列下展示的，可以根据需要来调整是否折行展示

• nowrap: 所有的flex item都是在一行排列展示
• wrap: 从上到下多行排列
• wrap-reverse: 从下到上多行排列

flex-flow

flex-direction 和 flex-wrap的集合体，默认值是row nowrap

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

justify-content

设置主轴方向上的对齐

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

• flex-start: 沿着起始点依次对齐排列
• flex-end: 沿着结束点一次对齐排列
• center: 居中对齐排列
• space-between: 两端对齐，第一个元素紧贴起始点，最后一个元素紧贴结束点，剩余元素依次排开
• space-around: 两端平均分布对齐

align-items

设置侧轴方向的对齐

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

• flex-start: 侧轴起始点对齐
• flex-end: 侧轴结束点对齐
• center: 侧轴中心点对齐
• baseline: 项目第一行文字对齐
• stretch: 如果项目未设置高度或设为auto，将占满整个容器的高度。

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: 轴线占满整个侧轴。

Flexbox元素

order

定义元素的顺序排列

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

默认元素是按照文档流的顺序排列的，通过定义元素的order属性，可以改变元素的排列顺序

flex-grow

定义一个元素的扩大比例

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

接收一个正整数，例如设置值为2,那么该元素就是其他元素的2倍占比空间

flex-shrink

定义一个元素的缩小比例

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

flex-basis

定义了在分配多余空间之前，元素占据的主轴空间（main size）

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

例如设置了flex-basis为100px，那么该元素占据主轴空间为100px

flex

flex-grow, flex-shrink, flex-basis的合体

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

align-self

单独设置元素的对齐方式

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