CSS Flex 布局【转载】

在CSS中，Flexbox布局提供了一种更为有效的方式来对容器内的项目进行排版，它可以使容器的子项在任何方向上（横向或纵向），以一种灵活的方式进行排列。

以下是一些常用的Flexbox属性：

display: flex; 这个属性是将一个元素指定为弹性盒子。
flex-direction: row | row-reverse | column | column-reverse; 这个属性用来设置弹性盒子的方向。
flex-wrap: nowrap | wrap | wrap-reverse; 这个属性用来设置如果弹性盒子的项目无法一行显示时，应该如何换行。
justify-content: flex-start | flex-end | center | space-between | space-around; 这个属性用来设置弹性盒子元素在主轴方向上的对齐方式。
align-items: flex-start | flex-end | center | baseline | stretch; 这个属性用来设置弹性盒子元素在交叉轴方向上的对齐方式。
align-self: auto | flex-start | flex-end | center | baseline | stretch; 这个属性用来设置弹性盒子的单个项目在交叉轴方向上的对齐方式。
flex-grow: <number>; 这个属性用来设置弹性盒子的项目的放大比例。
flex-shrink: <number>; 这个属性用来设置弹性盒子的项目的缩小比例。
flex-basis: <length> | auto; 这个属性用来设置弹性盒子的项目在分配多余空间之前，默认占据的空间。
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 这个属性是flex-grow, flex-shrink 和 flex-basis的简写。

以下是一些使用Flexbox的示例代码：

示例1：




.container {
  display: flex;
  flex-direction: row;
}

示例2：




.container {
  display: flex;
  flex-wrap: wrap;
}

示例3：




.container {
  display: flex;
  justify-content: center;
}

示例4：




.item {
  align-self: center;
}

示例5：




.item {
  flex-grow: 1;
}

示例6：




.item {
  flex: 1;
}

以上代码仅供参考，具体使用时需要根据实际需求进行调整。