弹性盒

flex ：

• 代替浮动完成页面布局；
• 具有弹性，可以跟随页面的大小而改变；

相关概念：

弹性容器：

使用 flex 布局，要通过 display 设置弹性容器：

• display: flex ：设置为块级弹性容器；
• display: inline-flex ：设置为行内的弹性容器；

弹性元素：

弹性容器的子元素是弹性元素（弹性项），弹性元素可以同时是弹性容器；

弹性容器的属性：

主轴与侧轴：

• 主轴：弹性元素的排列方向称为主轴；
• 侧轴：与主轴垂直方向的称为侧轴；

主轴属性

排列方式 flex-direction ：指定容器中弹性元素的排列方式：

• row ：默认值，弹性元素在容器中水平排列（自左向右）

• row-reverse ：弹性元素在容器中反向水平排列（自右向左）
• column ：弹性元素纵向排列（自上向下）
• column-reverse ：弹性元素反向纵向排列（自下向上）

自动换行 flex-wrap ：设置弹性元素是否在弹性容器中自动换行：

• nowrap 默认值，元素不会自动换行；

• wrap 元素沿着辅轴方向自动换行；

简写属性

flex-flow ： wrap 和 direction 的简写属性：

{
	flex-flow: row wrap;
}

🌰 例子：

分配空白

justify-content 分配主轴上的空白空间（主轴的排列）：

• flex-start ：元素沿着主轴起边排列；

• flex-end ：元素沿着主轴终边排列；

  

• center ：元素居中排列；

• space-around ：空白分布到元素两侧；

• space-between ：空白均匀分布到元素间；

• space-evenly ：空白分布到元素的单侧；

辅轴属性

辅轴的对齐：
align-items ：元素在辅轴上的对齐方式：

• stretch 默认值，将元素的长度设置为相同的值；
• flex-start 元素不会拉伸，沿着辅轴起边对齐；
• flex-end 沿着辅轴的终边对齐；
• base-line 基线对齐；

分配空白：

align-content ：分配辅轴的空白空间：

• 属性值与 justify-content 类似；

覆盖辅轴：

align-self ：用来覆盖当前弹性元素上的 align-items 属性；

🌰 辅轴属性：

弹性容器的居中

{
  display: flex;
  justify-content: center;
	align-items: center;
}

弹性元素的属性：

伸缩属性

flex-grow 指定弹性元素的伸展系数：

• 父元素有多余的空间时，子元素如何伸展；
• 剩余的空间按照比例（指定系数）进行分配；

flex-shrink 指定弹性元素的收缩系数：

• 当父元素中的空间不足以容纳所有的子元素时，如何对子元素进行收缩

• 缩减系数的计算方式比较复杂，缩减多少是根据 缩减系数 和 元素大小 来计算；

基础长度

flex-basis 元素在主轴上的基本长度：

• 如果主轴是横向的，则该值指定的就是元素的宽度；

• 如果主轴是纵向的，则该值指定的就是元素的高度；

• 默认值是 auto ，表示参考元素自身的高度或宽度；

• 如果传递了一个具体的数值，则以该值为准；

简写属性

flex: 可以设置弹性元素所有的三个样式：增长、缩减、基础长度：

• initial ： flex: 0 1 auto ；

• auto ： flex: 1 1 auto ；

• none ： flex: 0 0 auto 弹性元素没有弹性；

排列顺序

使用 order 设定决定弹性元素的排列顺序：