CSS弹性盒子（详细版，建议收藏）

一、弹性盒子定义

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

CSS3弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式

引入弹性盒布局模型的目的是提供一种更有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

二、CSS3弹性盒内容

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

它主要是在一个大的容器当中里面子元素的一个设置。一个大的盒子里面里面的子元素如何排列由我们的弹性盒子控制。

注意: 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局

1.不使用display：flex；弹性盒子和使用display：flex；弹性盒子的对比

css

 <style>
        .container {
           /* display: flex;*/
            background-color: gray;
            width: 500px;
            height: 500px;
        }
        
        .box1 {
            background-color: red;
            width: 100px;
            height: 100px;
        }
        
        .box2 {
            background-color: blue;
            width: 100px;
            height: 100px;
        }   
        
        .box3 {
            background-color: yellow;
            width: 100px;
            height: 100px;
        }
    </style>

HTML

<body>
    <div class="container">
        <div class="box1">盒子1</div>
        <div class="box2">盒子2</div>
        <div class="box3">盒子3</div>
    </div>
</body>

这是使用display：flex；的布局

2.flex-direction 属性指定单行元素在父容器中的排列方式。

flex-direction的值有:

row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

HTML

<body>
    <div id="main">
        <div class="row">
            <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
        </div>
        <div class="row_reverse">
            <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
        </div>
        <div class="column">
            <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
        </div>
        <div class="column_reverse">
            <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
        </div>
    </div>
    
</body>

css

<style>
    #main {
        border: 1px solid #CCC;
        padding: 5px;
        position: relative;
    }
    .row, .row_reverse, .column, .column_reverse{
        display: flex;
        margin-bottom: 5px;
    }
    .row {
        flex-direction: row;
    }
    .row div {
        background-color: aqua;
        width: 50px;
        height: 50px;
        border: 1px solid black;
    }
   
    .row_reverse {
        flex-direction: row-reverse;
    }
    .row_reverse div {
        background-color: burlywood;
        width: 50px;
        height: 50px;
        border: 1px solid black;
    }
    .column {
        flex-direction: column;
    }
   .column div {
        background-color: yellow;
        width: 50px;
        height: 50px;
        border: 1px solid black;
    }
    .column_reverse {
        flex-direction: column-reverse;
        position: absolute;
        top: 120px;
        left: 400px;
    }
    .column_reverse div {
        background-color: green;
        width: 50px;
        height: 50px;
        border: 1px solid black;
    }
   
</style>

运行示例图

2 、flex-wrap 属性用来设置当弹性盒子的子元素（项目）超出父容器时是否换行

flex-wrap 的值有：

1.nowrap：默认值项目不会换行，容器为单行，子项可能会溢出容器。

2.wrap：容器为多行，子项溢出的部分会被放置到新的行。

3.wrap_reverse: 项目在需要时换行，但会以相反的顺序排列

HTML

<body>
    <div id="main">
        <div class="nowrap">
            <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
        </div>
        <div class="wrap">
            <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
        </div>
        <div class="wrap_reverse">
            <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
        </div>
    </div>
    
</body>

css

<style>
   #main {
            border: 1px solid #CCC;
            padding: 5px;
        }
        .nowrap, .wrap, .wrap_reverse {
            display: flex;
            flex-direction: row;
            margin-bottom: 15px;
        }
        .nowrap {
            flex-wrap: nowrap;
        }
        .nowrap div {
            width: 70px;
            height: 50px;
            border: 1px solid black;
            background-color: aqua;
        }
        .wrap {
            flex-wrap: wrap;
        }
        .wrap div {
            width: 70px;
            height: 50px;
            border: 1px solid black;
            background-color:  burlywood;
        }
        .wrap_reverse {
            flex-wrap: wrap-reverse;
        }
        .wrap_reverse div {
            width: 70px;
            height: 50px;
            border: 1px solid black;
            background-color:  cadetblue;
        }
</style>

运行示例图

3.flex-flow：属性是 flex-direction 和 flex-wrap 两个属性的简写

flex-flow：flex-direction flex-wrap；

HTML

<body>
    <div class="flex_flow">
        <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
    </div>
</body>

css

<style>
 .flex_flow {
            display: flex;
            flex-flow: row-reverse wrap;
        }
        .flex_flow span {
            width: 60px;
            height: 60px;
            margin-bottom: 5px;
            border: 1px solid black;
            background-color: rgb(165, 235, 211);  
        }
</style>

运行示例图

4.justify-content：属性用于设置弹性盒子中元素在主轴方向上的对齐方式

