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

布局——三个DIV横向竖向平均布局"/>

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.