flex弹性布局 | 青训营笔记

Aa_Lee
120 阅读7分钟

flex弹性布局 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第1天

传统意义上使用float+position进行布局，如今，为了使页面布局更加灵活，开始使用弹性布局：flex弹性布局，顾名思义，可以根据页面的大小动态的显示页面的内容。接下来我将用通俗的语言总结flex 的使用方法以及一些小的案例。

1.基本概念

flex布局首先要确定父元素，即容器（flex container），所有的flex布局都是在预先确定好的父元素中进行排布，因此首先要确定好父元素，其中的子元素叫做Flex项目(flex item)简称项目

2.容器的属性

首先写下默认的html代码

 <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="son3"></div>
    </div>

基础 css 样式 当父元素使用 display: flex; 时则表示开启flex布局模式

 .father{
            width: 300px;
            height: 300px;
            background-color: red;
            display: flex;
        }
        .father div{
            width: 90px;
        }
        .son1{
            color: antiquewhite;
        }
        .son2{
            color: yellow;
        }
        .son3{
            color: orange
        }

2.1 flex-direction

2.1.1 指定项目（flex item）在父元素中的排列顺序，默认为行

image-20220808234446822.png

son1.2.3为div，块级元素，原本该独占一行，但父元素开启flex布局后，子元素会默认按行排列

2.1.2 设置为colum

.father{
    flex-direction: column;
}

效果如图：son1.2.3按照列来排布

image-20220808234907130.png

2.1.3 column-reverse,row-reverse

在原先的排列顺序基础上将排列顺序倒置

2.2 flex-wrap

当父元素（direction方向）的长度小于子元素该方向长度之和时，可以使用此api

选择1：flex-wrap: wrap;

如图：子元素每一个长度为150px，一共3个则总长为450px,而父元素总长为300px,因此第三个元素会自动换行

image-20220808235512071.png

选择2：flex-wrap: nowrap;

如图，虽然设定子元素长度为150px，但是没有设置换行，因此将每个子元素从150px压缩至100px，这就是弹性布局。

image-20220808235712634.png

2.3 flex-flow

此属性是direction和wrap的简写形式

使用方法： flex-flow:flex-direction flex-wrap;

eg:

.father{
    flex-flow:row wrap;
}

2.4 justify-content

定义了项目在主轴上的对齐方式

共有5个值：

flex-start：默认值左对齐 flex-end：右对齐 center：居中 space-between：两端对齐，项目之间的间隔都相等 space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

举例

.father{
     justify-content: space-between;
}

设置父元素长300px，子元素长50px：则两端对齐，项目之间的间隔都相等

其他效果根据需要可自行选择

image-20220809000406267.png

2.5 align-items

定义项目在交叉轴上如何对齐

flex-start：交叉轴的起点对齐 flex-end：价差周的终点对齐 center：交叉轴的中点对齐 baseline：项目的第一行文字的基线对齐 stretch：默认值，如果项目未设置豪赌或者auto，将占满整个容器的高度

举例

.father{
     align-items: center;
}

如图，三个元素在父元素的中线依次向右排列，同样，若是flex-start则在起点对其，即左上角

image-20220809000713474.png

2.6 align-content

定义了多跟轴线的对齐方式，如果项目只有一根轴线，该属性不起作用

主要属性有

flex-start：与交叉轴的起点对齐 flex-end：与交叉轴的终点对齐 center：与交叉轴的中点对齐 space-between：与检查周两端对齐，轴线之间的间隔平均分布 space-around，没跟轴线两侧的间隔都相等。所以，轴线之间的间隔与轴线与边框的的间隔大一倍 strech：默认值轴线占满整个交叉轴

3.项目属性

3.1 order

定义了项目的排列顺序，数值越小，排列于考前，默认为0

3.2 flex-grow

定义了项目的放大比例，默认为0，如果存在剩余控件，也不放大

双飞翼布局就是根据此属性设置

3.3 flex-shrink

定义了项目的缩小比列，默认为1，如果空间不足，该项目将缩小

3.4 flex-basis

定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间，它的默认值为auto，即项目的本来大小

3.5 flex

是flex-grow属性flex-shrink属性和flex-basis属性的简写，默认值为 0 1 auto ，后两个属性可选

3.6 align-self

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

4.实例使用

4.1双飞翼布局实现

最终效果

image-20220809001424917.png

html结构

<body>
    <div class="box1">
​
    </div>
    <div class="box2">
        <div class="box21"></div>
        <div class="box22"></div>
        <div class="box23"></div>
    </div>
    <div class="box3">
​
    </div>
</body>

解析：将body看做一个父元素，并使用flex布局，将方向设置为列

设置好box1，box3的固定高度后将box2的flex设置为1，则box2将获得页面总高度-100px的高度

box2即中间这一块，与body的设置方法同理,只是将flex-direction改成了row

html,body{
            display: flex;
            flex-direction: column;
            height: 100%;
            
        };
.box1,.box3{
            width: 100%;
            height: 50px;
            background-color: #bfa;
            
        }
        .box2{
            width: 100%;
            height: 50px;
            display: flex;
​
            flex: 1;
            background-color:pink;
        }
        .box21,.box23{
            width: 200px;
            background-color: orange;
        }
        .box22{
            width: 100px;
            flex: 1;
        }

