flex 布局

flex 模型

• main axis;
  • main start;
  • main end;
• cross axis;
  • cross start;
  • cross end;
• flex container;
• flex items;
• main size;
• cross size;

flex-flow 属性

基础

作用

• 设置 flex main-axis 方向和换行方向;

element {
  flex-flow: column;
}

element {
  flex-flow: column-reverse wrap;
}

成分属性

• flex-wrap 属性;
• flex-direction 属性;

简写机制

• flex-wrap;
• flex-direction;
• flex-wrap + flex-direction;

flex-direction 属性

• 设置 flex items main-axis 方向;

#col-rev {
  /* 默认值, 从 block-start 到 block-end */
  flex-direction: row;
  /* 从 block-end 到 block-start */
  flex-direction: row-reverse;
  /* 从 inline-start 到 inline-end */
  flex-direction: column;
  /* 从 inline-end 到 inline-start */
  flex-direction: column-reverse;
}

flex-wrap 属性

• 设置 flex item 换行;

.content {
  display: flex;
  /* 默认值, 不换行 */
  flex-wrap: nowrap;
  /* 自动换行, 从 main-start 到 main-end */
  flex-wrap: wrap;
  /* 自动换行, 从 main-end 到 main-start */
  flex-wrap: wrap-reverse;
}

flex 属性

基础

作用

• 设置 flex item 拉伸参数;

#flex-container > .flex-item {
  flex: auto;
}

成分属性

• flex-grow 属性
• flex-shrink 属性
• flex-basis 属性

简写机制

• auto;
• flex-grow;
• flex-basis;
• flex-grow + flex-shrink;
• flex-grow + flex-basis;
• flex-grow + flex-shrink + flex-basis;

常见属性值

• flex: 1 = flex: 1 1 0%;
• flex: 2 = flex: 2 1 0%;
• flex: auto = flex: 1 1 auto;

flex-grow 属性

作用

• 设置 flex item 拉伸参数;
• 默认为 1;

.box1 {
  flex-grow: 2;
}

机制

• 在 cross/main-axis 方向拉伸;
• 若多个 flex item cross/main-axis 方向大小依次为 a_1, a_2, ...a_n
• flex-grow 依次为 b_1, b_2, ...b_n 时;
• 当存在剩余空间, 且假设其大小为 x;
• 对应 flex item 大小增加溢出空间 x 的 $\frac{a_i * b_i}{\sum^n_{i=1}{a_i * b_i}}$

flex-shrink 属性

作用

• 设置 flex item 拉伸参数;
• 默认为 1;

.box1 {
  flex-shrink: 2;
}

机制

• 在 cross/main-axis 方向收缩;
• 若多个 flex item cross/main-axis 方向大小依次为 a_1, a_2, ...a_n
• flex-grow 依次为 b_1, b_2, ...b_n 时;
• 当 flex item 溢出容器, 且假设其溢出空间大小为 x;
• 对应 flex item 大小缩小溢出空间 x 的 $\frac{a_i * b_i}{\sum^n_{i=1}{a_i * b_i}}$

flex-basic 属性

• 设置 flex item 在 cross/main-axis 方向的基础尺寸;

.box1 {
  /* 根据容器尺寸设置大小, 若无尺寸, 视为 content */
  flex-basis: auto;
  /* 根据容器内容设置大小 */
  flex-basis: content;
  /* length 类型 */
  flex-basis: 3px;
  /* percentage 类型 */
  flex-basis: 3%;
}

order 属性

作用

• 更改 flex/grid item 顺序;

语法格式

main > article {
  flex: 1;
  /* length 类型 */
  order: 2;
}

排序机制

• order 数值越小越靠前;

垂直/水平对齐

方向

• align: cross axis 方向;
• justify: main axis 方向;

align/justify-items 属性

作用

• 设置 flex/grid 所有 item 的网格对齐样式;
• item 在 flex/gird 网格中的 cross/main axis 位置;
• justify-items 在 flex 无效;
  • flex 为一维结构;
  • flex 在 main axis 无网格概念;

.flex {
  /* 默认值, 替换元素为 start, 其余为 stretch */
  align-items: normal;
  /* cross/cross/main-size 拉伸,  margin box edges 和 outline edges 对齐 */
  align-items: stretch;
  /* 垂直居中 */
  align-items: center;
  /* 标签与其容器的 cross/cross/main-start edge 对齐 */
  align-items: start;
  /* 标签与其容器的 cross/cross/main-end edge 对齐 */
  align-items: end;
  /* 单独作用于 flex 标签 */
  align-items: flex-start;
  align-items: flex-end;
}

align/justify-self 属性

• 设置单个 flex/grid item 对齐样式;
• 属性值同 align-item 属性;

.flex-items {
  align-self: stretch;
}

align/justify-content 属性

作用

• 设置 flex/grid 的 item 内部内容的对齐样式;
• item 内容在 item 盒子模型的对齐位置;

#container {
  display: flex;
  /* 默认值, stretch;  */
  justify-content: normal;
  /* cross/cross/main-size 拉伸,  margin box edges 和 outline edges 对齐 */
  justify-content: stretch;
  /* 垂直居中 */
  justify-content: center;
  /* 标签与其容器的 cross/cross/main-start edge 对齐 */
  justify-content: start;
  /* 标签与其容器的 cross/cross/main-end edge 对齐 */
  justify-content: end;
  /* 单独作用于 flex 标签 */
  justify-content: flex-start;
  justify-content: flex-end;
  /* 标签与其容器的 left edge 对齐 */
  justify-content: left;
  /* 标签与其容器的 right edge 对齐 */
  justify-content: right;

  /* 沿 cross/main-axis 水平分布, item 之间间距相等 */
  /* 两端 item 与容器两端对齐 */
  justify-content: space-between;
  /* 两端 item 与容器两端间距为 item 之间间距的一半 */
  justify-content: space-around;
  /* 两端 item 与容器两端间距和 item 之间间距相同 */
  justify-content: space-evenly;
}