弹性盒子布局

jule_zhou

于 2023-02-27 16:28:05 发布

阅读量561

点赞数

分类专栏： # HTML5 前端文章标签： css 前端 html

本文链接：https://blog.csdn.net/jule_zhou/article/details/129232397

版权

前端同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

HTML5

8 篇文章 0 订阅

订阅专栏

文章介绍了CSS3中的弹性盒子模型，包括如何将div转换为弹性盒子，认识flex的主轴和交叉轴，以及父级盒子的属性如flex-direction、justify-content和align-items。特别强调了flex-grow属性的作用，它用于控制子元素在主轴上的扩展比例，并讨论了其可能存在的问题及解决方案，如设置flex-basis为0来避免内容影响布局。

摘要由CSDN通过智能技术生成

一、弹性盒子属性

说明：
div的默认样式：display:block 块盒子
display:flex弹性盒子（可以控制下级盒子的位置）

当两种盒子单独出现时，效果时一样的
但是在里面加入块盒子时就不一样了
在这里插入图片描述

二、认识flex的坐标轴

当flex出现时，就会产生一个坐标轴
在这里插入图片描述

三、简单学习父级盒子属性

父级盒子默认属性（控制下级盒子属性）：（父级盒子为粉色）

/* 弹性方向：行（row）、列（column） 控制下级盒子排列方式*/
flex-direction: row;
/* 对齐内容：弹性起点（flex-start）  控制下级盒子主轴的位置*/
justify-content: flex-start;
/* 对齐条目：拉伸（stretch） 控制下级盒子在交叉轴的位置 */
align-items: stretch;

在这里插入图片描述

/* 弹性方向：行（row）、列（column） 控制下级盒子排列方式*/
flex-direction: column;
/* 对齐内容：弹性起点（flex-start）  控制下级盒子主轴的位置*/
justify-content: flex-start;
/* 对齐条目：拉伸（stretch） 控制下级盒子在交叉轴的位置 */
align-items: stretch;

在这里插入图片描述

/* 弹性方向：行（row）、列（column） 控制下级盒子排列方式*/
flex-direction: column;
/* 对齐内容：弹性起点（flex-start）  控制下级盒子主轴的位置*/
justify-content: flex-start;
/* 对齐条目：拉伸（stretch） 控制下级盒子在交叉轴的位置 */
align-items: stretch;

在这里插入图片描述

/* 弹性方向：行（row）、列（column） 控制下级盒子排列方式*/
flex-direction: column;
/* 对齐内容：弹性起点（flex-start）  控制下级盒子主轴的位置*
justify-content: center;
/* 对齐条目：拉伸（stretch） 控制下级盒子在交叉轴的位置 */
align-items: center;

在这里插入图片描述

三、属性说明

3.1、flex-grow

<!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>
        body{
            margin: 0 0;
        }
        .father{
            width: 100%;
            height: 100vh;
            display: flex;
        }
        .child{
            /* 每一个子元素使用父元素剩余的空间（有一定隐患） */
            flex-grow: 1;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="child" style="background: red;"></div>
        <div class="child" style="background: blue;"></div>
        <div class="child" style="background: yellow;"></div>
    </div>
</body>
</html>

存在的隐患：
若某一个元素内有值，那么均分就是从剩余空间分，这时有内容的元素内将分得更多空间

<div class="father">
    <div class="child" style="background: red;">0000000000000000000000000000000000000000000000000000000000000</div>
    <div class="child" style="background: blue;"></div>
    <div class="child" style="background: yellow;"></div>
</div>

在这里插入图片描述

解决方案：

<style>
    body{
        margin: 0 0;
    }
    .father{
        width: 100%;
        height: 100vh;
        display: flex;
    }
    .child{
        /* 每一个子元素使用父元素剩余的空间（有一定隐患） */
        flex-grow: 1;
        /* 增长的起跑线同意设置为0，默认值为auto */
        flex-basis: 0;
    }
</style>

在这里插入图片描述
综合简写后：

<style>
    body{
        margin: 0 0;
    }
    .father{
        width: 100%;
        height: 100vh;
        display: flex;
    }
    .child{
        /* 每一个子元素使用父元素剩余的空间（有一定隐患） */
        /* flex-grow: 1; */
        /* 增长的起跑线同意设置为0，默认值为auto */
        /* flex-basis: 0; */
        /* 复合属性，增长为1，压缩为0 */
        flex: 1 0;
    }
</style>