3、flex弹性盒布局（flex:1?、水平垂直居中、三栏布局）

椰果uu

于 2024-06-02 17:14:20 发布

阅读量1.2k

点赞数 30

分类专栏：面试八股 CSS学习笔记文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_73560798/article/details/139392124

版权

CSS学习笔记同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

面试八股

10 篇文章 0 订阅

订阅专栏

一、flex布局

任何一个容器都可以指定为 Flex 布局。块元素，行内元素即可。

div{
display: flex;
}
span{
display: inline-flex;
}

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

二、flex属性

父容器属性

1.justify-content 主轴对齐方式

2. align-items 侧轴对齐方式

（弹性盒子在侧轴没有尺寸才能拉伸）

3. flex-direction 修改主轴方向

4.flex-wrap换行

5.align-content 行的对齐方式

对单行弹性盒子不生效

项目属性：

flex:1？代表什么？

flex-grow：1；flex-shrink:1; flex-basis:0%;

表示子项目将会占用容器中所有可用的剩余空间，实现均匀分布。

flex-grow：1。代表项目将占用容器的剩余空间，并按比例进行分配。默认为0代表不会增长
flex-shrink:1。代表项目将在空间不足时按比例缩小。默认为1.
flex-basis:0%。代表初始大小为0。默认auto代表项目根据内容决定大小

三、实现未知宽高元素水平垂直居中

（1）flex布局

