css两个子div垂直

在网页设计中，有时需要将两个子div垂直排列。这可以通过CSS来实现。下面我们来看一下如何实现这一效果。

 .parent{
        display: flex;
        flex-direction: column;
    }
    .child1{
        height: 50%;
        background-color: blue;
    }
    .child2{
        height: 50%;
        background-color: red;
    } 

以上代码中，我们首先定义一个包含两个子元素的父元素parent。然后，我们将其设置为flex布局，使得其子元素可以根据我们的需求进行布局。接着，我们设置子元素child1的高度为50%，并设置其背景色为蓝色，这样它就会在父元素中占据一半的空间。同理，我们设置子元素child2的高度为50%，并将其背景色设置为红色，使得它也可以在父元素中占据一半的空间。

这样，我们就能实现两个子div垂直排列的效果了。当然，如果我们需要更多的子元素进行垂直排列，只需要根据需求设置其高度即可。