flex布局

最新推荐文章于 2022-11-17 16:53:00 发布

每一天，每一步

最新推荐文章于 2022-11-17 16:53:00 发布

阅读量123

点赞数

分类专栏： HTML/CSS 文章标签： html css flex css3

本文链接：https://blog.csdn.net/u010234868/article/details/115406349

版权

HTML/CSS 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

HTML代码：

<div class="row">
	<div class="col col-33">33%</div>
	<div class="col col-1">1</div>
	<div class="col col-2">2</div>
</div>
<div class="row">
	<div class="col col-33">33%</div>
	<div class="col col-1">1</div>
	<div class="col col-1">1</div>
	<div class="col col-1">1</div>
</div>
<div class="row">
	<div class="col col-33">33%</div>
	<div class="col col-1">1</div>
	<div class="col col-1">1</div>
	<div class="col col-1">1</div>
</div>

CSS代码：

.row {
	height: 67px;
	line-height: 67px;
	display: flex;
	border-bottom: 1px solid #fff;
	color: #fff;
}
.row:first-child {
	background-color: #fa5956;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}
.row:nth-child(2) {
	background-color: #4b8fed;
}
.row:last-child {
	background-color: #34c2aa;
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
}
.col {
	border-right: 1px solid #fff;
	text-align: center;
}
.col:last-child {
	border-right: 0;
}
.col-33 {
	width: 33%;
}
.col-1 {
	flex: 1;
}
.col-2 {
	flex: 2;
}