CSS布局

2023-12-28 22:45| 来源: 网络整理| 查看: 265

一、正常默认布局

html代码

css代码

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

图片演示：

二、横向平均排列

html代码

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代码

1 2 3

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.

【本文地址】

公司简介

联系我们