flex布局

2020-11-13 本文已影响0人 amanohina

flex布局体验

操作方便，布局非常简单，移动端应用非常广泛
PC端浏览器支持情况比较差
IE11或者更低的版本，不支持或者只支持一部分

建议：

PC端布局，还是最好使用传统布局
移动端或者不考虑兼容性问题的PC端页面布局，还是最好使用flex弹性布局

flex布局原理

弹性布局，为盒模型提供最大的灵活性，任何一个容器都可以被指定为flex布局
当父盒子设为flex布局，子元素的float，clear，vertical-align均会失效（效果比这三者更为精确）
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
采用flex布局的元素，称之为flex容器，所有子元素自动成为容器成员，称之为flex项目
flex布局原理：通过给父盒子添加flex属性，控制子盒子的位置和排列方式

flex常见属性

父项常见属性

flex-direction：设置主轴的方向
justify-content：设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式（多行
）
align-items：设置侧轴上的子元素排列方式（单行）
flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

flex-direction设置主轴的方向

主轴和侧轴

在flex布局里，是分为主轴和侧轴两个方向，同样的叫法有：行和列，X轴和Y轴

默认主轴方向就是x轴方向，水平向右
默认侧轴方向就是y轴方向，垂直向下
flex-direction决定主轴的方向（项目排列方向）
注意：主轴和侧轴是会变化的，就看flex-direction设置谁是主轴，剩下的就是侧轴。子元素就是跟着主轴来进行排列的。

属性值解释说明

row 默认值，从左到右

row-reverse 从右到左

column 从上到下

column-reverse 从下到上
row:
row-reverse:
column:
column-reverse:

属性值	解释说明
row	默认值，从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

justify-content主轴上子元素排列方式

justify-content属性定义了项目在主轴上的对齐方式

注意：使用这个属性之前一定要确定好主轴是哪一个

属性值	解释说明
flex-start	默认值，从头部开始，如果主轴是x轴那么就从左往右
flex-end	从尾部开始排列
center	在主轴居中对齐，（x轴的话就是水平居中）
space-around	平分剩余空间
space-between	先两边贴边，再平分剩余空间（重要）

（主轴为row的情况）：

flex-start:
flex-end:
center:
space-around:

-space-between:

flex-wrap设置子元素是否换行

默认情况下，项目都排在一条线（轴线）上
flex-wrap属性定义，flex布局中默认是不换行的

属性值解释说明

nowrap 默认值，不换行

wrap 换行
如果设置的是不换行，子元素个数过多，不够分摊父级容器的宽度，子元素会压缩自己的宽度，达到平摊的目的，比如：
设置换行的话：

属性值	解释说明
nowrap	默认值，不换行
wrap	换行

align-items侧轴上子元素排列方式（单行）

控制子项在侧轴（默认为y轴）上的排列方式
在子项为单行的时候使用

属性值解释说明

flex-start 默认值，从上到下

flex-end 从下到上

center 挤在一起居中（垂直居中）

stretch 拉伸

属性值	解释说明
flex-start	默认值，从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中）
stretch	拉伸

（主轴为x轴，即row）

flex-start:
flex-end:
center:
stretch:
（前提是去掉子元素的高度，让其自然拉伸）
为了展示效果还是加一条靠边水平平分
获得一个新的水平垂直居中的好办法：
在父盒子添加align-items:center与justify-content:center就可以实现水平垂直居中的效果了，方便又省事

 div {
            display: flex;
            width: 400px;
            height: 400px;
            background-color: pink;
            /* flex-direction: row; */
            justify-content: center;
            /* flex-wrap: wrap; */
            align-items: center;
        }
        span {
            width: 100px;
            height: 100px; 
            background-color: purple;
        }

效果图

align-content侧轴上子元素排列方式（多行）

设置子项在侧轴上的排列方式，只能用于子项出现换行的情况（多行），在单行下是没有效果的

属性值	解释说明
flex-start	在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴的中间进行显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分圣域空间
stretch	设置子项元素高度平分父元素高度

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            display: flex;
            width: 800px;
            height: 800px;
            background-color: pink;
            flex-direction: row;
            flex-wrap: wrap;    
            /* justify-content: center; */
        }
        span {
            width: 250px;
            height: 100px;
            margin-right: 10px;
            margin-bottom: 10px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
        <span>9</span>
    </div>
</body>
</html>

效果图

flex-start:
flex-end:
center:
space-around:
space-between:
stretch:

跟不设置的时候默认样式一样，因为给子元素设置了高度
取消子元素的高度属性之后

align-content与align-items区别：

align-items适应于单行情况，只有上对齐，下对齐，居中与拉伸
align-content适应于换行（单行情况下无效），可以设置上对齐，下对齐，居中，拉伸和平均分配剩余空间等属性值
总的来说就是单行找align-items，多行找align-content

flex-flow

它是flex-direction和flex-wrap属性的复合属性
比如：
flex-flow:row nowrap;

flex-flow:row nowrap;

与

flex-direction:row;
flex-wrap:nowrap;

是等效的

子项常见属性

flex属性（重要）

flex属性定义的是子项目分配父盒子的剩余空间，用flex来表示占有多少份数
属性值为数字，数字为1，表示占总份数的1份，默认值为0

.item {
  flex:<number>;/*default0*/
}

例子代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    section {
      display: flex;
      width: 60%;
      height: 80px;
      margin: 50px auto;
      background-color: pink;
    }
    section div:nth-child(1),section div:nth-child(3) {
      width: 80px;
      height: 80px;
      background-color: skyblue;
    }
    section div:nth-child(2) {
      flex: 1;
      height: 80px;
      background-color: green;
    }

    .box {
      display: flex;
      width: 60%;
      height: 80px;
      background-color: pink;
      margin: 0 auto;
    }
    .box span {
      flex: 1;
    }
    .box span:nth-child(2) {
      flex: 2;
      background-color: purple;
    }
  </style>
</head>
<body>
  <section>
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </section>
  <div class="box">
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
</body>
</html>

flex:2表示box大盒子下的三个span占了四份，其中，2占了两份

align-self与order属性

align-self属性表示允许单个项目有与其他项目不一样的对齐方式，可以覆盖掉父级元素的align-items属性
默认值是auto，表示继承父级元素的align-items属性，如果没有父级元素，等于stretch（拉伸）

   div {
            display: flex;
            width: 800px;
            height: 800px;
            background-color: pink;
            flex-flow: row wrap;   
            align-items: flex-start;
        }
        span {
            width: 250px;
            height: 100px;
            margin-right: 10px;
            margin-bottom: 10px;
            background-color: purple;
        }
        span:nth-child(2) {
            align-self: flex-end;
        }

    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

效果图

order属性定义项目的排列顺序
数值越小，排列越靠前，默认为0
注意：和z-index不一样

  span:nth-child(2) {
            /* align-self: flex-end; */
            /* 调整子项加载的顺序，默认值为0，如果想要往前提，属性值可以为负值 */
            order: -1;
            /* 如果前面的元素想要往后移动，属性值要比前面的都大 */
            order:1;
        }

每个子项的默认值都是0，只要是大于0或者小于0的负值都可以进行顺序的调整了

设置为1的情况，2跑到3后面了