移动端flex 经典布局

最新推荐文章于 2023-03-27 10:09:11 发布

future_tgq

最新推荐文章于 2023-03-27 10:09:11 发布

阅读量371

点赞数 1

分类专栏： Css 文章标签：布局 flex 移动

本文链接：https://blog.csdn.net/qq2806000829/article/details/75666273

版权

Css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

		<div class="content-wrapper">
			<div class="content-list">1</div>
			<div class="content-list">1</div>
			<div class="content-list">1</div>
		</div>

			*{
				margin: 0;
				padding: 0;
			}
			.content-wrapper{
				display: flex;
				width: 100%;
				height: 40px;
				line-height: 40px;
				background-color: rgba(0,0,0,0.5);
			}
			.content-wrapper .content-list{
				flex: 1;
				text-align: center;
				color: #FFFFFF;
			}

主要内容就是给父容器的display 设置为flex定位,然后子元素设置flex: 1；就可以设置三个相等的div，假如变成了4个div 那么就会分成4等分在nav标签或者底部菜单都能很好的应用