css——flex弹性布局之竖向布局和横向布局

最新推荐文章于 2025-04-07 16:11:59 发布

Kinghiee

最新推荐文章于 2025-04-07 16:11:59 发布

阅读量2.8w

点赞数 1

分类专栏： css 文章标签： flex弹性布局

CC BY-NC-ND 4.0

本文链接：https://blog.csdn.net/qq_42683219/article/details/104336430

版权

css 专栏收录该内容

11 篇文章

订阅专栏

竖向布局

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        html,body{
            height: 100%;
        }
        #parent{
            background-color: salmon;
            height: 100%;
            display: flex;
        }
        .child{
            height: 100%;
            flex: 1 1 auto;
        }
        .child:nth-child(1)
        {
            background-color: saddlebrown;
        }
        .child:nth-child(2)
        {
            background-color: seagreen;
        }
        .child:nth-child(3)
        {
          background-color: blueviolet;
        }

    </style>
</head>
<body>
<div id="parent">
   <div class="child">1</div>
   <div class="child">2</div>
   <div class="child">3</div>
</div>
</body>
</html>

效果图
在这里插入图片描述

注意1：html，boby高度一定100%，不然高度不会充满整个屏幕

html,body没有设置100%效果图
在这里插入图片描述

注意2 flex: 1 1 auto;在子元素中一定要加上
没有加 flex: 1 1 auto;的效果图
在这里插入图片描述

横向布局

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        html,body{
            height: 100%;
        }
        #parent{
            background-color: salmon;
            display: flex;
            height: 100%;
            flex-direction: column;
        }
        #parent>div{
            flex: 1 1 auto;
        }
        #parent>div:nth-child(1){

            background-color: blueviolet;
        }
        #parent>div:nth-child(2){
           background-color: saddlebrown;
        }
        #parent>div:nth-child(3){
            background-color: seagreen;
        }
    </style>
</head>
<body>
<div id="parent">
<div>你好</div>
<div>你好</div>
<div>你好</div>
</div>
</body>
</html>

效果图
在这里插入图片描述
其实横向和纵向布局就是一个 flex-direction值的不同。除了所有不固定高度外，你还可以上下固定高度，中间自适应
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        html,body{
            height: 100%;
        }
        #parent{
            background-color: salmon;
            display: flex;
            height: 100%;
            flex-direction: column;
        }

        #parent>div:nth-child(1){
            height: 200px;
            background-color: blueviolet;
        }
        #parent>div:nth-child(2){
            flex: 1 1 auto;
           background-color: saddlebrown;
        }
        #parent>div:nth-child(3){
            height: 100px;
            background-color: seagreen;
        }
    </style>
</head>
<body>
<div id="parent">
<div>你好</div>
<div>你好</div>
<div>你好</div>
</div>
</body>
</html>

效果图
在这里插入图片描述