任何一个容器都可以指定为 Flex 布局

display: flex;
/* 行内元素也可以使用 Flex 布局 */
display: inline-flex;
/* Webkit 内核的浏览器，必须加上-webkit前缀 */
display: -webkit-flex; /* Safari */

父容器的属性

flex-direction(决定主轴的方向)

/*
  row(默认值): 主轴为水平方向，起点在左端
  row-reverse: 主轴为水平方向，起点在右端
  column: 主轴为垂直方向，起点在上沿
  column-reverse: 主轴为垂直方向，起点在下沿
*/
flex-direction: column-reverse | column | row | row-reverse;

flex-wrap(换行方式)

flex-wrap: nowrap; /* 默认: 不换行 */

flex-wrap: wrap; /* 换行，第一行在上方 */

flex-wrap: wrap-reverse; /* 换行，第一行在下方 */

flex-flow(direction + wrap)

/* flex-direction 和 flex-wrap 属性的简写形式，默认值为 row nowrap */
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(交叉轴上的对齐方式)

交叉轴上的对齐方式,默认交叉轴为竖轴

/*
  flex-start: 交叉轴的起点对齐
  flex-end: 交叉轴的终点对齐
  center: 交叉轴的中点对齐
  baseline: 项目的第一行文字的基线对齐
  stretch(默认值): 如果项目未设置高度或设为auto，将占满整个容器的高度
*/
align-items: flex-start | flex-end | center | baseline | stretch;

align-content(多根轴线的对齐方式)

多根轴线的对齐方式-如果内部只有一根轴线,该属性不起作用

/*
  flex-start: 与交叉轴的起点对齐
  flex-end: 与交叉轴的终点对齐
  center: 与交叉轴的中点对齐
  space-between: 与交叉轴两端对齐，轴线之间的间隔平均分布
  space-around: 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
  stretch(默认值): 轴线占满整个交叉轴
*/
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

子容器的属性

order(排列顺序)

定义容器的排列顺序。数值越小，排列越靠前，默认为0

order: <integer>;

flex-grow(剩余空间的占有份数)

定义容器剩余空间的占有份数,默认为0

flex-grow: <number>;

flex-shrink(缩小空间的占有份数)

定义容器压缩空间的占有份数,默认为1

  flex-shrink: <number>;

flex-basis(占据固定空间)

/* 它可以设为跟width或height属性一样的值（比如350px）,则容器将占据固定空间(不参与剩余空间和压缩空间的分配) */
flex-basis: <length> | auto; /* default auto */

flex(grow + shrink + basis)

/* flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选 */
flex: none | <flex-grow> <flex-shrink>? <flex-basis>?

align-self(交叉轴上的对齐方式)

/*
  align-self属性允许单个容器有与其他容器不一样的对齐方式，可覆盖align-items属性
  默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
*/
align-self: auto | flex-start | flex-end | center | baseline | stretch;

常见问题

多行多列(等宽自适应)布局

> ul {
  display: flex;
  flex-wrap: wrap;

![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/67c5057250254501aae5fc7195156b09~tplv-k3u1fbpfcp-watermark.image?)
  > li {
    flex: 1 1 30%;
    min-width: 30%;
    max-width: 33.33%;
    margin-right: 24px;
    margin-bottom: 24px;
    background-color: #fff;

![5917@NX%2XL6Q0AXKF]Y3T9.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/54bcf710985749cf91e6da399fda0dea~tplv-k3u1fbpfcp-watermark.image?)
    &:nth-of-type(3n) {
      margin-right: 0;
    }
  }
}

多行多列(定宽不定列)布局

<div class="container">
  <div class="list"></div>
  <div class="list"></div>
  <div class="list"></div>
  <div class="list"></div>
  <div class="list"></div>
  <div class="list"></div>
  <div class="list"></div>
  <i></i><i></i><i></i><i></i><i></i><i></i>//比div少一个即可!
</div>

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.list {
  width: 100px;
  height: 100px;
  background-color: skyblue;
  margin-bottom: 10px;
}

.container > i {
  width: 100px;
}

padding问题

padding不会被算在 flex-grow 和 flex-shrink 内

来源

• 阮一峰: Flex 布局教程