Flexbox 深入：整理常用的属性及使用技巧-JavaScript中文网-JavaScript教程资源分享门户

Flexbox 是一种布局模式，它可以使我们更加容易地在容器内进行元素的布局，在现代前端开发中应用广泛。本文将会深入介绍 Flexbox 常用的属性及使用技巧。

容器属性

display

定义一个容器是 flex 容器。该值让子元素都成为弹性项目。默认值为 inline。

.container{
  display: flex;
}

flex-direction

定义元素所排列的方向。默认值为 row。

row：从左向右排列。
row-reverse：从右向左排列。
column：从上到下排列。
column-reverse：从下向上排列。

.container{
  flex-direction: row;
}

flex-wrap

定义容器如何进行换行。

nowrap：不换行，默认值。
wrap：按照各元素设置的宽高进行一行排列，剩下的为下一行。
wrap-reverse：和 wrap 基本一致，但是第一行在下方。

.container{
  flex-wrap: nowrap;
}

justify-content

定义了元素在主轴上的对齐方式。默认值为 flex-start。

flex-start：从头开始。
flex-end：对齐到尾部。
center：居中对齐。
space-between：平均分布排列。
space-around：每个元素两端留出相等的空间。

.container{
  justify-content: center;
}

align-items

定义元素在侧轴上的对齐方式。默认值为 stretch。

stretch：拉平高度。
flex-start：对齐到上方。
flex-end：对齐到下方。 -center：居中对齐。
baseline：基于容器的基线进行对齐。

.container{
  align-items: center;
}

align-content

定义多行元素在侧轴上的排列方式。

stretch：平分整个高度，占满容器高度。
flex-start：在顶部对齐。
flex-end：在底部对齐。
center：居中对齐。
space-between：平均分布排列。
space-around：每个元素两端留出相等的空间。

.container{
  align-content: space-around;
}

项目属性

order

定义了弹性项目的排列顺序，该值是一个整数。默认值为 0。

.item{
  order: 3;
}

flex-grow

定义了一个弹性元素的扩展比率，如果有剩余空间，按照比率进行分配。默认值为 0，即按照设置的宽度和高度进行排列。

.item{
  flex-grow: 2;
}

flex-shrink

定义元素的收缩比率，默认值为 1。

.item{
  flex-shrink: 3;
}

flex-basis

定义元素的基准宽度或高度，如果值为 auto，则会默认按照元素本身的宽度或高度进行排列。

.item{
  flex-basis: 200px;
}

flex

该属性是 flex-grow, flex-shrink 和 flex-basis 的缩写。如果只有一个数字，则默认只是 flex-grow。

.item{
  flex: 1 2 200px;
}

align-self

定义自身在侧轴上的对齐方式，会覆盖容器定义的 align-items。

auto：继承父元素的 align-items 属性（默认值）
stretch：拉平高度。
flex-start：对齐到上方。
flex-end：对齐到下方。
center：居中对齐。
baseline：基于容器的基线进行对齐。

.item{
  align-self: center;
}

常用使用技巧

等分容器

wwwater

使用 flex 可以很容易地实现等分容器内的元素。

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

垂直水平居中