移动web布局--Flex布局

flex布局/浮动布局的特点:

1.是一种浏览器提倡的布局模型 2.布局网页更简单、灵活 3.避免浮动脱标的问题

flex布局/浮动布局的布局方式:

给父盒子添加 display:flex;

flex布局/浮动布局的组成:

1.弹性容器 2.弹性盒子 3.主轴(默认为X轴) 4.侧轴/交叉轴

主轴的对齐方式:

      `  justify-content: space-around;
        /* 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧 */
        justify-content: space-between;
        /* 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间 */
        justify-content: space-evenly;
        /* 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等 */
        justify-content: center;
        /* 沿主轴居中排列 */
        justify-content:flex-start;
        /* 默认值, 起点开始依次排列 */
        justify-content:flex-end;
        /* 终点开始依次排列 */`

改变flex主轴（更改元素排列方向）：

 `flex-direction：row；
  /* 主轴方向为行, 水平(默认值)*/
  flex-direction：column ；
 /* 主轴方向为列, 垂直 */
 flex-direction：row-reverse；
 /* 主轴方向为行, 从右向左*/
 flex-direction：column-reverse；
 /*  主轴方向为列, 从下向上*/`

侧轴对齐方式:

        align-items: flex-end;
        /* 终点开始依次排列 */
        align-items: flex-start;
        /* 起点开始依次排列 */
        align-items: center;
        /* 沿侧轴居中排列 */
        align-items: stretch;
        /* 默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器 */

flex常用布局方式-圣杯布局(两边大小固定不变，中间宽度自适应)

核心思路:

1.两侧盒子写固定大小
2.中间盒子flex: 1;
3.沾满剩余空间