父盒子开启flex弹性布局，设置justify-content: center;align-items: center;

    <style>
        .container{
            display: flex;
            /* 主轴对齐方式 */
            justify-content: center;
            /* 侧轴对齐方式 */
            align-items: center;
            width: 100%;
            height: 300px;
            background-color: yellow;
        }
        .item{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>

（2）绝对定位+位移+transform

子绝父相。子向右下移动父元素的一半，再利用transform.

top: 50%;left: 50%; transform: translate(-50%,-50%);

transform: translate(-50%, -50%);:

translate 函数用于移动元素。负值表示向左（对于X轴）和向上（对于Y轴）移动。
translate(-50%, -50%) 将元素向左移动其自身宽度的50%，并向上移动其自身高度的50%。
由于元素已经通过 top 和 left 属性定位到了其父元素的中心线（水平和垂直），这个 transform 调用实际上是将元素的中心移动到这些中心线上，从而实现了真正的水平垂直居中。

.container{
            position: relative;
            width: 100%;
            height: 500px;
            background-color: yellow;
        }
        .item{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 100px;
            height: 100px;
            background-color: green;
        }

（3）绝对定位+margin

子绝父相。设置子的top left bottom right都相等，margin设置为auto

.container{
            position: relative;
            width: 500px;
            height: 500px;
            background-color: yellow;
        }
        .item{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 100px;
            height: 100px;
            background-color: green;
        }

（4）text-align

父盒子设置行高等于高，tex-talign：center.使得其水平居中

子盒子开启display:inline-block,设置vertical-align:middle.使得行内块元素垂直居中。

  .container{
            line-height: 500px;
            text-align: center;
            width: 500px;
            height: 500px;
            background-color: yellow;
        }
        .item{
            display: inline-block;
            /* vertical-align用于行内元素的垂直对齐方式 */
            vertical-align: middle;
            width: 100px;
            height: 100px;
            background-color: green;
        }

四、三栏布局

（1）flex布局

body中按照左中右排列顺序。

父盒子dispaly:flex，左右设置固定大小宽高，中间盒子flex1。

<style>
        .container{
            display: flex;
        }
        .left{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        .middle{
            flex: 1;
           /*  height: 200px;*/
            background-color: green;
        }
        .right{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
</body>

（2）圣杯布局

1.按照中左右顺序排列。

2.首先给这三个div都给一个float: left，让它们均左浮动。设置左右固定大小，中间宽度100%。这时左边盒子和右边盒子都在第一行。

3.设置左盒子的margin-left: -100%，把左盒子拉上来，调整左盒子的浮动位置到中间盒子的左侧。再设置右盒子的margin-left: - 右盒子宽度px，把右盒子拉上来，调整右盒子的浮动位置到中间盒子的右侧。把两个盒子拉到第一行。

4.此时的布局基本出来了，但是中间盒子的左右两侧会被左右两个盒子覆盖掉，此时我们要通过相对定位来避免覆盖。给左右盒子position: relative，再分别设置它们的left和right移动他们,并且控制父元素的padding来为左右两边留白。

margin-left:-100%:往左边移动父元素宽度的100%

margin-left:-200px :往左边移动负数 -宽度，能把第二行的拉到第一行最右边。

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            padding-left: 300px;
            padding-right: 200px;
            height: 200px;
        }
        .middle{
            float: left;
            width: 100%;
            height: 200px;
            background-color: green;
        }
        .left{
            float: left;
            width: 300px;
            height: 200px;
            background-color: yellow;
            /* 左移 */
            margin-left: -100%;
            position: relative;
            left: -300px;
        }
        .right{
            float: left;
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-left: -200px;
            position: relative;
            right: -200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="middle"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

（3）双飞翼布局

1.按照中左右顺序排列。

2.首先给这三个div都给一个float: left，让它们均左浮动。设置左右固定大小，中间宽度100%。这时左边盒子和右边盒子都在第一行。

3.设置左盒子的margin-left: -100%，把左盒子拉上来，调整左盒子的浮动位置到中间盒子的左侧。再设置右盒子的margin-left: - 右盒子宽度px，把右盒子拉上来，调整右盒子的浮动位置到中间盒子的右侧。把两个盒子拉到第一行。

4.在双飞翼布局中，避免左右盒子被覆盖是通过设置中间盒子内部的inner-middle的左右margin来实现的。

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .middle{
            float: left;
            width: 100%;
            height: 200px;
            background-color: green;
        }
        .inner-middle{
            margin-left: 300px;
            margin-right: 200px;
        }
        .left{
            float: left;
            width: 300px;
            height: 200px;
            background-color: yellow;
            /* 左移 */
            margin-left: -100%;
        }
        .right{
            float: left;
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-left: -200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="middle">
            <div class="inner-middle"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

（4）float浮动

排列顺序：左右中。

左右设置固定大小和左右浮动，中间自适应overflow:hidden。（或者中间设置对应方向的margin值。

<style>
        .left{
            float: left;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        .center{
            overflow: hidden;
            height: 200px;
            background-color: green;
        }
        .right{
            float: right;
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </div>

圣杯布局对比双飞翼布局

双飞翼布局好处

（1）主要的内容先加载的优化。

（2）兼容目前所有的主流浏览器，包括IE6在内。

（3）实现不同的布局方式，可以通过调整相关CSS属性即可实现。

对比

（1）都是左右栏定宽，中间栏自适应的三栏布局，中间栏都放到文档流前面，保证先行渲染。

（2）解决方案基本相似：都是三栏全部设置左浮动float：left,然后分别解决中间栏内容被覆盖的问题。

（3）解决中间栏内容被覆盖问题时，圣杯布局设置父元素的padding,双飞翼布局在中间栏嵌套一个div,内容放到新的div中，并设置margin，实际上，双飞翼布局就是圣杯布局的改进方案。

（5）绝对定位布局 position+margin

排列顺序：左右中

子绝父相。左右两栏固定大小，设置绝对定位，设置右栏的位置利用top right。中间设置对应方向的marginleft right值。

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            position: relative;
        }
        .left{
            position: absolute;
            width: 300px;
            height: 200px;
            background-color: yellow;
        }
        .right{
            position: absolute;
            top: 0;
            right: 0;
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        .middle{
            height: 200px;
            margin-left: 300px;
            margin-right: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="middle"></div>
    </div>
</body>

（6）Grid网格布局

排列顺序：左中右

.container{
display: grid;
width: 100%;
/* 行高 */
grid-template-rows: 100px;
/* 列属性左中右*/
grid-template-columns: 300px auto 200px;
}

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            display: grid;
            width: 100%;
            /* 行高 */
            grid-template-rows: 100px;
            /* 列属性 */
            grid-template-columns: 300px auto 200px;
        }
 
        .left{
            background-color: yellow;
        }
        .middle{
            background-color: green;
        }
        .right{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
</body>

椰果uu

关注

30
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
3、flex弹性盒布局（flex:1?、水平垂直居中、三栏布局）

任何一个容器都可以指定为 Flex 布局。块元素，行内元素即可。div{span{注意，设为 Flex 布局以后，子元素的floatclear和属性将失效。
复制链接

扫一扫