Flexbox 是 CSS3 中的一种布局模式，它可以轻松地实现各种复杂的布局，相比于传统的布局方式，如浮动和定位，Flexbox 更加灵活、强大且易于使用，本文将详细介绍 Flexbox 的属性及其作用。

成都创新互联 - 服务器托管，四川服务器租用，成都服务器租用，四川网通托管,绵阳服务器托管，德阳服务器托管，遂宁服务器托管，绵阳服务器托管，四川云主机，成都云主机，西南云主机，服务器托管，西南服务器托管，四川/成都大带宽，成都机柜租用，四川老牌ＩＤＣ服务商

容器属性

1、display

display 属性用于设置一个元素是否为弹性盒子容器，设置为 flex 或 inline-flex 的元素将成为弹性盒子容器。

.container {
  display: flex;
}

2、flex-direction

flex-direction 属性用于设置弹性盒子的主轴方向，默认值为 row，表示水平方向，可以设置为 column，表示垂直方向。

.container {
  flex-direction: column;
}

3、flex-wrap

flex-wrap 属性用于设置弹性盒子的子元素是否换行，默认值为 nowrap，表示不换行，可以设置为 wrap，表示换行。

.container {
  flex-wrap: wrap;
}

4、justify-content

justify-content 属性用于设置弹性盒子的子元素在主轴上的对齐方式，默认值为 flex-start，表示左对齐，可以设置为 flex-end，表示右对齐；center，表示居中对齐；space-between，表示两端对齐；space-around，表示均匀分布。

.container {
  justify-content: center;
}

5、align-items

align-items 属性用于设置弹性盒子的子元素在交叉轴上的对齐方式，默认值为 stretch，表示拉伸以填充交叉轴，可以设置为 flex-start，表示上对齐；flex-end，表示下对齐；center，表示居中对齐；baseline，表示与基线对齐。

.container {
  align-items: center;
}

6、align-content

align-content 属性用于设置多行弹性盒子的子元素在交叉轴上的对齐方式，默认值为 stretch，表示拉伸以填充交叉轴，可以设置为 flex-start，表示上对齐；flex-end，表示下对齐；center，表示居中对齐；space-between，表示两端对齐；space-around，表示均匀分布。

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

项目属性

1、order

order 属性用于设置弹性盒子的子元素的排列顺序，数值越小，排列越靠前。

.item {
  order: 2;
}

2、flex-grow

flex-grow 属性用于设置弹性盒子的子元素在主轴上的放大比例，默认值为 0，表示不放大，可以设置为正数或负数。

.item {
  flex-grow: 1;
}

3、flex-shrink

flex-shrink 属性用于设置弹性盒子的子元素在主轴上的缩小比例，默认值为 1，表示缩小以适应容器，可以设置为正数或负数。

.item {
  flex-shrink: 0;
}

4、flex-basis

flex-basis 属性用于设置弹性盒子的子元素在主轴上的初始大小，默认值为 auto，表示根据内容自动计算宽度或高度，可以设置为具体数值或百分比。

.item {
  flex-basis: 100px;
}

5、flex

flex 属性是 flex-grow、flex-shrink 和 flex-basis 的简写形式，默认值为 0 1 auto，表示不放大、缩小以适应容器、根据内容自动计算宽度或高度。

.item {
  flex: 1;
}

6、align-self

align-self 属性用于设置单个弹性盒子的子元素在交叉轴上的对齐方式，覆盖容器的 align-items 属性值。

.item {
  align-self: center;
}

相关问题与解答栏目

问题1：为什么有时候设置了 flex-direction: column; 但是子元素还是按照 row 的方向排列？

答：这种情况可能是由于其他具有更高优先级的选择器覆盖了 flex-direction 的值，可以尝试提高容器选择器的优先级，或者检查是否有其他样式规则影响了子元素的排列方向。

问题2：如何让一个弹性盒子的子元素在交叉轴上居中对齐？

答：可以使用 align-items 属性并设置为 center，如下所示：align-items: center;

分享标题：flex的属性有哪些
分享路径：http://www.gydahua.com/article/cdehhpe.html