【flex布局学习】

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

前端面试基本都会问到的一个点

flex布局表示弹性布局，可以为盒状模型提供最大的灵活性。

一、flex布局的优势

• 操作方便，布局极为简单，移动端应用很广泛
• PC端浏览器支持情况较差
• IE 11或更低版本，不支持或仅部分支持

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

二、flex布局常用属性

1.父项常见属性

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

1.1 flex-direction ：设置主轴的方向

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

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

<style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            flex-direction: row-reverse;
        }
        
        div span {
            /* width: 100px; */
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 3px;
        }
    </style>

将方向设置为从右到左

1.2 justify-content：: 设置主轴上的子元素排列方式

属性值	说明
flex-start	默认值，从头部开始 如果主轴是x轴，则从左到右
flex-end	从尾部开始排列
center	在主轴居中对齐(如果主轴是x轴，则水平居中)
space-around	平分剩余空间
space-between	先两边对齐 再平分剩余空间

div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            justify-content: space-between;
        }

设置主轴上子元素先贴边，再平分剩余空间

1.3 flex-wrap: 设置子元素是否换行（默认不换行）

如果装不下，会缩小子元素的宽度(高度)，放到父元素里面

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

没加换行

加了换行之后

1.4 align-content: 设置侧轴的子元素的排列方式（多行）

只能在子项出现换行的情况，在单行上没有效果。也就是必须有flex-wrap:wrap;

属性值	说明
flex-start	默认值，从头部开始 如果主轴是x轴，则从左到右
flex-end	从尾部开始排列
center	在主轴居中对齐(如果主轴是x轴，则水平居中)
space-around	平分剩余空间
space-between	先两边对齐 再平分剩余空间
stretch	设置子项元素高度平分父元素高度

1.5 align-items:设置侧轴上的子元素排列方式（单行）

在子项为单项（单行）时使用

属性值	说明
flex-start	默认值，从头部开始 如果主轴是x轴，则从上到下
flex-end	从尾部开始排列
center	在侧轴居中对齐(如果主轴是x轴，则垂直居中)
stretch	拉伸(但是子盒子不能给高度)

1.6 flex-flow:复合属性，相当于同时设置了flex-direction 和 flex-wrap

flex-flow:row wrap 

相当于

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

2.子项常见属性

• flex是flex-grow、flex-shrink 和 flex-basis 属性的简写属性
• align-self控制子项自己在侧轴的排列方式
• order属性定义子项的排列顺序(前后顺序)
• flex-grow属性规定某个 flex 项目相对于其余 flex 项目将增长多少
• fle-shrink属性规定某个 flex 项目相对于其余 flex 项目将收缩多少
• flex-basis属性规定 flex 项目的初始长度

2.1 flex属性：flex属性是flex-grow、flex-shrink 和 flex-basis 属性的简写属性

实例：圣杯布局

<style>
        div {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }
        
        div span:nth-child(1) {
            width: 100px;
            height: 150px;
            background-color: red;
        }
        
        div span:nth-child(2) {
            flex: 1;
            background-color: green;
        }
        
        div span:nth-child(3) {
            width: 100px;
            height: 150px;
            background-color: yellow;
        }
    </style>

1,3分别固定在左右两边，中间的2占满所有
实现div中3个span平均分配大小，则只用写

div span {
            flex: 1;
        }

2.2 align-self：控制子项自己在侧轴的排列方式

align-self允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性。
align-self默认值为auto，表示继承父元素align-items属性，如果没有父元素，则等同于stretch
align-self属性值和align-items属性值相同
例如将第二个盒子的侧轴设置成尾部对齐，其他为头部对齐

div {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 0 auto;
            align-items: flex-end;
        }
div span:nth-child(2) {
            align-self: flex-start;
            background-color: green;
        }

align-self属性示例

2.3 order：定义子项的排列顺序(前后顺序)

数值越小，排列越靠前，默认为0
例子：由于-1比0小，所以在前面。默认是0

div span:nth-child(2) {
            align-self: flex-start;
            background-color: green;
            order: -1;
        }

order实例

2.4 flex-grow属性规定某个 flex 项目相对于其余 flex 项目将增长多少

该属性值必须是数字，默认为0
例子：使第二个盒子增长速度是第一个2倍，第三个是3倍

.A {flex-grow: 1;}
.B {flex-grow: 2;}
.C {flex-grow: 3;}

2.5 fle-shrink属性规定某个 flex 项目相对于其余 flex 项目将收缩多少

该属性值必须是数字，默认为0
例子：使第二个盒子收缩速度是第一个2倍，第三个是3倍

.A {flex-shrink: 1;}
.B {flex-shrink: 2;}
.C {flex-shrink: 3;}

2.6 flex-basis属性规定 flex 项目的初始长度

默认值是auto，即自动。如果有设置width，占用空间就是width。如果没有设置，按照内容宽度。若同时设置width和flex-basis，则在渲染性能方面，将忽略width。
当剩余空间不足时，flex子项的实际宽度通常不是flex-basis的设定尺寸，因为当flex布局剩余空间不足时，默认会收缩
例如：将A的初始长度设置为70px，其他都为50px

.A {flex-basis: 70px;}

三、flex布局实例

1.用flex实现主轴方向靠左，侧轴垂直居中（腾讯云智面试题）

<style>
        div {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 0 auto;
            justify-content: flex-start;
            align-items: center;
        }
        
        div span {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>

2.设置如图样式（小米面试题）

设置position脱离文档流，使得呈现层叠效果；然后使用flex使得文字呈现垂直居中效果

<style>
        p {
            font-size: 70px;
            font-weight: bold;
        }
        
        .A {
            width: 200px;
            height: 200px;
            background-color: #ccc;
            color: blue;
        }
        
        .B {
            position: absolute;
            width: 200px;
            height: 200px;
            top: 150px;
            left: 50px;
            background-color: pink;
            color: red;
        }
        
        .center {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
    <body>

    <div class="A center">
        <p>A</p>
    </div>
    <div class="B center">
        <p>B</p>
    </div>


</body>

总结

flex布局的原理：
通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。