【CSS】flex的常用布局
生活随笔
收集整理的這篇文章主要介紹了
【CSS】flex的常用布局
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1、垂直居中，寫在父級上 div{display: flex;justify-content: center;align-items: center;
} 2、flex-左右兩端，垂直居中 該布局在移動端較為常見 <style>
.wrap{display: flex;justify-content: space-between;align-items: center;width: 200px;height: 100px;border: 1px solid #000;
}
</style>
<div class="wrap"><p>左邊文字</p><p>右邊文字</p>
</div>
?
3、10個div分兩行布局，（保持div原有的寬度） <style> .wrap{width: 300px;height: 500px;background: pink; } .nav{display: flex;flex-wrap: wrap; /*伸縮盒子的換行*/ } .item{width: 20%;border: 1px solid #000;box-sizing: border-box; } </style><div class="wrap"><div class="nav"><div class="item">菜單</div><div class="item">菜單</div><div class="item">菜單</div><div class="item">菜單</div><div class="item">菜單</div><div class="item">菜單</div><div class="item">菜單</div><div class="item">菜單</div><div class="item">菜單</div><div class="item">菜單</div></div> </div>?
轉(zhuǎn)載于:https://www.cnblogs.com/cindy2035/p/10436751.html
總結(jié)
以上是生活随笔為你收集整理的【CSS】flex的常用布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 民生开心消消乐联名信用卡年费多少？年费如
- 下一篇： 使用CSS实现图片未加载完成时占位显示