网页布局中的flex

桐叶~

已于 2023-11-28 21:37:42 修改

阅读量503

点赞数 13

分类专栏： # web移动端文章标签： css css3 前端 html

于 2023-11-28 21:35:42 首次发布

本文链接：https://blog.csdn.net/m0_57851747/article/details/134676319

版权

web移动端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

flex布局

一.认知flex布局
二.flex模型构成
三.flex主轴对齐方向
四.flex侧轴对齐方式
五.flex伸缩比

一.认知flex布局

Flex布局也叫弹性布局，是一种浏览器提倡的布局模型。布局网页更简单、灵活，而且还能避免浮动脱标的问题

我们之前学的浮动也能进行网页布局，但会出现撑不开父级脱标等影响，说白了浮动最初的作用也就是用来进行文字环绕

但是有的浏览器(ie)旧版本不支持flex布局，这个时候用使用浮动就使用，这里推荐个网址可以查看浏览器版本能不能使用：https://caniuse.com/?search=flex

在这里插入图片描述

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

用法：给需要进行flex布局的子元素的父元素(亲爹)添加display:flex;子级就可以自动拉伸或挤压
视觉效果：子级一行排列/水平排列，因为默认主轴是水平方面，后面讲解结构会提及

注意点：flex布局的父元素的子元素，不会继承其父级宽度，这是与之前不同的一点，其宽度由内容撑开
体验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>
        .box {
            display: flex;
            height: 211px;
            border: 1px solid #000;
        }
        .box div {
            width: 222px;
            height: 111px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

效果如下（移动端）：
在这里插入图片描述

二.flex模型构成

组成部分：弹性内容，弹性盒子，主轴，侧轴/交叉轴
主轴默认水平方向，侧轴默认垂直主轴方向
在这里插入图片描述

三.flex主轴对齐方向

修改主轴对齐方式属性: justify-content

具体属性值（红色字体为常用）：
在这里插入图片描述
示例：

<!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>
        .box {
            display: flex;
            /* 居中子级盒子之间无间隔 */
            justify-content: center;
            /* 间距在子级盒子之间 */
            justify-content: space-between;
            /* 所有地方间距相等 */
            justify-content: space-evenly;
            /* 间距加在子级两侧，视觉效果就是子级之间的间距是父级两头距离的两倍 */
            justify-content: space-around;
            height: 211px;
            border: 1px solid #000;
        }
        .box div {
            width: 222px;
            height: 111px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

四.flex侧轴对齐方式

修改侧轴对齐方式属性：

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

注意点：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>
        .box {
            display: flex;
            /* 居中 */
            /* align-items: center; */
            /* 拉伸，默认值，去掉子级的高度便能看出效果，若有高度前后没变化 */
            /* align-items: stretch; */
            height: 211px;
            border: 1px solid #000;
        }
        .box div {
            /* 不设宽的话由内容撑开不会继承父级宽度，不设高的话其侧轴对其方式为默认值拉伸时会使其高度跟父盒子一致 */
            width: 222px;
            height: 111px;
            background-color: pink;
        }
        /* 单独设置某个弹性盒子的侧轴对齐方式 */
        .box div:nth-child(2)
        {
            align-self: center;
        }
        
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

五.flex伸缩比

属性flex: 值
取值：数值(整数)
注意：指的是占用父盒子剩余尺寸的份数
类似如下每部分内容都占一份(flex:1)，即四分之一(四部分内容都有flex:1)
在这里插入图片描述
使用规则：在flex布局中，子元素中添加flex:值，这个值就是父盒子剩余的尺寸，也就是除去没加flex属性的子元素的部分，然后再根据总共有多少子元素有flex属性，每个加有flex属性所占位置的计算公式：

$flex子元素所占剩余份数=\dfrac{对应子元素的flex值}{每个子元素中的所有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>
        .box {
            display: flex;
           
            height: 211px;
            border: 1px solid #000;
        }
        .box div {           
            margin: 0 21px;
            background-color: pink;
        }
        
        .box div:nth-child(1)
        {
            width: 51px;
        } 
       /* flex中的值表示所占父盒子剩余尺寸的份数，这里便各占除去第一个div后所剩尺寸的1/(1+1)=1/2 */
        .box div:nth-child(2){
            flex: 1;
        }
        .box div:nth-child(3){
            flex: 1;
        }
        
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>