CSS布局——三个DIV横向竖向平均布局

一、正常默认布局

html代码

    <div class="div-big">
		<div class="div-small" style="background-color: lightcoral;"></div>
		<div class="div-small" style="background-color: lightgoldenrodyellow;"></div>
		<div class="div-small" style="background-color: lightskyblue;"></div>
	</div>

css代码

.div-big{
	width: 600px;
	height: 400px;
	background-color: lightseagreen;/*绿背景色*/
}
.div-big .div-small{
	width: 100px;
	height: 100px;
}

图片演示：

二、横向平均排列

html代码

    <div class="div-big">
		<div class="div-small" style="background-color: lightcoral;"></div>
		<div class="div-small" style="background-color: lightgoldenrodyellow;"></div>
		<div class="div-small" style="background-color: lightskyblue;"></div>
	</div>

css代码

.div-big{
	width: 600px;
	height: 400px;
	background-color: lightseagreen;/*绿背景色*/
	display: flex;/*重要*/
	justify-content: space-between;/*重要*/
}
.div-big .div-small{
	width: 100px;
	height: 100px;
}

图片演示

提示：

1.justify-content属性值有space-between(常用),space-around（常用）,start,end,center.

三、竖向平均排列

html代码

    <div class="div-big">
		<div class="div-small" style="background-color: lightcoral;">1</div>
		<div class="div-small" style="background-color: lightgoldenrodyellow;">2</div>
		<div class="div-small" style="background-color: lightskyblue;">3</div>
	</div>

css代码

.div-big{
	width: 600px;
	height: 400px;
	background-color: lightseagreen;/*绿背景色*/
	display: flex;/*重要*/
	flex-wrap: wrap;/*重要*/    /*--让弹性盒元素在必要的时候拆行：*/
	align-content: space-between;/*重要*/
}
.div-big .div-small{
	width: 600px;/*重要*/   /*宽度一定要超过父类横向50%大小*/
	height: 100px;
}

图片演示

提示：

1.竖向平均排列是加了一行拆分属性flex-wrap: wrap;

2.子类宽度一定要注意超过父类50%的宽度，否则就会横向不拆分成竖向的。

3.justify-content属性值有space-between(常用),space-around（常用）,start,end,center.