实现简单的弹性布局

最新推荐文章于 2024-08-10 17:13:35 发布

谭谭�

最新推荐文章于 2024-08-10 17:13:35 发布

阅读量499

点赞数

本文链接：https://blog.csdn.net/tcc_liuyuan/article/details/117529742

版权

实现简单的弹性布局

一、flex布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
flex的具体详解可以参阅这篇教程：阮一峰老师的flex布局
用flex实现如下动画所演示的效果：
在这里插入图片描述

实例HTML代码如下所示：

<!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>flex-自适应布局</title>
</head>
<body>
    <div class="wrap">
        <div class="one">第一个元素中的内容</div>
        <div class="two">第二个元素中的内容</div>
        <div class="three">第三个元素中的内容</div>
    </div>
</body>
</html>

实例中一共有四个div标签，并且如果要让one、two、three三个元素实现如图这种响应式，display属性一定写它们的父元素wrap里具体的css代码如下所示：

        .wrap{
            width: 100%;
            height: 200px;
            display: flex;
        }
        .one{
            width: 200px;
            background-color: yellowgreen;
        }
        .two{
            flex: 2;
            background-color: paleturquoise;
        }
        .three{
            width: 200px;
            background-color: yellowgreen;
        }

在这里我所设置的第一个div和第三个div宽度是固定的值为200px，而第二个是自适应的。如果要三个div的自适应css可以写参考以下代码：

.wrap{
            width: 100%;
            height: 200px;
            display: flex;
        }
        .one{
            flex: 1;
            background-color: yellowgreen;
        }
        .two{
            flex: 2;
            background-color: paleturquoise;
        }
        .three{
            flex: 1;
            background-color: yellowgreen;
        }

二、使用position绝对定位

同样实现上述功能，这里使用的是将第一个和第三个div标签使用position的属性值absolute定位到页面的最左端和页面的最右端，然后中间div自适应。
具体的代码如下所示：

<!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 type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .ones{
            width: 200px;
            height: 200px;
            background-color: brown;
            position: absolute;
            top:0;
            left: 0;
        }
        .two{
            margin-left: 200px;
            margin-right: 200px;
            height: 200px;
            background-color: yellow;
        }
        .three{
            width: 200px;
            height: 200px;
            background-color: brown;
            position: absolute;
            right: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <div class="ones">第一个div</div>
    <div class="two">第二个div</div>
    <div class="three">第三个div</div>
</body>
</html>