flex弹性布局基础使用 - 2020

FLEX布局(弹性布局)

说明

• flex容器（父容器）：使用disply:flex
• 项目（子容器）：flex容器中的子元素就是项目，不包括孙子元素
• 默认主轴方向时x轴 row 横向

    <div class="parent">  <!--父-->
      <span class="son">  <!--子-->
        <a class="grandson"></a> <!--孙子-->
      </span>
    </div>

父元素常用属性（容器）

1. display
   • 作用：指定flex
   • 取值：flex | inlin-flex
   • flex: 讲对象作为弹性伸缩盒子展示，相当于块级元素，有默认宽度100%
   • inline-flex：佳能对象作为内联块级弹性伸缩盒子展示，即行内元素，没有默认宽度

// 承接上面代码块继续写
.parent{
  display: flex;
}

2. flex-direction
   • 作用，指定容器的主轴方向，即子元素排列放上，默认是row横向
   • 取值：row | row-reverse | column | column-reverse
   • row：默认值，子元素横向，在父元素内按照从左向右排列
   • row-reverse：子元素横向，在父元素内按照从右向左排列
   • column：子元素竖直方向排列，在父元素内按照从上向下排列
   • column-reverse：子元素竖直方向排列，在父元素内按照从下向上排列

.parent{
  display: flex;
  flex-direction: column; /*竖直方向排列*/
}

3. flex-wrap
   • 作用：描述如果一个父元素中的子元素排列不下，是否换行，若不换行，则会等比缩小
   • 取值：nowrap | wrap | wrap-reverse
   • nowrap: 默认不换行，会压缩子元素
   • wrap：换行，排不开后的元素换行展示
   • wrap-reverse：换行，排不开以后，在前面的元素排到下一行

.parent{
  display: flex;
  flex-direction: column; /*竖直方向排列*/
  flex-wrap: nowrap; /* 子元素不换行*/
}

4. flex-flow
   • 作用：flex-direction和flex-wrap合并缩写
   • 取值：flex-direction | flex-wrap

  .parent {
    display: flex;
    flex-direction: column; /*竖直方向排列*/
    flex-wrap: nowrap; /* 子元素不换行*/
  }
    /*和上面写法一样*/ 
  .parent {
    display: flex;
    flex-flow: column wrap;
  }

5. justify-content
   • 作用：子元素在主轴方向的对齐方式
   • 取值：flex-start | flex-end | center | space-between | space-around
   • flex-start：默认子元素在父元素主轴开始位置对齐
   • flex-end：默认的是子元素在父元素从主轴结束位置对齐
   • center：居中对齐，项目形成的总宽度不变
   • space-between：两端对齐，中间间隔宽度一样
   • space-around：所有项目的两侧间隔相等，主轴两端会留边

  .parent {
    display: flex;
    flex-direction: column; /*竖直方向排列*/
    flex-wrap: nowrap; /* 子元素不换行*/
    justify-content: center; /*子元素在主轴方向居中对齐*/
  }

6. align-items
   • 作用：定以辅轴（与主轴垂直的方向）的对齐方式
   • 取值：flex-start | flex-end | center | baseline | stretch
   • flex-start：辅轴的开始位置对齐
   • flex-end：辅轴的结束位置堆砌
   • center：辅轴居中
   • baseline：基线对齐，文字第一行对齐
   • stretch：（单词意思是弹性、拉伸）默认值！！如果项目未设置高度或者设置为auto，将沾满整个容器的高度（自动填充）

  .parent {
    display: flex;
    flex-direction: column; /*竖直方向排列*/
    flex-wrap: nowrap; /* 子元素不换行*/
    justify-content: center; /*子元素在主轴方向居中对齐*/
    align-items:center; /*子元素在辅轴方向居中对齐，结合上面一条可以实现子元素位于父元素中央*/
  }

7. align-content
   • 作用定义了辅轴（必须换行的辅轴）的对齐方式
   • 说明：如果子元素只有一行，该属性不起作用，如果wrap换行了，那么才有作用
   • 取值：flex-start | flex-end | center | space-between | space-around | stretch
   • flex-start：所有轴线都是从头开始，辅轴开始位置开始，主轴横轴的话，就是上对齐
   • flex-end：从尾开始，辅轴结束位置开始
   • center：所有从中间开始
   • space-between：多条轴线上下两端对齐
   • space-around：多条轴线上下两端分散对齐，上下两侧留白
   • stretch：默认!高度自动填充拉伸

  .parent {
    display: flex;
    flex-direction: column; /*竖直方向排列*/
    /*flex-wrap: nowrap; !* 子元素不换行*!*/
    justify-content: center; /*子元素在主轴方向居中对齐*/
    /*align-items:center; !*子元素在辅轴方向居中对齐，结合上面一条可以实现子元素位于父元素中央*!*/
    flex-wrap: wrap; /* 子元素换行*/
    align-content: center; /*换行子元素居中，注意上一行css*/
  }

子元素常用的属性

• 在标注父元素disply：flex的子元素中使用

1. order
   • 作用：定义项目的排列顺序
   • 取值：integer

  .son{
    order: 1;
  }

2. flex-grow
   • 作用：定义子元素的放大比例，默认是0，即如果存在剩余空间，也不放大
   • 取值：> 0
   • 默认值为0，默认不会自动放大
   • 如果都设置为1，那么所有项目会平分剩余的空间
   • 如果有三个子元素，一个设置为2，剩余为1，那么项目2的就会占一半，剩下两个会各占四分之一。
   • 如果有三个子元素，一个width设置为200，剩余都为1，那么剩余的会平分父元素宽度-200之外的空间

  .son{
    order: 1;
    flex-grow: 2; /*会按比例分配*/
  }

3. flex-shrink
   • 作用：定义子元素的缩放比例，和grow相反
   • 取值：>0
   • 默认值为1，默认会自动缩小
   • 如果所有子元素都为1，当空间不足时候，都会等比例缩小
   • 如果有一个子元素为0，其他都为1，当空间不足时候，0不变，1都缩小

  .son{
    order: 1;
    /*flex-grow: 2; !*会按比例分配放大*!*/
    flex-shrink: 2; /*会等比缩小*/
  }

4. flex-basis
   • 作用：定以分配多余空间之前，子元素占据主轴空间，比width优先级高
5. flex
   • 作用：flex-grow、flex-shrink、flex-basis的简写
   • 默认值：0 1 auto
6. align-self
   • 作用：允许当前子元素有和其他子元素不一样的对齐方式，可以覆盖父元素的align-items属性
   • 取值：比align-items多了个auto
   • 默认值为auto，表示继承align-items属性

  .son{
    order: 1;
    /*flex-grow: 2; !*会按比例分配放大*!*/
    flex-shrink: 2; /*会等比缩小*/
    align-self: center; /*次子元素居中*/
  }