css3代码整理—弹性盒子篇

父级使用弹性盒子：

#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;
             }

 

转载于:https://www.cnblogs.com/0328dongbin/p/8710057.html