【CSS】flex的常用布局

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>

?