4.2 骰子案例

如图,实现如图所示的9种位置

image-20220809002204432.png

html结构: 每一个cintainer代表一种结构 circle代表其中的小黑点

<body>
    <div class="container1">
        <div class="circle"></div>
    </div>
    <div class="container2">
        <div class="circle"></div>
    </div>
    <div class="container3">
        <div class="circle"></div>
    </div>
    <div class="container4">
        <div class="circle"></div>
    </div>
    <div class="container5">
        <div class="circle"></div>
    </div>
    <div class="container6">
        <div class="circle"></div>
    </div>
    <div class="container7">
        <div class="circle"></div>
    </div>
    <div class="container8">
        <div class="circle"></div>
    </div>
    <div class="container9">
        <div class="circle"></div>
    </div>
    
</body>

css结构

body{
            display: flex;
        }
        [class^="container"] {
            margin: 16px;
            padding: 4px;
            background-color: #e7e7e7;
            width: 104px;
            height: 104px;
            object-fit: contain;
            box-shadow: 
                inset 0 5px white,
                inset 0 -5px #bbb,
                inset 5px 0 #d7d7d7,
                inset -5px 0 #d7d7d7;
                border-radius: 10%;
                display: flex;

        }

        /* 默认左上 */
        [class^="circle"]  {
            display: block;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin: 4px;
            background-color: #333;
            box-shadow: inset 0 3px #111, inset 0 -3px #555;
        }
        .container2{
            justify-content:center;
        }
        .container3{
            justify-content:flex-end ;
        }
         .container4 {
            /* flex-direction:column; */
            align-items:center;

        } 
        .container4 {
            align-items:center;
            justify-content:center;

        } 
        .container5 {
            align-items:center;
            justify-content:flex-end;

        } 
        .container6 {
            align-items:flex-end;
        } 
        .container7 {
            align-items:flex-end;
            justify-content:center;
        } 
        .container8 {
            align-items:flex-end;
            justify-content:flex-end;
        }

4.3 进阶：多点骰子案例

image-20220809002544820.png html结构：

<body>
    <div class="container1">
      <div class="circle"></div>
    </div>
    <div class="container2">
      <div class="circle"></div>
      <div class="circle c2"></div>
    </div>
    <div class="container3">
      <div class="circle c31"></div>
      <div class="circle c32"></div>
      <div class="circle c33"></div>
    </div>
    <div class="container4">
      <div class="row">
        <div class="circle c41"></div>
        <div class="circle c42"></div>
      </div>
      <div class="row">
        <div class="circle c43"></div>
        <div class="circle c44"></div>
      </div>
    </div>

    <div class="container5">
      <div class="row">
        <div class="circle"></div>
        <div class="circle"></div>
      </div>
      <div class="row1">
        <div class="circle"></div>
      </div>
      <div class="row">
        <div class="circle"></div>
        <div class="circle"></div>
      </div>
    </div>

    <div class="container6">
      <div class="row">
        <div class="circle"></div>
        <div class="circle"></div>
      </div>
      <div class="row">
        <div class="circle"></div>
        <div class="circle"></div>
      </div>
      <div class="row">
        <div class="circle"></div>
        <div class="circle"></div>
      </div>
    </div>
  </body>

css样式：

body {
        display: flex;
      }
      [class^="container"] {
        margin: 16px;
        padding: 4px;
        background-color: #e7e7e7;
        width: 104px;
        height: 104px;
        object-fit: contain;
        box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7,
          inset -5px 0 #d7d7d7;
        border-radius: 10%;
        display: flex;
      }

      /* 默认左上 */
      [class^="circle"] {
        display: block;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        margin: 4px;
        background-color: #333;
        box-shadow: inset 0 3px #111, inset 0 -3px #555;
      }
      .container2 {
        justify-content: space-between;
      }
      .c2 {
        align-self: flex-end;
      }
      .container3 {
        justify-content: space-between;
      }
      .c32 {
        align-self: center;
      }
      .c33 {
        align-self: flex-end;
      }
      .container4 {
  justify-content: space-between;
      }
      .container4 .row{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .container5{
        justify-content: space-between;
      }
      .container5 .row{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .row1{
        align-self: center;
      }
      .container6{
        
        flex-direction: column;
        justify-content: space-between;
      }
      .container6 .row{
          display: flex;
          justify-content: space-between;
      }

进阶案例需要仔细理解，搞清楚每一个flex属性的含义

总结

传统布局：基于盒模型，依赖 display属性 、position属性 、float属性；

flex布局：flex 是 flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

设为display:flex的元素称为"容器"，它的子元素称为"项目"。需要注意的是，容器设为 flex 布局以后，子元素的float、clear和vertical-align属性将失效；\

为什么要确定主轴和侧轴？

主轴和侧轴是通过flex-direction确定的(默认是row) 之所以要确定主轴，是因为要确定项目的对齐方向：

如果flex-direction是row或者row-reverse，那么主轴就是justify-content；

如果flex-direction是column或者column-reverse,那么主轴就是align-items.

注意：如果你的元素后续需要js操作显示隐藏，切换display:block,display:none功能的时候就不能使用flex了。

avatar
文章
阅读
粉丝