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 属性用来设置当弹性盒子的子元素（项目）超出父容器时是否换行

jQuery 基础知识总结（超级详细）

基于HTML电商购物项目的设计与实现——html css javascript jquery bootstarp响应式图书商城

Echarts实现折现图跳过没有数据的点

盘点初次使用vue3遇到的那些小坑

echarts自定义tooltip中的内容

echarts配置项详细解释

vue中el-table单元格复制功能

Vue项目中禁用ESLint的几种常见方法

基于ssm vue共享充电宝管理系统(开题报告程序论文)

【Vue进阶】第一章——熟悉Vue常用指令：从文本插值到表单绑定

前端哥

jQuery 基础知识总结（超级详细）

jQuery QueryBuilder 教程

AJAX学习笔记6 JQuery对AJAX进行封装

JavaScript云LIS系统概述前端框架JQuery EasyUI Bootstrap医院云HIS系统源码开箱即用

基于HTML电商购物项目的设计与实现——html css javascript jquery bootstarp响应式图书商城

echarts两个常用饼图、平滑折线图效果展示、代码参考

水球图及各种参数设置

Echarts实现折现图跳过没有数据的点

盘点初次使用vue3遇到的那些小坑

echarts自定义tooltip中的内容

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

2024-03-03 11:03:011001

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

2024-09-30 23:09:061000

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

2024-09-09 00:09:071000

4
vue使用datav echarts

2024-09-06 00:09:381000

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

2024-09-04 23:09:411000

6
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

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

2024-08-19 22:08:161000

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

2024-08-19 22:08:121000

9
npm的使用

2024-08-18 00:08:131000

10
JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000