[分享]css写flex占两行

CSS写Flex是Web布局中非常常用的一种方式，它可以让网页布局更加灵活，适应不同尺寸的屏幕，下面我们来看一下如何使用CSS写Flex来实现两行的布局。.container { display: f...

CSS写Flex是Web布局中非常常用的一种方式，它可以让网页布局更加灵活，适应不同尺寸的屏幕，下面我们来看一下如何使用CSS写Flex来实现两行的布局。

.container {
  display: flex; /* 将元素设置为Flex布局 */
  flex-direction: column; /* 设置元素的主轴方向为纵向 */
  justify-content: space-between; /* 设置元素间的间距为平均分布 */
  height: 100%; /* 设置容器高度为100% */
}

.item {
  flex: 1; /* 设置子元素在主轴方向上平均分布 */
  text-align: center; /* 文字居中对齐 */
} 

以上代码中，我们首先将容器的display属性设置为flex，将其变为Flex布局。接着，我们将主轴方向设置为纵向（column），并设置元素的间距为平均分布（space-between），这样就可以让容器中的子元素平均分布在主轴方向上。同时，我们还需要设置子元素的flex属性为1，将子元素进行平均分布。

最后，我们在子元素中加入文字或者其他元素，然后再设置文字或元素的样式即可。这样，我们就成功实现了一个占据两行的Flex布局。