flex布局基础，附有例子代码

最新推荐文章于 2021-07-29 20:47:54 发布

原创最新推荐文章于 2021-07-29 20:47:54 发布 · 602 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#flex #css

flex笔记专栏收录该内容

2 篇文章

订阅专栏

本文介绍了CSS flex布局的基本概念，对比了传统布局与flex布局的优缺点，并详细讲解了flex布局的父项属性，包括flex-direction、justify-content、flex-wrap、align-items和align-content，以及子项属性如flex、align-self和order。通过实例代码展示了如何实现各种布局效果。

flex布局

1、传统布局与flex布局

传统布局

兼容性好
布局繁琐
局限性，不能在移动端很好的布局

flex弹性布局

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

2、flex初体验

<!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>
        div{
            display: flex;
            width: 80%;
            height: 300px;
            background-color:pink;
            justify-content: space-around;
        }
        div span{
            flex: 1;
            height:100px;
            background-color:cadetblue;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

效果：

在这里插入图片描述

3、flex布局原理

flex以为弹性布局，用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为fiex布局

当父盒子为flex布局以后，子元素的float、clear和vertical-align属性将失效
在上述例子中，div为flex父容器，span是子容器flex项目
子容器可以横向排列也可以纵向排列

通过父盒子添加flex属性，来控制子盒子的位置和排列方式

4、父项常见属性

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

4.1 flex-direction设置主轴方向

1、主轴与侧轴

在flex布局中，是分为主轴和侧轴两个方向

默认主轴方向是x轴方向，水平向右
默认侧轴方向是y轴方向，水平向下

2、属性值

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

例：对于上面那个页面，可以更改为如下所示，将三个span改为纵向排列

<style>
        div{
            display: flex;
            width: 800px;
            height: 300px;
            background-color:pink;
            justify-content: space-around;
            flex-direction: column;
        }
        div span{
            flex: 1;
            width: 150px;
            height:100px;
            background-color:cadetblue;
            margin-right: 5px;
        }
    </style>

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

使用这个属性之前一定要注意那个是主轴

属性值	说明
flex-start	默认值，从头部开始
flex-end	从尾部开始
center	主轴居中对齐
space-around	平分剩余空间
space-between	两边贴边，再平分空间

例：

.m-div{
            display: flex;
            width: 800px;
            height: 300px;
            background-color:pink;
            justify-content: space-between;
        }

例：垂直居中

.m-div{
            display: flex;
            width: 800px;
            height: 300px;
            background-color:pink;
            flex-direction: column;
            justify-content: center;
        }

4.3 flex-wrap子元素是否换行

默认情况下，会自动缩小盒子大小来把原本无法放在一行的元素放在一行上

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

例：

.m-div{
            display: flex;
            width: 800px;
            height: 300px;
            background-color:pink;
            flex-wrap: wrap;
        }

4.4 algn-items设置侧轴上的子元素的排列方法

属性值	说明
flex-start	默认值，从头部开始
flex-end	从尾部开始
center	主轴居中对齐
stretch	拉伸

.m-div{
            display: flex;
            width: 800px;
            height: 300px;
            background-color:pink;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
        }

例：拉伸，按照侧轴的高度进行拉伸

.m-div{
            display: flex;
            width: 800px;
            height: 300px;
            background-color:pink;
            flex-wrap: wrap;
            align-items: stretch;
        }

子盒子不要设置高度，不然就没法拉伸了

4.5 align-content 设置侧轴上的子元素的排列方法（多行）

设置子项在侧轴上的排列方式，并且只适用于子项出现换行的情况，这个属性在单行下是没有效果的

属性值	说明
flex-start	默认值，从侧轴头部开始
flex-end	从侧轴尾部开始
center	侧轴中间显示
space-around	子盒子在侧轴上平分空间
space-between	在侧轴上两边贴边，再平分空间
stretch	设置子项元素高度平分父元素高度

.m-div{
            display: flex;
            width: 800px;
            height: 300px;
            background-color:pink;
            flex-wrap: wrap;
            align-content: space-around;
        }

4.6 flex-flow复合属性

flex-flow:row wrap=flex-direction:row;+flex-wrap:wrap;

5、常见的子属性

flex子项目占的份数
align-self控制子项目自己在侧轴的排列方式
order属性定义子项的排列顺序（前后顺序）

5.1 flex子项目占的份数

flex属性定义子项目分配剩余空间，用flex来表示占多少份数

对于下面这个div中，我要中间的span所占的份数是旁边两个盒子的两倍

<div class="m-div">
        <span class="m-span1">1</span>
        <span class="m-span2">2</span>
        <span class="m-span1">3</span>
    </div>

样式定义如下：

 		.m-span1{
            flex:1;
            height: 150px;
            background-color:cadetblue;
        }
        .m-span2{
            flex: 2;
            background-color:darkseagreen;
        }

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

这个属性可以控制单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示集成与元素的align-items属性，没有父元素，则等同于stretch

.m-div{
            display: flex;
            width: 60%;
            height: 150px;
            background-color:pink;
            margin:0px auto;
            align-items: flex-end;
        }
        .m-span1{
            flex:1;
            height: 100px;
            background-color:cadetblue;
        }
        .m-span2{
            flex: 2;
            height: 50px;
            background-color:darkseagreen;
            align-self: start;
        }

效果：

在这里插入图片描述

5.3 order属性定义子项的排列顺序（前后顺序）

数值越小，排列越前，默认为0。

下列代码可以把第二个盒子放在第一个前面

 div span:nth-child(2){
            order:-1;
        }