欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-26 22:22:21
...

flex属性可理解为 :子元素的长度
flex弹性布局的应用四 之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;
}
相关标签: flex

上一篇: CSS

下一篇: css三角做法