css3 - flex弹性布局

flex弹性布局

flex布局被称为弹性布局，一旦父容器设置为 flex 布局，那么子元素的摆放方式就已经决定了。只需要考虑自身的因素来设置是否能够弹性伸缩即可。

flex布局如果没有设置摆放的方向，那么默认就是在一行中进行排列。

flex布局的常用属性

• flex-direction是CSS中用于设置弹性容器（flex container）内弹性子项（flex item）的排列方向的属性。

.flex-container {
  display: flex;
  flex-direction: row; /* 水平排列 默认值，弹性子项水平排列，从左到右。*/
}

.flex-container-reverse {
  display: flex;
  flex-direction: row-reverse; /* 从右到左水平排列 弹性子项水平排列，从右到左。*/
}

.flex-container-column {
  display: flex;
  flex-direction: column; /*弹性子项垂直排列，从上到下。 垂直排列 */
}

.flex-container-column-reverse {
  display: flex;
  flex-direction: column-reverse; /* 从下到上垂直排列 弹性子项垂直排列，从下到上。*/
}

• flex-grow:

  它定义了一个元素在主轴(横轴)上的扩展比例。 这个比例是相对于剩余空间的。

• flex-shrink:

  当flex容器的宽度小于其子元素的总宽度时，flex-shrink属性将决定每个子元素的缩小比例。

• justify-content ：

用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

如果一个容器的justify-content属性为center，那么容器中的元素将会在横轴方向上居中对齐。如果容器的宽度为100px，而子元素的宽度为50px，那么子元素在容器中的位置将会在容器的中心点。

另外，justify-content属性还可以接受以下值：

flex-start：默认值，项目位于容器的开头。

flex-end：项目位于容器的结尾。

center：项目位于容器的中心。

space-between：项目位于各行之间留有空白的容器内。

space-around：项目位于各行之间均匀分布的容器内。

initial：设置为默认值。

inherit：从父元素继承该属性的值。

• align-items ：

它用于设置或检索弹性盒子元素在交叉轴（纵轴）方向上的对齐方式。

如果一个容器的align-items属性为center，那么容器中的元素将会在纵轴方向上居中对齐。如果容器的宽度为100px，而子元素的宽度为50px，那么子元素在容器中的位置将会在容器的中心点。

align-items属性还可以接受以下值：

flex-start：项目位于容器的上边缘。

flex-end：项目位于容器的下边缘。

center：项目位于容器的中心。

baseline：项目位于容器的第一行基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。