前端基础学习——页面布局之flex布局

Flex

1. flex-介绍

• 特点：相比于传统布局，代码少，布局快，对移动端兼容性好；
• 使用：移动端首选flex ,PC端 不考虑兼容情况可以使用flex；
• flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局 ；
• 思想：使用思想上和传统盒子完全不同，不要再想子元素是块级元素、行内元素等，
• 语法：加在父级容器上面

display:flex;

整体的flex布局只是对整体下的子元素有flex布局的影响，单独子元素形成新的flex布局，需要重新写display:flex;

2.容器属性

2.1. flex-direction

• 作用：确认主轴的方向。
• 特点：子元素会在主轴上进行排布，按照主轴选择正方向进行排布。
• 思想：父级盒子设置flex布局，子元素设置宽高就生效。

/* 1.主轴的选择 */
/* row:选择水平向右为主轴，默认值*/
/* 特点：子元素会在主轴上，按照主轴正方向进行排布 */
flex-direction: row; 
/* 主轴：行，从右到左 */
flex-direction: row-reverse; 

/* 主轴：列，从上到下 */
flex-direction: column; 
/* 主轴：列，从下到上 */
flex-direction: column-reverse;

2.2. justify-content

• 作用：控制子元素在主轴上对齐方式；
• 特点：如果要使用该属性，先要把主轴的去向决定；

/* 1.主轴的选择 */
/* row:主轴：行，选择水平向右 */
/* justify-content 控制子元素在主轴上排布方式 */
/* flex-start：默认值，从主轴头部开始 */
justify-content: flex-start; 
/* flex-end: 从尾部开始对齐 */
justify-content: flex-end; 
/* center：居中对齐 */ 
justify-content: center; 

/* space-around:剩余空间环绕在子元素周围*/
justify-content: space-around; 
/*space-between:两端对齐，项目之间的间隔都相等。*/
justify-content: space-between; 

2.3. flex-wrap

• flex-wrap：控制子元素是否换行，默认不换行，子元素在主轴上进行合理压缩；

/* 默认不换行 */
flex-wrap: nowrap;
/* 特点：如果子项目的加起来的总宽超过父亲的宽度，子项目的宽度会被合理的压缩 */
/* wrap：换行，第一行在上方*/
flex-wrap: wrap;
/* wrap-reverse：换行，第一行在下方*/
flex-wrap: wrap-reverse;

2.4. flex-flow

• flex-flow：复合属性，确认主轴方向，控制是否换行。一般不用；

flex-flow: row wrap;

2.5. align-items

• 作用：控制子元素（项目）整体单行在侧轴上对齐方式；

/* 主轴选择row，侧轴默认：Y轴*/
/* flex-start : 从侧轴的头部开始对齐 */
align-items: flex-start;
/* 侧轴的尾部开始对齐 */
align-items: flex-end; 
/* 侧轴上居中对齐 */
align-items: center;
/* stretch：在侧轴方向上进行拉伸 */
/* 规则：如果在侧轴方向上进行拉伸，CSS设置子元素不能在侧轴方向有大小的设置 */
/* 如果子元素在侧轴方向有大小的设置，拉伸不生效 */
align-items: stretch; 

注意：

1. 属性align-items：控制的是单行；
2. 设置换行：变为多行；多行下，每一行为单行，控制的是每个的侧轴上的对齐方式；
3. 活动范围：侧轴对齐方式，就以每个单行的范围进行对齐；

.p {
    width: 800px;
    height: 600px;
    border: 1px solid #000;
    display: flex;
    /* 默认主轴：row */
    /* 默认不换行：元素会被合理的压缩 */
    flex-wrap: wrap;
    /* 侧轴对齐默认值；flex-start 侧轴头部*/
    /* 在侧轴方向进行拉伸 ，特点：不能设置控制侧轴方向的CSS属性大小 */
    align-items: stretch;
}

.son {
    width: 100px;
    /* height: 100px; */
    background-color: #ccc;
}

2.6. align-content

• 作用：控制子元素（多行）在侧轴上对齐方式

