Flex布局模型

概述

Flex布局模型，又称弹性布局。适合结构化布局，是一种浏览器提倡的网页布局，能够灵活、快速的开发网页，兼容性高、避免浮动脱标的问题。

1. 给父元素添加display:flex; 子元素自动挤压或拉伸，但对孙元素不起作用。
2. 给弹性容器设置justify-content、aligh-items，使子元素按需布局，子元素设置align-selfke
3. 弹性盒子添加flex:值;可占用父盒子剩余尺寸的份数。
4. 弹性盒子是行内元素也可以设置宽高

弹性容器设置主轴对齐方式：

• 主轴方向为水平方向，侧轴方向为垂直方向

li {
    // 弹性容器设置
    display:flex;
    
    // 主轴方向从行首位开始左对齐
    justify-content:flex-start;
    
    // 主轴方向从行末尾开始右对齐
    justifu-content:flex-end;
    
    // 主轴方向，所有元素居中
    justify-content:center;
    
    // 主轴方向均分弹性容器的宽度，首个与末尾的元素贴着弹性容器的边，中间空隙均等
    justify-content:space-between;
    
    // 主轴方向均分弹性容器的宽度，元素的空隙是首个与末尾元素的两倍
    justify-content:space-around;
    
    // 主轴方向均分弹性容器的宽度，所有元素的间距相等
    justify-content:space-evenly;
    
 }

弹性容器侧轴设置对齐方式：

li {
    // 弹性容器设置
    display:flex;
    
    // 侧轴方向，默认拉伸
    align-items:stretch;
    
    // 侧轴方向，顶部对齐
    align-items:flex-start;
    
    // 侧轴方向，底部对齐
    align-items:flex-end;
    
    //侧轴方向，元素居中
    align-items:center;
    
 }

弹性容器改变主轴方向设置

• 将主轴方向变更为垂直方向，侧轴方向变更为水平方向

li {
    // 弹性容器设置
    display:flex;
    
    // 改变弹性容器布局方向为垂直方向
    flex-direction:column;
 }

弹性容器换行及多行设置

• 弹性盒子默认一行显示，即使超出弹性容器的宽度也不会换行
• 给弹性容器设置flex-wrap:wrap;，弹性盒子将自动换行

li {
    // 弹性容器设置
    display:flex;

    // 弹性盒子换行设置
    flex-wrap:wrap;
 }

• 给弹性容器设置align-content，控制弹性盒子布局方式

li {
    // 弹性容器设置
    display:flex;
    
    // 弹性盒子换行设置
    flex-wrap:wrap;
    
    // 多行对齐方式
    align-content:flex-start;
    
    // 主轴方向从行末尾开始右对齐
    aligh-content:flex-end;
    
    // 主轴方向，所有元素居中
    align-content:center;
    
    // 主轴方向均分弹性容器的宽度，首个与末尾的元素贴着弹性容器的边，中间空隙均等
    align-content:space-between;
    
    // 主轴方向均分弹性容器的宽度，元素的空隙是首个与末尾元素的两倍
    align-content:space-around;
    
    // 主轴方向均分弹性容器的宽度，所有元素的间距相等
    align-content:space-evenly;
 }

弹性盒子设置：自身占父元素的剩余宽度

li {
    flex:1;
 }

弹性盒子设置：自身的对齐方式

li {
    // 弹性盒子自身在起始对齐
    align-self:flex-start;
    
    // 弹性盒子自身在结尾对齐
    aligh-self:flex-end;
    
    // 弹性盒子自身居中对齐
    align-self:center;
 }

给弹性盒子中的某个元素更换顺序

li:last-child {
    // 弹性盒子中的最后一个盒子置于首位
    order:-1;
 }