flex基础知识点+圣杯布局

最新推荐文章于 2024-02-15 12:46:07 发布

清守

最新推荐文章于 2024-02-15 12:46:07 发布

阅读量238

点赞数

分类专栏： HTML+CSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_43795844/article/details/126077664

版权

HTML+CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

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

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

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

属性值	作用
flex-start	默认值, 起点开始依次排列
flex-end	终点开始依次排列
center	沿侧轴居中排列
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>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 800px;
            height: 300px;
            margin: 0 auto;
            display: flex;
            background-color: plum;
        }

        .box>div {
        	//flex：1 就是多占一份的意思
            flex: 1;
            margin: 5px;
            width: 200px;
            background-color: palegreen;
        }

        .box>div:nth-child(2n) {
            flex: 2;
            background-color: peru;
        }
    </style>
</head>

<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

</html>

上面代码结果如下：
红色框中的是一份，flex：1 就是说本来是均等的六份，用了这个属性后，则该属性对应的盒子就多占一份，出现1：2的情况
在这里插入图片描述

圣杯布局：左右两边固定宽高，中间自适应

<!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>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100%;
            height: 60px;
            display: flex;
            background-color: paleturquoise;
        }

        .center {
            flex: 1;
            background-color: palegreen;
        }

        .left,
        .right {
            width: 60px;
            height: 60px;
            background-color: purple;
        }
    </style>
</head>

<body>

    <!-- 圣杯布局，左右固定宽高，中间自适应 -->
    <div class="box">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>

</html>