flexBox div布局

汤米粥

已于 2025-01-07 15:36:18 修改

阅读量238

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript

于 2025-01-07 15:35:33 首次发布

本文链接：https://blog.youkuaiyun.com/nnmmbb/article/details/144986899

div 水平排列 spread

如果你想要让div元素水平排列并且各个div之间有间隔，你可以使用CSS的Flexbox或者Grid布局来实现。

以下是使用Flexbox布局的例子：

HTML:

<div class="container">

<div class="box">Box 1</div>

<div class="box">Box 2</div>

<div class="box">Box 3</div>

</div>

CSS:





.container {

display: flex;

justify-content: space-between; /* 使div之间有间隔 */

}

.box {

margin: 5px; /* 设置div的间隔 */

padding: 10px;

border: 1px solid #000;

}

以下是使用Grid布局的例子：

HTML:





<div class="container">

<div class="box">Box 1</div>

<div class="box">Box 2</div>

<div class="box">Box 3</div>

</div>

CSS:





.container {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

gap: 10px; /* 设置行与行之间的间隔 */

}

.box {

padding: 10px;

border: 1px solid #000;

}

在这两个例子中，.container 是一个包含所有div的父元素，.box 是每个子div的类。使用Flexbox，你可以通过 justify-content: space-between; 让子元素之间有间隔。使用Grid，你可以通过 gap 属性设置行间距。