flex 布局

阮一峰 flex 布局

1、容器的属性

.box {
  // flex块元素、inline-flex行内元素
  display: flex;

  // item 在box中的排列顺序 （ 水平、垂直 ）
  //     row（默认值）：主轴为水平方向，起点在左端
  //     row-reverse：主轴为水平方向，起点在右端
  //     column：主轴为垂直方向，起点在上沿
  //     column-reverse：主轴为垂直方向，起点在下沿
  flex-direction: row | row-reverse | column | column-reverse;

  // flex-wrap：（ 一行放不下，处理方式 ）
  //     nowrap（默认）：不换行
  //     wrap：换行，第一行在上方
  //     wrap-reverse：换行，第一行在下方
  flex-wrap: nowrap | wrap | wrap-reverse;

  // flex-flow：前两种方式的简写形式
  flex-flow: <flex-direction> || <flex-wrap>;

  // justify-content（ 水平分布情况 ）
  //     flex-start（ 默认值）：左对齐
  //     flex-end：右对齐
  //     center： 居中
  //     space-between：两端对齐，项目之间的间隔都相等。
  //     space-around：每个项目两侧的间隔相等。
  justify-content: flex-start|flex-end|center|space-between|space-around;

  // align-items （垂直分布情况）
  //     align-items属性定义项目在交垂直方向的对其方式
  //     flex-start：交叉轴的起点对齐。
  //     flex-end：交叉轴的终点对齐。
  //     center：交叉轴的中点对齐。
  //     baseline: 项目的第一行文字的基线对齐。
  //     stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
  align-items: flex-start | flex-end | center | baseline | stretch;
}

2、项目的属性

.item {
  // 数值越小，排列越靠前，默认为0
  order: 2;

  // 项目的比例，值越大越宽，默认为0
  flex-grow: <number>;

  // 空间不足等比缩小(0除外，不变)默认为1
  flex-shrink: <number>; /* default 1 */

  // flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）
  flex-basis: <length> | auto; /* default auto */

  // flex属性是flex-grow、flex-shrink和flex-basis的简写：默认值为0 1 auto
  flex: none | [ < "flex-grow" > < "flex-shrink" >? || < "flex-basis" >] // 允许单个项目有与其他项目不一样的对齐方式
    .item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
  }
}