【基础知识05】移动端/PC端布局-flex布局

一：flex布局概述

1. 作用

   1.   更加灵活、精确的布局块级盒子，避免了浮动布局中脱离标准流的现象；

2. 构成

   1. 只要启动了弹性布局：
   2. 父元素变为：弹性容器、子元素为：弹性盒子、x轴水平方向为：主轴、y轴垂直方向为：侧轴（默认）

二：如何使用flex布局

1. 如何启动flex布局

   1. 给父级盒子(弹性容器)添加display：flex，子元素自动挤压或拉伸，具有行内块元素的特性，使得弹性盒子在主轴上排列显示；
   2. flex布局组成：父级盒子变成弹性容器，子级元素变成弹性盒子；主轴正方向向右默认为x轴，侧轴正方向向下默认为y轴；

2. 主轴对其方式

   justify-content:center居中
   justify-content:space-around给子级两侧添加间距
   justify-content:space-between子级之间添加间距
   justify-content:space-evenly子级之间、子级与弹性容器之间的间距相等

   1. 推荐试一下，下面代码看效果

3. 侧轴对齐方式

   1. 子元素有高度情况下默认为align-items:flex-start
   2. 子元素没有高度的情况下默认为：align-items：stretch，沿侧轴线铺满整个盒子高度
   3. 其他属性：align-items：flex-end/center
   4. 单独控制侧轴某元素的排列方式：align-self：属性值与align-items属性值相同

4. flex属性

   1. 语法：flex：flex-grow flex-shrink flex-basis
   2. flex：flex-grow（取值正整数），占用弹性容器主轴方向剩余部分的百分比

5. 如何改变主轴方向

   1. flex-direction:row(默认)/column（主轴方向变成垂直，侧轴方向变成水平）

6. 弹性盒子在弹性容器内换行问题

   1. 默认情况下，弹性容器为flex-wrap：no-wrap；表现的效果为，弹性盒子改变了width挤压在弹性容器的第一行
   2. 利用flex-wrap：wrap，可以实现保证弹性盒子在大小不变情况下，排满弹性容器一行后，实现自动换行的效果；
   3. 调节不同行的排列方式align-content
      1. 属性值除了没有align-content：space-evenly，其余属性值与justify-content相同