父级使用弹性盒子:
#fu{ display:flex; }
父级中子级的对齐方式:
1.水平对齐方式:两端对齐
#fu
{
display:flex;
justify-content:space-between;
}
2.水平对齐方式:作为个体,等分几份,在同一行内居中对齐
#fu { display:flex; justify-content:space-around; }
3.水平对齐方式:作为整体,同一行内居中对齐
#fu { display:flex; justify-content:center; }
4.水平对齐方式:作为整体,同一行内对齐至开始端
#fu{ display: flex; justify-content: flex-start; }
5.水平对齐方式:作为整体,同一行内对齐至结束端
#fu{ display: flex; justify-content: flex-end; }
6.垂直对齐方式:作为整体,同一列内垂直居中
#wai{ display: flex; align-items: center; }
6.垂直对齐方式:作为整体,同一列内垂直居上
#wai{
display: flex;
align-items: auto;
}
6.换行方式:自动换行
#wai{
display: flex;
flex-wrap: wrap;
}