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>