作者:提着变形金刚的Oceannk_737 | 来源:互联网 | 2023-01-01 17:38
我有这个HTML
加上这个CSS
.wrap {
display: flex;
align-items: center;
}
.one {
flex: 0 1 200px;
}
.two {
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
}
.three {
display: flex;
flex: 0 1 200px;
justify-content: flex-end;
}
.four {
???
}
我想使它看起来像这样,我不知道还有什么用于.four来使最后一个div在新行上移动并加上100%的宽度
[- one -----][----- two -----][----- three -]
[----------------- four --------------------]
atm看起来像这样
[- one -----][----- two -----][----- three -] [- four -----]
我知道我可以再用
但我不要这个,谢谢。
1> delinear..:
添加flex-wrap: wrap
到.wrap
该类中,然后创建您的.four
类flex: 1 1 100%
,即可完成此工作:
.wrap {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.one {
flex: 0 1 200px;
}
.two {
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
}
.three {
display: flex;
flex: 0 1 200px;
justify-content: flex-end;
}
.four {
flex: 1 1 100%;
}
这是一个Codepen示例(我为您的div添加了边框和高度只是为了使其更易于可视化)。
推荐阅读
-
css33d学习心得卡片反转魔方banner图首先我们要学习好css33d一定要有一定的立体感通过这个图片应该清楚的了解到了x轴y轴z轴是什么概念了。首先先给大家看一个小 ...
[详细]
蜡笔小新 2023-10-11 12:41:15
-
这篇文章将为大家详细讲解有关如何使用JavaScript动态设置CSS3属性值,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读 ...
[详细]
蜡笔小新 2023-10-11 05:24:06
-
-
Iamtryingtoachievethearrowpointingupwards..iamtryingtoachieveitinmycssiamnotabl ...
[详细]
蜡笔小新 2023-10-09 19:41:30
-
本文小编为大家详细介绍“前端实用的CSS3技巧有哪些”,内容详细,步骤清晰,细节处理妥当,希望这篇“前端实用的CSS3技巧有哪些”文章能帮助大家 ...
[详细]
蜡笔小新 2023-09-25 13:50:50
-
小编给大家分享一下怎么使用css3画三角形,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!首先看一下css3画三角形的原理我们先来看 ...
[详细]
蜡笔小新 2023-09-25 07:28:58
-
本文主要介绍关于html5,css3的知识点,对【关于雾霾网站设计】和【你有什么见解】有兴趣的朋友可以看下由【-你在暮色中】投稿的技术文章,希望该技术和经验能帮到你解决你所遇的【】相关技术问题。你有 ...
[详细]
蜡笔小新 2023-09-24 13:40:19
-
1、给边框加上圆角及阴影,如下代码:<!DOCTYPEhtmlPUBLIC"-W3CDTDHTML4.01TransitionalEN"" ...
[详细]
蜡笔小新 2023-09-17 19:38:46
-
http:js.alixixi.coma2014021292298.shtmlhttp:w3cshare.comexample?pid134http:w3cshare.comc ...
[详细]
蜡笔小新 2023-09-17 13:26:50
-
iamtryingtomakeanavigationmenuinsidea200pxx200pxsquare,thisnavigationlist(UL)chang ...
[详细]
蜡笔小新 2023-09-16 19:05:52
-
很有意思的全景动画:(直接上代码)html部分:<div><div>css部分:.panorama{width:300px;hei ...
[详细]
蜡笔小新 2023-09-16 12:37:52
-
小编给大家分享一下CSS3如何实现loading预加载动画特效,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章 ...
[详细]
蜡笔小新 2023-09-16 12:05:33
-
这篇文章主要为大家展示了“html5+css3网站菜单的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习 ...
[详细]
蜡笔小新 2023-09-16 11:05:47
-
本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ...
[详细]
蜡笔小新 2023-12-14 18:18:21
-
CSS:body{font-size:62.5%;}为什么???在网页设计中我们经常看见body{font-size:62.5%;}这样的设置,为什么偏偏是62.5%呢?这主要是为了方便em与p ...
[详细]
蜡笔小新 2023-09-25 20:24:32
-
background:-webkit-gradient(linear,10%10%,100%100%, ...
[详细]
蜡笔小新 2023-09-25 18:49:33
-
提着变形金刚的Oceannk_737
这个家伙很懒,什么也没留下!