一侧固定一侧自适应自适应效果拓展

最新推荐文章于 2022-04-12 17:17:14 发布

love_czz

最新推荐文章于 2022-04-12 17:17:14 发布

阅读量187

点赞数

文章标签： html css css3

本文链接：https://blog.csdn.net/love_czz/article/details/104590447

版权

弹性布局下实现自适应效果

我们在写网页时或多或少会遇到这样的需求：

上方固定下方自适应（或下方固定上方自适应）
上下固定中间自适应
左边固定或右边自适应（或右边固定左边自适应）
左边固定右边自适应，自适应那侧上方自适应下边固定。

今天教大家如何实现以上几点的整体排版(display:flex;)：

1. 上下的固定和自适应

①：给父容器加 flex-direction: column ；改变主轴方向
②：固定行：固定宽高。自适应行：固定高，加 flex-grow：1;(此行自适应高)
代码：

<!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>
        #block{ display: flex; flex-direction: column; height: 100vh;}
        #block .box1{ height: 100px; background-color: aqua;}
        #block .box2{ flex-grow: 1; background-color: blue;}
    </style>
</head>
<body>
    <div id="block">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>
</html>

2.左右的固定和自适应

固定列：固定宽高。自适列：固定高，加 flex-grow：1;(此列自适应宽)
代码：

<!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>
        #block{ display: flex; height:100vh;}
        #block .box1{ width: 100px; background-color: aqua;}
        #block .box2{ flex-grow: 1; background-color: blue;}
    </style>
</head>
<body>
    <div id="block">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>
</html>

3. 左边固定右边自适应，自适应那侧上方自适应下边固定。

在第二点的基础上，改变自适应侧的写法：
①：量取下方具体高度（？px）
②：上方高度：calc（100% -？px）（运算符和前后之间都要用空格隔开）
③：下方固定高度？px
代码：

<!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>
        #block{ display: flex; height:100vh;}
        #block .box1{ width: 100px; background-color: aqua;}
        #block .box2{ flex-grow: 1;}
        #block .box2 div:first-of-type{ height: calc(100% - 100px); background-color: blue;}
        #block .box2 div:last-of-type{ height: 100px; background-color: chartreuse;}
    </style>
</head>
<body>
    <div id="block">
        <div class="box1"></div>
        <div class="box2">
            <div></div>
            <div></div>
        </div>
    </div>
</body>
</html>

注：

给每个div里加背景颜色是方便观察写出代码的效果。
由于此效果不好用图片表现出来，如果需要可以复制我的代码查看效果。带来的不便深感歉意。

——逆战班

love_czz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一侧固定一侧自适应自适应效果拓展

弹性布局下实现自适应效果我们在写网页时或多或少会遇到这样的需求：上方固定下方自适应（或下方固定上方自适应）上下固定中间自适应左边固定或右边自适应（或右边固定左边自适应）左边固定右边自适应，自适应那侧上方自适应下边固定。今天教大家如何实现以上几点的整体排版(display:flex;)：1. 上下的固定和自适应①：给父容器加 flex-direction: column ；改变主...
复制链接

扫一扫