flex初学者使用

设置容器

.box {
  display: flex;//给一个容器设置为flex
  //设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
}

容器属性如下

1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content

flex-direction属性

flex-direction属性决定主轴的方向（即项目的排列方向）。

.box {
  display: flex;//给一个容器指定为flex
  flex-direction: row;//column方向从上往下，column-reverse从下往上，row从左往右，row-reverse从右往左
}
}

flex-wrap属性

项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

.box {
  display: flex;//给一个容器指定为flex
  flex-direction: row;//column方向从上往下，column-reverse从下往上，row从左往右，row-reverse从右往左
  flex-wrap:wrap; //nowrap不换行 | wrap换行，第一行在上方 | wrap-reverse换行，第一行在下方
}

justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

.box {
  display: flex;//给一个容器指定为flex
  flex-direction: row;//column方向从上往下，column-reverse从下往上，row从左往右，row-reverse从右往左
  flex-wrap:wrap; //nowrap不换行 | wrap换行，第一行在上方 | wrap-reverse换行，第一行在下方
  justify-content: flex-start;//flex-start（默认值）：左对齐flex-end：右对齐center： 居中space-between：两端对齐，项目之间的间隔都相等。space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
}

align-items属性

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

.box {
  display: flex;//给一个容器指定为flex
  flex-direction: row;//column方向从上往下，column-reverse从下往上，row从左往右，row-reverse从右往左
  flex-wrap:wrap; //nowrap不换行 | wrap换行，第一行在上方 | wrap-reverse换行，第一行在下方
  justify-content: flex-start;//flex-start（默认值）：左对齐flex-end：右对齐center： 居中space-between：两端对齐，项目之间的间隔都相等。space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
  align-items: flex-start;//(从上往下)flex-start：交叉轴的起点对齐。flex-end：交叉轴的终点对齐。center：交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐。stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
}

align-content属性

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

.box {
  display: flex;//给一个容器指定为flex
  flex-direction: row;//column方向从上往下，column-reverse从下往上，row从左往右，row-reverse从右往左
  flex-wrap:wrap; //nowrap不换行 | wrap换行，第一行在上方 | wrap-reverse换行，第一行在下方
  justify-content: flex-start;//（从左往右）flex-start（默认值）：左对齐flex-end：右对齐center： 居中space-between：两端对齐，项目之间的间隔都相等。space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
  align-items: flex-start;//(从上往下)flex-start：交叉轴的起点对齐。flex-end：交叉轴的终点对齐。center：交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐。stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
  align-content: flex-start;//（从左往右）flex-start：与交叉轴的起点对齐。flex-end：与交叉轴的终点对齐。center：与交叉轴的中点对齐。space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。stretch（默认值）：轴线占满整个交叉轴。
}

注：现在只文档只有容器的设置，容器里面元素样式后续持续更新…