/* 默认不换行 */
flex-wrap: wrap;
/* 侧轴上单行默认值：flex-start，看成每个单行 */
align-items: flex-start;
/* ------------------------------------------------------- */
/* align-content: 控制多行对齐方式，把多行看成一个整体*/
/* 没有默认值 */
align-content: flex-start; 
/* 侧轴尾部对齐 */
align-content: flex-end;
/* 居中对齐 */
align-content: center; 
/* space-around：剩余空间，环绕 */
align-content: space-around;
/* 把剩余空间分到两个行之间 */
align-content: space-between;
/* 在侧轴上进行拉伸：*/
align-content: stretch; 

项目属性

3.1. flex

• 作用：flex划分主轴上剩余空间给子元素,设置flex:1；在主轴方向划分剩余空间；
• 份数：常规使用，用整数；把所有的子元素的份数加起来N份，剩余空间分成N份，再看每个子元素占有几份；
• %：常规使用，必须保证加起来是100%；

.s_1 {
    /* 控制子元素在主轴方向，去占有剩余空间，效果：我们可以直接通过属性flex设置宽度 */
    /* flex：数字（整数），占有的份数*/
    /* flex: 百分数，常规操作：保证所有的子元素的百分数加起来为100%，不然会出现问题 */
    flex: 20%;
    /* width: 100px; */
    height: 100px;
    background-color: #ccc;
}

.s_2 {
    flex: 20%;
    /* width: 100px; */
    height: 100px;
    background-color: #222;
}

• 使用场景：左右固定，中间随意拉伸（圣杯布局）；

.p {
    width: 100%;
    height: 100px;
    border: 1px solid #000;
    display: flex;
}

.left {
    width: 100px;
    height: 100px;
    background-color: #ccc;
}

.mid {
    /* 把主轴上剩余空间全部占有 吃掉 */
    flex: 2;
    height: 80px;
    background-color: pink;
}

.right {
    width: 100px;
    height: 100px;
    background-color: #ccc;
}

3.2. align-self

• 作用：控制单个项目（子元素）在侧轴上自己的对齐方式；

属性值	说明
flex-start	默认值，从上到下
flex-end	从下到上
center	垂直居中
stretch	拉伸

默认值为auto的特别之处：

• 默认值auto，如果父级设置了align-items ，auto继承父级元素上设置侧轴的对齐方式：align-items 属性；
• 如果父级没有设置align-items 属性，auto默认值会变为strecth；（注意侧轴方向上控制元素大小的CSS设置要注释掉）

.p {
    width: 800px;
    height: 600px;
    border: 1px solid #000;
    display: flex;
    /* align-items: center; */
}

.son {
    /* auto：默认值，如果父亲设置了 align-items，auto会继承父级的设置 */
    align-self: auto; 
    /* 规则： 如果没有设置 align-items，那么auto变为拉伸 stretch*/
    /* 拉伸规则：沿着哪个轴拉伸？侧轴，在侧轴方向不能有CSS控制大小的设置 */
    width: 100px;
    /* height: 100px; */
    background-color: #ccc;
}

• 子元素设置flex:1

    .son {
      /* width: 100px; */
      /* 主轴:把剩余空间均分掉 */
      flex: 1;
      /* align-self: auto; */
      /* 规则： 如果没有设置 align-items，那么auto变为 拉伸 stretch*/
      /* 拉伸规则：沿着哪个轴拉伸？侧轴，在侧轴方向不能有CSS控制大小的设置 */
      background-color: #ccc;
    }

3.3. order

• 作用：控制子元素的排布顺序，值越小，越前。可以取负值；

3.4. flex-grow

• 作用：属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
• 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间。
• 如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

3.5. flex-shrink

• 作用：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
• 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
• 如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

3.6. flex-basis

• 作用：定义了在分配多余空间之前，项目占据的主轴空间（main size）。
• 浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
• 它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

4. 固定定位

/* 固定定位 脱标，宽度失效*/
position: fixed;
/* 手动加100% */
width: 100%;
min-width: 320px;
max-width: 540px;