flex弹性布局的应用四之flex属性

自在飞花轻似梦paofu

于 2019-06-14 21:18:03 发布

阅读量246

点赞数

分类专栏： CSS 文章标签： flex

原创珍贵，转载请声明出处。

本文链接：https://blog.youkuaiyun.com/weixin_42277214/article/details/92008763

版权

CSS 专栏收录该内容

7 篇文章

订阅专栏

本文深入解析Flex布局在网页设计中的应用，通过实例演示如何利用Flex属性实现子元素的灵活长度调整，达到美观且响应式的页面布局效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

flex属性可理解为：子元素的长度
在这里插入图片描述
主要代码
html

	<div class="content">
		<div class="c-1">1</div>
		<div class="c-1">2</div>
		<div class="c-1">3</div>
		<div class="c-1">4</div>
	</div>

css

.content{
	width: 800px;
	height: 400px;
	background-color:#dbdbdb;
	display: flex;
}
.content div:nth-child(1){
	flex:1;
}
.content div:nth-child(2){
	flex:2;
}
.content div:nth-child(3){
	flex:1;
}
.content div:nth-child(4){
	flex:2;
}
.c-1{
	width: 115px;
	height: 180px;
	background-color:pink;
	border: 1px solid #f44336;
}