web前端基础——flex布局

原创已于 2022-03-10 18:53:26 修改 · 787 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css #css3

于 2022-03-09 20:10:37 首次发布

web前端基础专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了Flex布局模型，包括其构成、主轴和侧轴对齐方式，以及弹性盒子的伸缩比、排列方向和换行设置。通过实例代码展示了如何使用justify-content和align-items属性实现元素在主轴和侧轴上的对齐，以及如何通过flex属性控制弹性盒子的伸缩比例。此外，还讨论了flex-direction用于改变元素排列方向和flex-wrap属性用于弹性盒子换行的方法。

1、简介

Flex布局/弹性布局是一种浏览器提倡的布局模型，使用FLex布局网页更加简单、灵活，且可以避免浮动脱标的问题

2、Flex布局模型构成

基于Flex精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生，Flex布局非常适合结构化布局

使用方式：
父元素（亲爹）添加属性display:flex，子元素可以自动的挤压或者拉伸

组成部分：

弹性容器
弹性盒子
主轴（默认在弹性容器中心水平方向，弹性盒子默认沿着主轴排列）
侧轴/交叉轴（默认在中心垂直方向）

3、Flex主轴对齐方式

使用justify-content属性调节元素在主轴的对齐方式

属性值	作用
flex-start	默认值，起点开始依次排列
flex-end	终点开始依次排列
`center`	沿主轴居中排列
`space-around`	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子的两侧
`space-between`	弹性盒子沿主轴均匀排列。空白间距均分在相邻盒子之间
`space-evenly`	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

justify-content:center实现效果：居中
在这里插入图片描述

justify-content:space-between;实现效果：间距在弹性盒子(子级)之间
在这里插入图片描述
justify-content:space-around;实现效果：子级之间的距离是父级两头距离的2倍

justify-content:space-evenly;实现效果：所有地方的间距都相等
在这里插入图片描述

样例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主轴对齐方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            display: flex;
            /* 居中 */
            justify-content: center;
            /* 间距在弹性盒子(子级)之间 */
            justify-content: space-between;
            /* 所有地方的间距都相等 */
            justify-content: space-evenly;
            /* 间距加在子级的两侧 */
            /* 视觉效果: 子级之间的距离是父级两头距离的2倍 */
            /* justify-content: space-around; */
            height: 200px;
            margin: auto;
            border: 1px solid #000;
        }
        
        .box div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>

4、Flex侧轴对齐方式

使用align-items调节元素在侧轴（交叉轴）的对齐方式

修改侧轴对齐方式的属性：

align-items（添加到弹性容器）
align-self:控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

属性	作用
flex-statrt	默认值，起点开始依次排列
flex-end	终点开始依次排列
`center`	沿着侧轴居中排列
`stretch`	默认值，弹性盒子沿着主轴线被拉伸至铺满容器

align-items:center实现效果：垂直居中
在这里插入图片描述

align-items:stretch实现效果：拉伸,默认值(现有状态,测试的时候去掉子级的高度)
在这里插入图片描述

样例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侧轴对齐方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            display: flex;
            /* 居中 */
            align-items: center;
            /* 拉伸,默认值(现有状态,测试的时候去掉子级的高度) */
            align-items: stretch;
            height: 300px;
            margin: auto;
            border: 1px solid #000;
        }
        
        .box div {
            /* width: 100px; */
            /* height: 100px; */
            background-color: pink;
        }
        /* 单独设置某个弹性盒子的侧轴对齐方式 */
        
        .box div:nth-child(2) {
            align-self: center;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1111</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>

注意：
弹性盒子不给高度时，侧轴方式不给值或者给stretch时，弹性盒子会拉伸至和父级一样高；当弹性盒子给了高或者侧轴对齐方式不再是stretch时，弹性盒子的高度和内容一样高

在这里插入图片描述

5、Flex中弹性盒子的伸缩比

属性：flex:值

取值分类：数值（整数）

注意：值是占用父盒子的剩余尺寸

6、Flex改变元素排列方向

使用flex-direction改变元素排列的方向

主轴默认是水平方向，侧轴默认是垂直方向
修改主轴方向属性：flex-direction

取值分类：

属性值	作用
row	行，水平（默认值）
`column`	列，垂直
row-reverse	行，从左向右
column-reverse	列，从下向上

7、Flex弹性盒子换行

使用flex-wrap:wrap;实现弹性盒子多行排列（自动换行）效果

flex-wrap默认值是nowrao不换行显示

调整行的对齐方式：align-content属性，其取值与justify-content基本相同

测试代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性盒子换行</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            display: flex;
            /* 默认值, 不换行 */
            /* flex-wrap: nowrap; */
            /* 弹性盒子换行 */
            flex-wrap: wrap;
            /* 调节行对齐方式 */
            justify-content: space-around;
            /* align-content: center; */
            /* align-content: space-around; */
            align-content: space-between;
            height: 300px;
            border: 1px solid #000;
        }
        
        .box div {
            width: 100px;
            height: 80px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
    </div>
</body>

</html>