CSS 弹性盒子模型容器子元素排列 Flex container、Flex item

富士康质检员张全蛋

已于 2024-08-13 11:29:34 修改

阅读量1.7k

点赞数 9

于 2024-03-09 12:38:52 首次发布

本文链接：https://blog.csdn.net/qq_34556414/article/details/136579952

版权

Vue.js 同时被 2 个专栏收录

39 篇文章 2 订阅

订阅专栏

html css javascript jquery

33 篇文章 0 订阅

订阅专栏

定义：弹性盒子是CSS3的一种新的布局模式

CSS3 弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

flex弹性布局

在之前要控制HTML元素的布局，会用到padding、margin、postion、float等方法，经过反反复复调试才能实现效果。自从Flex弹性布局出现，一切似乎豁然开朗!
启用Flex布局，只需要在外部元素设置display: flex属性。
Flex布局有一个隐式的坐标空间，水平方向有一条主轴，垂直方向有一条交叉轴:（它是基于X轴和Y轴的）

后面组件库的布局大部分都是基于这个flex弹性布局去做的，它其实就是帮你做了一层封装，在使用上更加简单了。

属性：下面属性都是结合起来使用的，它是一套的布局。

前面的css和html里面是没有布局的，之前div和text-align这些。无论是div里面的align为right left center也好，还是text-align: center也好。他俩个一个是作为html的属性，一个作为css的属性。它们只能控制水平排列居左还是居右。

div这些padding和css这些text-align这些都只能简单的控制一些位置，但是有复杂的布局，这些捉襟见肘，还是得有容器弹性布局来解决。

如果有复杂的需求，这样就不行了。普通的居左居右就行了，但是复杂的就不行了，但凡有些复杂的布局的排列，

它提供的能力只是简单的居左居中居右，你如果要去做真正复杂一点的布局。要使用flex的弹性布局，它是给你整个页面去做布局的。text-align只是一个区块的布局，当然也能完成整体页面的简单布局，但是复杂一点的就不行了。

不去引入弹性布局，直接使用小区块去做一个简单的居左，居中，居右其实是非常方便的。但是要做页面的整体布局就要使用弹性布局，这个是专业的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <style type="text/css">
    
    .d0 {
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
     }

    .d1, .d2, .d3, .d4, .d5 {
        height: 100px;
        width: 100px;
        margin: 10px;
        background-color: aquamarine;
        text-align: center;
        line-height: 100px;
}

    </style>
</head>

<body>
    <div class="d0">
        <div class="d1">1</div>
        <div class="d2">2</div>
        <div class="d3">3</div>
        <div class="d4">4</div>
        <div class="d5">5</div>
    </div>
    

</body>

</html>

CSS3弹性盒内容

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成弹性容器通过设置display属性的值为flex将其定义为弹性容器弹性容器内包含了一个或多个弹性子元素。

温馨提示：弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局

它主要是在一个大的容器当中里面子元素的一个设置。一个大的盒子里面里面的子元素如何摆放由我们的弹性盒子说的算。

之前的盒子模型是一个元素，内边距外边距，边框，来调整在页面所显示的位置。而弹性盒子是在大容器里面，里面有很多的小盒子，这些小盒子是如何摆放的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>

    <style>
       .container{
            width: 500px;
            height: 500px;
            background-color: blueviolet;
       }
       .box1{
            width: 100px;
            height: 100px;
            background-color: blue;
       }
       .box2{
            width: 100px;
            height: 100px;
            background-color: yellow;
       }
       .box3{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
       }
    </style>
</head>

<body>
        
<div class="container">
   <div class="box1">box1</div>
   <div class="box2">flex item 2</div>
   <div class="box3">box3</div>
</div>

</body>

</html>

盒子是自上而下进行摆放的。默认div是块级元素，div和div之间是垂直摆放的。现在可以为盒子的布局设置一个弹性盒子模型，给外层容器的div加上弹性盒子设置，那么就可以管理里面三个盒子。

这样需要给容器设置display属性值为flex。

注意：默认弹性盒子里面内容是横向摆放

       .container{
            display: flex;
            width: 500px;
            height: 500px;
            background-color: blueviolet;
       }

父级元素上的属性

（1）display 属性

（2）flex-direction 属性

这里只需要记住一个属性，就是垂直的属性。

（3）justify-content（垂直方向）：这个父级属性是应用在垂直上面，垂直方向上面的摆放

       .container{
            display: flex;
            justify-content: center;
            width: 500px;
            height: 500px;
            background-color: blueviolet;
       }

align-items（水平方向）：父亲属性是水平方向，让容器内部的元素居左还是居右边还是中

       .container{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 500px;
            height: 500px;
            background-color: blueviolet;
       }

上面就实现了将小盒子放在大盒子里面居中，垂直和水平方向都居中。设置一个子盒子在一个父亲盒子里面居中非常简单。只需要设置justify-content: center align-items: center这两个属性即可。

子元素上的属性

有多个盒子，可以设置盒子所占空间的权重。因为大盒子可能会发生变化，所以小盒子使用权重的方式来设置。一旦设置的flex属性，小盒子的宽高就不在生效了。

权重设置好了，那么宽高就不生效

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>

    <style>
       .container{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 500px;
            height: 500px;
            background-color: blueviolet;
       }
       .box1{
            text-align: center;
            background-color: blue;
            flex: 2;
       }
       .box2{
            text-align: center;
            background-color: yellow;
            flex: 2;
       }
       .box3{
            text-align: center;
            background-color: greenyellow;
            flex: 1;
       }
    </style>
</head>

<body>
        
<div class="container">
   <div class="box1">box1</div>
   <div class="box2">box2</div>
   <div class="box3">box3</div>
</div>

</body>

</html>

盒子嵌套其实原理都是一样

盒子嵌套，在大盒子中都要有 display: flex;这个属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>

    <style>
       .container{
            display: flex;
            width: 100vw;
            height: 100vh;
            background-color: blueviolet;
       }

       .box1{
            text-align: center;
            background-color: blue;
            flex: 1;
       }

       .box2{
            text-align: center;
            background-color: yellow;
            flex: 1;
       }

       .box3{
            text-align: center;
            background-color: greenyellow;
            flex: 4;
       }

       .box4{
             text-align: center;
             background-color: cadetblue;
             flex: 1;
       }

       .box{
            background-color: blanchedalmond;
            flex: 4;
       }

       .container1{
          display: flex;
          flex-direction: column;
          flex: 4;
       }
    </style>
</head>

<body>
        
<div class="container">
   <div class="box1">box1</div>
   <div class="container1">
        <div class="box2">box2</div>
        <div class="box3">box3</div>
        <div class="box4">box4</div>
  </div>
</div>

</body>

</html>