[分享]css中flex怎么分上下两块

在CSS中，有一种强大的布局方式叫做 Flex（弹性布局）。我们可以使用Flex来轻松地实现上下两块内容的布局。首先，我们需要在父元素上使用Flex布局。在CSS中，我们通过设置display属性为f...

在CSS中，有一种强大的布局方式叫做 Flex（弹性布局）。我们可以使用Flex来轻松地实现上下两块内容的布局。

首先，我们需要在父元素上使用Flex布局。在CSS中，我们通过设置display属性为flex来启用这种布局方式。例如：

.parent {
  display: flex;
} 

接着，我们需要指定父元素中子元素的排列方式。默认情况下，Flex会将子元素放在一行中。为了实现上下两块的布局，我们需要将子元素排成一列。我们可以通过设置flex-direction属性为column来实现：

.parent {
  display: flex;
  flex-direction: column;
} 

这时候，我们会发现子元素上下排列，但是它们会挤在一起。为了让它们之间有一定的距离，我们可以使用margin或padding属性来增加间距。例如：

.parent {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
} 

这样，我们就成功地实现了上下两块内容的布局。通过Flex布局，我们可以快速轻松地实现各种布局方式。作为前端开发者必备的技能之一，它在实际项目中应用非常广泛。