flex布局:两端对齐,自动换行

news/2024/5/19 19:27:18 标签: css, html, flex, 前端

需求:
在这里插入图片描述
一个大盒子里,小盒子整齐排列,自动换行。
直接上代码:

html"><div class="cont">
	<div class="card"></div>
	<div class="card"></div>
	<div class="card"></div>
	<div class="card"></div>
	<div class="card"></div>
	<div class="card"></div>
</div>
html" title=css>css">.cont{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-flow:row wrap;
    width: 1200px;
    background-color: #f5f5f5;
    
}
.cont .card{
    width:385px;
    height:280px;
    background:#fff;
    border:1px solid #E5E5E5;
}

要注意的是,flex-flow默认是不能换行的,这里需要手动设置一下。
如果想要换行时无间隙,可以在父元素再添加:

html" title=css>css">align-content: flex-start;

关于最后一行数量不足时的左对齐问题,我放在了另一篇帖子里:
https://blog.csdn.net/qq_41883423/article/details/108712172


http://www.niftyadmin.cn/n/1355336.html

相关文章

python编程题怎么做-Python练习题

一、简答题 1 python中如何交换两个变量的值&#xff1f; x,y y,x 2.range和xrange的区别&#xff1f; Range生成一个序列 Xrange是一个迭代器 3.赋值、浅拷贝和深拷贝的区别&#xff1f;&#xff08;文字描述代码&#xff09; 赋值 ab 浅拷贝 拷贝堆区指向 深拷贝拷贝堆区值 …

css:opacity影响子元素透明度

问题&#xff1a;为父元素设置opacity做透明效果时。子元素会继承这个属性导致子属性也有透明效果。 <body><div class"parent"><div class"child"></div></div></body><style>.parent{width: 200px;height: 2…

win7开机卡在正在启动_电脑用久了越来越卡?现在调整这4个电脑设置,立马流畅好几倍...

电脑使用久了会越来越卡&#xff0c;使用起来不流畅&#xff0c;打开个网页都要卡半天&#xff0c;非常影响使用体验。其实不妨现在开始&#xff0c;调整这4个电脑设置&#xff0c; 能让电脑流畅好几倍。关闭弹窗广告面对电脑中经常弹出的广告&#xff0c;大家是不是觉得很影响…

自定义样式的echats折线图(过程示例)

需求,直接上设计图&#xff1a; 进入echats官网&#xff1a; https://www.echartsjs.com/zh/index.html 找到官方实例&#xff1a; 随机选择一个顺眼的折线图&#xff1a; 进入后&#xff0c;开始改造。左边修改代码&#xff0c;右边则能够看到表现。 首先我们去除图中的区…

值对于int32太大或太小_鱼缸放置在家里向阳的地方,对于观赏鱼有好处吗?

图文/养鱼老道 原创可以肯定的说&#xff0c;只要是阳光不过于强烈&#xff0c;对于观赏鱼来说只有好处没有坏处&#xff0c;不过嘛&#xff0c;鱼主人可能就要受累了&#xff0c;这里面牵扯到的主要因素就是一个绿苔和爆藻还有水温是否恒定的问题。一、青苔水的生成离不开阳光…

VSCODE或其他应用出错无法启动问题

问题&#xff1a;VSCODE编辑器或其他应用经常卡死之后无法再次启动。 解决&#xff1a;调出cmd界面&#xff0c;输入netsh winsock reset netsh winsock reset这个命令的用处是重新初始化网络环境&#xff0c;以解决由于软件冲突、病毒原因造成的参数错误问题。

电脑是32位还是62位在哪里看_如何查看电脑的内存是多少

现在电脑基本都是普及了&#xff0c;但还有好一部分小伙伴不知道电脑的内存在哪里查看的。有一次&#xff0c;我问某个小伙伴&#xff0c;你的电脑内存是多少&#xff1f;他脱口而出&#xff0c;1T。所以&#xff0c;我就特意写了这一篇教程。希望各位小伙伴都可以正确认识和分…

css:单行/多行文本超出隐藏

单行超出隐藏&#xff1a; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;width: 250px;//必须设置宽度效果&#xff1a; 多行超出&#xff1a; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;width: 100px;//必…