移動端flex 經典佈局

		<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標籤或者底部菜單 都能很好的應用
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章