Flex

Flex Flow

flex-direction 和 flex-wrap 的缩写

.box {
  flex-flow: <direction> <wrap>;
  flex-direction: <direction>;
  flex-wrap: <wrap>;
}

.flex-row {
  flex-direction: row;
}
.flex-row-reverse {
  flex-direction: row-reverse;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}
.flex-nowrap {
  flex-wrap: nowrap;
}

Justify Content

justify-content

主轴对齐方式

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

Align Content

align-content

多主轴对齐方式

.content-center {
  align-content: center;
}
.content-start {
  align-content: flex-start;
}
.content-end {
  align-content: flex-end;
}
.content-between {
  align-content: space-between;
}
.content-around {
  align-content: space-around;
}
.content-evenly {
  align-content: space-evenly;
}
.content-baseline {
  align-content: baseline;
}

Align Items

align-items

交叉轴对齐方式

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

Align Self

align-self

对齐方式，覆盖 align-self

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

Flex

子元素大小，缩写

flex

.box {
  flex: <grow> <shrink> <basis>;
  flex: 0 1 auto; // 默认值
}

grow

.box {
  flex-grow: <grow>; // 拉伸系数
  flex-grow: 0; // 默认值
}

// 分配剩余空间
// 按比例拉伸
// 0 不拉伸

shrink

.box {
  flex-shrink: <shrink>; // 收缩系数
  flex-shrink: 1; // 默认值
}

// 超出容器空间
// 按比例收缩
// 0 不收缩

basis

.box {
  flex-basis: <basis>; // flex宽度
  flex-basis: auto; // 默认值
}

// auto表示flex计算宽度等于width或height，否则为指定值

.flex-1 {
  flex: 1 1 0%;
}
.flex-auto {
  flex: 1 1 auto;
}
.flex-initial {
  flex: 0 1 auto;
}
.flex-none {
  flex: none;
}
.grow {
  flex-grow: 1;
}
.grow-0 {
  flex-grow: 0;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}

Order

子元素排序

.box {
  order: 99;
}

扩展

Margin

利用 margin 来模拟实现 justify-self

左右对齐

left

left

left

right

right

<div class="flex-row justify-start">
  <div class="item">left</div>
  <div class="item">left</div>
  <div class="item" style="margin-right: auto">left</div>
  <div class="item">right</div>
  <div class="item">right</div>
</div>

左中右对齐

left

left

center

right

right

<div class="flex-row justify-start">
  <div class="item">left</div>
  <div class="item">left</div>
  <div class="item" style="margin: 0 auto">center</div>
  <div class="item">right</div>
  <div class="item">right</div>
</div>