如何用 CSS Flexbox 实现宽度不定、间距相同、左对齐的布局?
如何实现宽度不定、间距相同、左对齐的布局
在网页布局中,有时我们需要创建宽度不定、间距相同、左对齐的元素。使用 css flexbox 可以轻松实现这种布局。
问题:
宽度不定,间距相同,左对齐。
解答:
立即学习“前端免费学习笔记(深入)”;
display: flex; flex-wrap: wrap; gap: 10px;
分解代码:
- display: flex; 将元素转换为弹性容器,并允许它们在水平方向排列。
- flex-wrap: wrap; 当元素伸出容器时,允许它们换行。
- gap: 10px; 设置元素之间的间距,使它们均匀间隔。
应用示例:
<div class="container"> <p>元素 1</p> <p>元素 2</p> <p>元素 3</p> </div>
.container { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; // 设置左对齐 }
通过上述 css,"元素 1"、"元素 2" 和 "元素 3" 将排列在水平方向,宽度不定,间距相同,并且左对齐。