justify-content的值有：

1.flex-start：默认值，靠左对齐依次紧挨着平铺

2.flex-end：靠右对齐依次紧挨着平铺

3.center: 居中

4. space-between: 两端对齐每个项目之间的间隔是相等的

5.space-around: 每个项目两侧的间隔相等

HTML

<body>
        <div class="flex flex-start">
            <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
        </div>
        <div class="flex flex-end">
            <span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
        </div>
        <div class="flex center">
            <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
        </div>
        <div class="flex space-between">
            <span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
        </div>
        <div class="flex space-around">
            <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
        </div>
    
</body>

css

<style>
    .flex {
        display: flex;
        flex-flow: row wrap;
        margin-top: 10px;
    }
    .flex span  {
        width: 60px;
        height: 60px;
        margin-bottom: 5px;
        border: 1px solid black;
    }
    .flex-start {
        justify-content: flex-start;
    }
    .flex-start span{
        background-color: red;
        width: 60px;
        height: 60px;
    }
    .flex-end {
        justify-content: flex-end;
    }
    .flex-end span{
        background-color: rgb(90, 90, 129);
        width: 60px;
        height: 60px;
    }
    .center {
        justify-content: center;
    }
    .center span{
        background-color: rgb(161, 83, 83);
        width: 60px;
        height: 60px;
    }
    .space-between {
        justify-content: space-between;
    }
    .space-between span{
        background-color: rgb(74, 138, 119);
        width: 60px;
        height: 60px;
    }
    .space-around  {
        justify-content: space-around;
    }
    .space-around span{
        background-color: rgb(179, 171, 68);
        width: 60px;
        height: 60px;
    }
</style>

运行示例图

5.align-items：属性用来设置弹性盒子中元素在纵轴方向上的对齐方式

align-items的值有：

1.stretch：默认值将项目拉伸与容器相合适

2.center: 位于容器的中间，

3.flex-start:位于容器的顶部，纵轴起始位置的边界紧靠住该行的侧轴起始边界

4.flex-end:位于容器的底部，纵轴起始位置的边界紧靠住该行的侧轴结束边界

5.baseline: 项目与容器的基本线对齐，

HTML

例：
<body>
    <div id="main">
        <div class="baseline"><!--更改属性名就可以了  -->
            <div class="box1">1</div>
            <div class="box2">2</div>
            <div class="box3">3</div>
            <div class="box4">4</div>
            <div class="box5">5</div>
        </div>  
    </div>
    
</body>

css

例：
<style>
   #main {
            border: 1px solid #CCC;
            padding: 5px;
        }
        .baseline {
            align-items: baseline;
            display: flex;
            width: 100%;
            height: 100px
    }
    .baseline  .box1 {
        display: flex;
            background-color: #f00;
            width: 100px;
            border: 1px solid #000;
        }
    .baseline  .box2 {
            background-color: #0f0;
            width: 100px;
            border: 1px solid #000; 
            font-size: 33px;
        }
    .baseline  .box3 {
            background-color: #00f;
            width: 100px;
            height: 53px;
            border: 1px solid #000; 
        }
     .baseline  .box4 {
            background-color: #ff0;
            width: 100px;
            border: 1px solid #000;
            font-size: 25px;
        }        
     .baseline  .box5 {
            background-color: #0ff;
            width: 100px;
            border: 1px solid #000;
        }

       
</style>

效果运行示例图

6.css3弹性盒子常用属性

CSS弹性盒子（详细版，建议收藏）

2 、flex-wrap 属性用来设置当弹性盒子的子元素（项目）超出父容器时是否换行

【SpringMVC】_SpringMVC项目返回HTML与JSON

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

解决全局安装pnpm后无法使用的问题

安装Nodejs后，npm无法使用

npm使用淘宝镜像下载依赖包

搭建Nexus前端npm私服，上传发布npm包和下载依赖

npm install包提示安装成功，但项目目录中没有出现node_modules的解决方案

解决VUE3 Vite打包后动态图片资源不显示问题

vue基于sockjs-client stompjs实现websocket客户端

Vue 3 项目中导入外部的＜link＞和＜script＞资源

前端哥

C#解析JSON的常用库--Newtonsoft.Json

jsonfield 项目常见问题解决方案

【SpringMVC】_SpringMVC项目返回HTML与JSON

BugJson因为json格式问题OOM怎么办

python 解读JSON文件，一文搞懂！

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

开源项目“Pretty JSON”安装与配置完全指南

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

解决全局安装pnpm后无法使用的问题

安装Nodejs后，npm无法使用

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000