css如何让div中的两个span上下分布

css如何让div中的两个span上下分布

在css中，可以使用flex布局，实现两个span元素上下分布。下面小编举例讲解css如何让div中的两个span上下分布。

新建一个html文件，命名为test.html，用于讲解css如何让div中的两个span上下分布 。

在test.html文件内，在div内，使用span标签创建两行文字。

在test.html文件内，设置div标签的class属性为mytest。

在css标签内，通过class设置div元素的样式，设置它的宽度为200px，高度为200px，背景颜色为灰色，并使用display属性设置为flex布局。

在css标签内，再将flex-direction属性设置为column，实现两个span在一列，再将align-items属性设置为flex-start，实现span文字左对齐，将justify-content属性设置为space-between，实现垂直方向上下分布对齐。

在浏览器打开test.html文件，查看实现的效果。

1、在div内，使用span标签创建两行文字，设置div标签的class属性为mytest。2、在css标签内，通过class设置div元素的样式，设置它的宽度为200px，高度为200px，背景颜色为灰色，并使用display属性设置为flex布局。3、在css标签内，再将flex-direction属性设置为column，实现两个span在一列，再将align-items属性设置为flex-start，实现span文字左对齐，将justify-content属性设置为space-between，实现垂直方向上下分布对齐。4、在浏览器打开test.html文件，查看实现的效果。