css/flex布局（1~18）

一）、弹性盒子布局

• 含义：flex布局
• 操作：父元素添加   display:flex
• 特点：子元素默认横向显示、子元素会默认变成块，能设置宽高、如果只有一个子元素，给子元素添加margin:auto，则该子元素可以水平垂直居中显示，不会影响子元素的子元素

二）、修改主轴

1.flex-direction（主轴方向）

• row：主轴在横向
• row-reverse：主轴在横向，以相反的方式显示
• column：主轴在纵向
• column-reverse：主轴在纵向，以相反的方式显示

2.主轴的对齐及间距

• justify-content:flex-start;        （向左）
• justify-content:flex-end;         （向右）
• justify-content:center;            （居中）
• justify-content:space-between（两端对齐，中间间隔）
• justify-content:space-around  （每个子元素都有间隔，也就是中间的间距是最边上的两倍）
• justify-content:space-evently  （最边上的距离和中间的一样了）

3.交叉轴

align-items：用于调节侧轴

• align-items:flex-start（侧轴的开始位置显示）
• align-items:flex-end （侧轴的结束位置显示）
• align-items:center    （侧轴的居中位置显示）
• align-items:baseline （侧轴基线位置显示，效果与开始时位置一样，一般不用）
• align-items:stretch   （默认的拉伸效果，前提是项目的高度不需要设置高度）

4.折行属性

flex-wrap：是否让元素折行显示

• flex-wrap:no-wrap;
• flex-wrap:wrap;

5.调节行间距

align-content：调节行间距属性    （在侧轴方向显示）

• align-content:flex-start;
• align-content:flex-end;
• align-content:center;
• align-content:space-between;（两端对齐）
• align-content:space-around;  （行间距环绕）
• align-content:space-evenly;   （行间距平分）

6.单独对齐

align-self：

• align-self:flex-start（用于调整侧轴单独对齐方式）
• align-self:flex-end （单独侧轴末尾）
• align-self:center    （单独侧轴居中）
• align-self:stretch   （单独侧轴拉伸，前提是没有高度）
• align-self:baseline （与flax-start相同，通常不用）

7.项目调整显示顺序

• order：调整项目的顺序，取值可正可负，数值越大，位置越靠后，以此类推

8.剩余空间的所有

• flex:1（根据主轴的位置来实现占剩余宽度的所有、如果子元素每个都加了flex:1，则实现均分的效果）

三）、flex属性

1.flex属性实际是一个复合属性，是由flex-grow、flex-shrink、flex-basis

2.flex-shrink

flex-shrink：不挤压不折行

• owerflow

3.居中显示

• margin:auto与justify-content:center+align-items:center效果相同