弹性布局换行左对齐(justify-content: space-between)

第一种办法:

因为每一行元素是固定的,所以我们拿5个元素为一行作为案例,废话不多说直接上案例.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">.flex {width: 700px;height: 400px;display: flex;justify-content: space-between;flex-wrap: wrap;}.flex>div{background: skyblue;width: 120px;height: 120px;}//最后一个元素在第2列的情况.flex div:last-child:nth-child(5n + 2) {margin-right: calc((100% - 120px) / 4 * 3);}//最后一个元素在第3列的情况.flex div:last-child:nth-child(5n + 3) {margin-right: calc((100% - 120px) / 4 * 2);}//最后一个元素在第4列的情况.flex div:last-child:nth-child(5n + 4) {margin-right: calc((100% - 120px) / 4 * 1);}
</style>
</head>
<body><div class="flex"><div>库里</div><div>科比</div><div>詹姆斯</div><div>欧文</div><div>杜兰特</div><div>乔丹</div><div>乔治</div></div>
</body>
</html>

第二种办法:

直接使用网格布局,比较方便.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">.flex {width: 700px;height: 400px;display: grid;justify-content: space-around;grid-template-columns: repeat(auto-fill, 120px);grid-gap: 20px; }.flex>div{background: skyblue;width: 120px;height: 120px;}
</style>
</head>
<body><div class="flex"><div>库里</div><div>科比</div><div>詹姆斯</div><div>欧文</div><div>杜兰特</div><div>乔丹</div><div>乔治</div></div>
</body>
</html>

弹性布局换行左对齐(justify-content: space-between)相关推荐

css设置一行右对齐，换行左对齐
父盒子设置 text-align: right; 文字的盒子设置 display:inline-block;text-align: justify;
css弹性布局实现水平居中对齐
块元素垂直居中问题采用 flex 解决. 行内元素垂直居中问题解决如下: 1)单行该元素 css 属性 line-height 的值与该元素的父级元素 css 属性 height 一致即可. 2)多 ...
CSS 弹性布局/flex布局最后一行左对齐
设计案例: 左对齐前左对齐后 html: <h1 class="module-title">核心产品</h1> <ul class="co ...
弹性布局最后一行的元素的对齐方式设置
随着技术的不断更新换代,网页布局也增加了弹性布局方式,不得不说弹性布局是真的很好用,但好用的同时也给我们带来一些不便之处.比如在布局列表内容时经常会用到子项目的两端对齐,但最后一行不需要两端对齐我们 ...
CSS 中最后一行中元素如何向左对齐
自从CSS 3.0出来以后,很多的页面布局都用弹性布来实现,特别是移动端,但是弹性布局也有它的弊端,就是最后一行如果数量不够,不会像我们正常的想法一样居左对齐.效果如下: 代码如下: <!DOC ...
前端基础-CSS弹性布局
三.弹性布局 1.多栏布局概念:实现多个栏目的布局,类似于报纸示意图 a) 分栏显示–语法:column-count:值取值:值是一个栏目的数量 <style type="tex ...
CSS弹性布局（排列方式、项目换行、主轴对齐方式）
在弹性布局里,父元素称为容器,子元素称为项目.项目排列由容器控制,控制属性都写在容器里.要使用弹性布局,要先使父元素display:flex; 例:以下写了项目的排列方式.项目换行.项目的对齐方式 & ...
flex布局换行之后让底部一行左对齐
flex布局换行之后让底部一行左对齐在用flex布局的时候遇到了下面这种问题,这是我的结构 <div class="videoMain"><div class= ...
flex 下对齐_CSS3中Flex弹性布局该如何灵活运用？
前言 Flex(Flexible Box),意为"弹性布局"."弹性",顾名思义,就是具有弹簧的特性啦,能够自由的伸缩(有点自适应的意思啦). 其实Flex并不 ...

弹性布局换行左对齐(justify-content: space-between)

弹性布局换行左对齐(justify-content: space-between)相关推荐

最新文章

热门文章