8.5 CSS3-flex弹性盒子

lex弹性盒子

2009年,W3C提出了一种崭新的方案----Flex布局(即弹性伸缩布局),它可以简便、完整、响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解了。 伸缩布局 = 弹性布局 = flex布局

原理:通过给父盒子添加flex属性,来控制盒子的位置和排列方式

弹性盒子分为两块:box布局(老版本) 和flex布局(新版本) Flexbox模型是2012年9月提出的工作草案,这个草案是由W3C 推出的最新语法。这个版本立志于指定标准,让新式的浏览器全面兼容,在未来浏览器的更新换代中实现统一。

注意,设为 Flex 布局以后,子元素的 float 、clear 和 vertical-align 属性将失效。

容器: 采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器
项目 容器的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"

![[1111111.PNG]]

容器属性 项目属性
flex-direction 主轴方向 order
flex-wrap 主轴换行方式 flex-grow
flex-flow符合形式 flex-shrink
justify-content 主轴对齐方式 flex-basis
align-items 交叉轴对齐方式 flex
align-content 多根主轴对齐方式 align-self
flex基础弹性盒子

语法:display:flex 表示给当前元素添加弹性盒子

案例一:使用flex弹性盒子让那个div里面的内容在一行显示

flex基础弹性盒子

语法:display:flex 表示给当前元素添加弹性盒子

案例一:使用flex弹性盒子让那个div里面的内容在一行显示

HTML 复制代码
<style>
    .box{
        width: 100%;
        display: flex;
    }
    .inner{
        border: 1px solid #f00;
        background-color: aquamarine;
    }
</style>
<div class="box">
    <div class="inner">响应式网站设计是一种网络页面设计布局,其理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境进行相对应的布局。</div>
    <div class="inner">响应式网站设计是一种网络页面设计布局,其理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境进行相对应的布局。</div>
    <div class="inner">响应式网站设计是一种网络页面设计布局,其理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境进行相对应的布局。</div>
    <div class="inner">响应式网站设计是一种网络页面设计布局,其理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境进行相对应的布局。</div>
</div>

display:-webkit-box;和float的区别在于 float浮动之后,高度会随着内容变化,高度不定;并且浮动之后,当盒子缩小时,浮动的内容会自动被挤下来 display:box 不需要设置盒子高度,会自动使多个盒子高度保持一致; 并且弹性盒子设置好之后,屏幕缩小不会让内容自动换行,但是还是没有实 线弹性盒子

flex-direction 决定主轴方向(即项目排列方向)

属性值: row(默认值):主轴为水平方向,起点在左端。 row-reverse:主轴为水平方向,起点在右端。 column:主轴为垂直方向,起点在上沿。 column-reverse:主轴为垂直方向,起点在下沿。

\[1280X1280 (2).PNG\]

案例一:正常布局

css 复制代码
 <style>
       .box{
           display: flex;
           display: -webkit-flex;
           border: 1px solid #f00;
           flex-direction: row-reverse;
       }
       .inner{
           background-color: yellowgreen;
           border: 1px solid #f00;
           margin: 5px;
           padding: 5px;
           height: 100px;
       }
</style>
<div class="box">
        <div class='inner'>1此概念于2010年5月由国外著名网页设计师Ethan Marcotte所提出。</div>
        <div class='inner'>2响应式网站设计(Responsive Web design)的理念是:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整</div>
        <div class='inner'>3论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端------而不是为每个终端做一个特定的版本</div>
</div>

![[28d06925-e8e7-40e2-800d-517abb0a76ff.png]]

案例二:row-reverse,起点在右端

css 复制代码
<style>
       .box{
           display: flex;
           display: -webkit-flex;
           border: 1px solid #f00;
           /* 右对齐 */
           flex-direction: row-reverse;
       }
       .inner{
           background-color: yellowgreen;
           border: 1px solid #f00;
           margin: 5px;
           padding: 5px;
           height: 200px;
           width: 300px;
       }
</style>

![[dd34f01f-d04b-4324-9be8-076717a95b9a.png]]

案例三:column 从上往下按行排放

css 复制代码
<style>
       .box{
           display: flex;
           display: -webkit-flex;
           border: 1px solid #f00;
           /* 从上往下排放 */
           flex-direction: column;
       }
       .inner{
           background-color: yellowgreen;
           border: 1px solid #f00;
           margin: 5px;
           padding: 5px;
           height: 200px;
           width: 300px;
       }
</style>

![[61b011c5-be4f-436b-81fc-cd6058f291b5.png]]

案例四:column-reverse 从下往上,数据颠倒排放

css 复制代码
<style>
       .box{
           display: flex;
           display: -webkit-flex;
           border: 1px solid #f00;
           /*  从下往上,数据颠倒排放 */
           flex-direction: column-reverse;
       }
       .inner{
           background-color: yellowgreen;
           border: 1px solid #f00;
           margin: 5px;
           padding: 5px;
           height: 200px;
           width: 300px;
       }
</style>

![[0ae29b5b-eb94-4b55-ab61-7fc9b305a44b.png]]

flex-wrap 设置项目换行方式

默认情况下,项目都排在一条线(又称"轴线")上。 flex-wrap 属性设置如果一条轴线排不下,项目如何换行。

语法:flex-warp:warp nowrap (默认):不换行,都在一行或者一列中显示 wrap:换行,第一行在上方。 wrap-reverse:伸缩项目无法容纳时,自动换行,方向和wrap相反,这个效果和使用float的效果是一样的。

![[8eea5a83-55f6-49fd-ba3a-3b63a8f4253d.png]]

![[cf6b9902-b11e-4f35-8f04-0806ee175814.png]]

案例一:warp换行显示

css 复制代码
<style>
       .box{
           display: flex;
           display: -webkit-flex;
           border: 1px solid #f00;
           /*  换行显示 */
           flex-wrap: wrap;
       }
       .inner{
           background-color: yellowgreen;
           border: 1px solid #f00;
           margin: 5px;
           padding: 5px;
           height: 200px;
           width: 500px;
       }
</style>

![[e0e99c66-ab48-484e-87ac-6fe38cc28ada.png]]

案例二:warp-reverse、

css 复制代码
<style>
       .box{
           display: flex;
           display: -webkit-flex;
           border: 1px solid #f00;
           /*  换行显示,并且内容会颠倒 */
           flex-wrap: wrap-reverse;
       }
       .inner{
           background-color: yellowgreen;
           border: 1px solid #f00;
           margin: 5px;
           padding: 5px;
           height: 200px;
           width: 500px;
       }
</style>

![[daecadce-9605-4d0e-b5ba-9ed2133e763f.png]]

flex-flow 主轴方向和换行方式的简写

语法:flex-flow:row nowarp 默认值:row nowrap

案例一:向右对齐 并且 换行

css 复制代码
<style>
       .box{
           display: flex;
           display: -webkit-flex;
           border: 1px solid #f00;
           /*  颠倒显示,并且换行 */
           flex-flow: row-reverse wrap ;
       }
       .inner{
           background-color: yellowgreen;
           border: 1px solid #f00;
           margin: 5px;
           padding: 5px;
           height: 200px;
           width: 500px;
       }
</style>
justify-content 定义项目在主轴上的对齐方式【使用的多】

语法:justify-content:center

属性值: 语法:justify-content:center

属性值: flex-start(默认值): 主轴起点对齐 flex-end主轴终点对齐 center:居中 space-between:两端对齐,项目之间的间隔都相等。

space-around: 每个项目两侧的间隔相等。所以,项目之间间隔比项目与边框间隔大一倍。
space-evenly: 可以使每个元素之间和元素距离边距的距离都相等,但是兼容性比较差。

![[a5b43fdf-2c0d-421b-9698-fbb54f2df438.png]]

![[6680ee58-cd0a-4c01-99e4-18232e043d34.png]]

![[6594e641-d9f2-494e-bfcb-c13ced9a4ef0.png]]

![[72369b44-acbf-4b20-a74f-91235cb28448.png]]案例一:中间对齐,两侧不固定

HTML 复制代码
<style>
       .box{
           display: flex;
           display: -webkit-flex;
           border: 1px solid #f00;
           /* 整体居中对齐 */
           justify-content: center;
       }
       .inner{
           background-color: yellowgreen;
           border: 1px solid #f00;
           margin: 5px;
           padding: 5px;
           height: 200px;
           width: 300px;
       }
</style>

![[42faeb42-7d03-4104-9439-f99729466a69.png]]

案例二:平均分布,两侧没有缝隙

HTML 复制代码
 <style>
       .box{
           display: flex;
           display: -webkit-flex;
           border: 1px solid #f00;
           /* 两端对齐 */
           justify-content: space-between;
       }
       .inner{
           background-color: yellowgreen;
           border: 1px solid #f00;
           margin: 5px;
           padding: 5px;
           height: 200px;
           width: 300px;
       }
</style>

![[2dfa1f49-0e75-4b73-8558-a185018810e6.png]]

案例三:整行平均分布

HTML 复制代码
<style>
       .box{
           display: flex;
           display: -webkit-flex;
           border: 1px solid #f00;
           /* 中间间距一致 */
           justify-content: space-around;
       }
       .inner{
           background-color: yellowgreen;
           border: 1px solid #f00;
           margin: 5px;
           padding: 5px;
           height: 200px;
           width: 300px;
       }
</style>

![[325a116d-3527-47f1-9e60-bf89ba359753.png]]

案例四:整个每个盒子之间的间距一致

HTML 复制代码
<style>
    .box {
        display: flex;
        display: -webkit-flex;
        border: 1px solid #f00;
        /* 间距一致 */
        justify-content: space-evenly;
    }
    .inner {
        background-color: yellowgreen;
        border: 1px solid #f00;
        margin: 5px;
        padding: 5px;
        height: 200px;
        width: 300px;
    }
</style>
<div class="box">
    <div class="inner">项目1</div>
    <div class="inner">项目2</div>
    <div class="inner">项目3</div>
</div>
align-content属性起作用的条件【针对多行主轴】

对父元素设置自由盒属性display:flex;

并且设置排列方式为横向排列flex-direction:row; (默认值)

设置换行,flex-wrap:wrap;

![[2a27003b-3c49-4b27-b328-e91dce8d677f.png]]

![[43a312de-d122-4931-b6b6-4b9b85199ab4.png]]

![[9d533f0e-9ec1-491e-b4c8-7c269e3f3228.png]]

![[1d21892d-f557-4511-a607-f0f828b79c11.png]]

![[591e0f77-675d-49a7-97b7-f4bafc4244b1.png]]

![[5d142bc4-c6c4-4dff-9cba-7f26924033f3.png]]

align-items 项目在交叉轴上对齐方式【针对单个主轴】

语法:align-items:flex-end 属性值:

flex-start:交叉轴的起点对齐。

flex-end:交叉轴的终点对齐。

center:交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch(默认值):如果项目未设置高度或设为 auto,项目将占满整个容器的高度。

案例一:在交叉轴起点对齐

HTML 复制代码
<style>
       .box{
           display: flex;
           display: -webkit-flex;
           border: 1px solid #f00;
           /* 交叉轴的起点对齐 */
           align-items: flex-start;
       }
       .inner{
           background-color: yellowgreen;
           border: 1px solid #f00;
           margin: 5px;
           padding: 5px;
           width: 300px;
       }
</style>

![[4908d0b7-b5ab-4393-9f09-edf9d38a258b.png]]

案例二:在交叉轴终点对齐

HTML 复制代码
<style>
       .box{
           display: flex;
           display: -webkit-flex;
           border: 1px solid #f00;
           /* 交叉轴的终点对齐 */
           align-items: flex-end;
       }
       .inner{
           background-color: yellowgreen;
           border: 1px solid #f00;
           margin: 5px;
           padding: 5px;
           width: 300px;
       }
</style>

![[37fce746-bb83-42bb-840c-f6137f68e6d1.png]]

案例三:交叉轴的中心对齐

css 复制代码
<style>
       .box{
           display: flex;
           display: -webkit-flex;
           border: 1px solid #f00;
           /* 交叉轴的中心对齐 */
           align-items: center;
       }
       .inner{
           background-color: yellowgreen;
           border: 1px solid #f00;
           margin: 5px;
           padding: 5px;
           width: 300px;
       }
</style>

![[08ea1b3f-7a61-4822-9d3a-3e5f5ba93566.png]]

案例四:第一行文字的基线对齐

HTML 复制代码
<style>
       .box{
           display: flex;
           display: -webkit-flex;
           border: 1px solid #f00;
           /* 交叉轴的基线对齐 */
           align-items: baseline;
       }
       .inner{
           background-color: yellowgreen;
           border: 1px solid #f00;
           margin: 5px;
           padding: 5px;
           width: 300px;
       }
</style>

![[3adec215-1438-4986-83d0-c2cb6837661e.png]]

align-self 清理额外空间,单独设置某一个伸缩项目

align-self 和align-items 一样,都是清理额外空间,但它是单独设置某一个伸缩项目的。所有的值和align-itmes 一致

案例一:单独给第二个元素清除多余空间

HTML 复制代码
<style>
       .box{
           display: flex;
           display: -webkit-flex;
           border: 1px solid #f00;
       }
       .inner{
           background-color: yellowgreen;
           border: 1px solid #f00;
           margin: 5px;
           padding: 5px;
           width: 300px;
       }
       /* 单独给第二个元素清除多余空间 */
       .inner:nth-child(2){
           align-self: center;
       }
</style>

![[Pasted image 20250805150753.png]]

flex 控制伸缩容器的比例分配

用来控制伸缩容器的比例分配,按比例分配

HTML 复制代码
<style>
       .box{
           display: flex;
           display: -webkit-flex;
           border: 1px solid #f00;
       }
       .inner{
           background-color: yellowgreen;
           border: 1px solid #f00;
           margin: 5px;
           padding: 5px;
           width: 300px;
       }
       /* 单独给第二个元素清除多余空间 */
       .inner:nth-child(1){
           flex: 1;
       }
       .inner:nth-child(2){
           flex: 2;
       }
       .inner:nth-child(3){
           flex: 3;
       }
</style>

![[67165ecb-8bd8-47c7-a07b-63eb6b669dac.png]]

order 控制伸缩项目出现的顺序

数值越小,排列越靠进主轴起点,默认为 0。 注:以下效果图给容器设置了 justify-content: space-between;

![[757fdd9d-d7c7-473a-86aa-aa5c067cf20f.png]]

HTML 复制代码
<style>
       .box{
           display: flex;
           display: -webkit-flex;
           border: 1px solid #f00;
       }
       .inner{
           background-color: yellowgreen;
           border: 1px solid #f00;
           margin: 5px;
           padding: 5px;
           width: 300px;
       }
       /* 排序 */
       .inner:nth-child(1){
           order: 3;
       }
       .inner:nth-child(2){
           order: 1;
       }
       .inner:nth-child(3){
           order: 2;
       }
</style>

![[95bac62d-5b00-4cee-a695-ef65cfaff783.png]]

flex-grow 放大比例 / flex-shrink 缩小比例

定义项目的放大比例。默认为0,即如果存在剩余空间,也不放大。

flex布局发生在父容器和子容器之间。父容器需要有flex的环境(display:flex;),子容器才能根据自身的属性来布局,简单的说,就是瓜分父容器的空间。相反就是说如果父容器没有flex的环境,那么子容器就无法使用flex的规则来划分父容器的空间。

HTML 复制代码
<style>
        .box{
            width: 500px;
            height: 300px;
            border: 1px solid #f00;
            display: flex;
        }
        .inner:nth-child(1){
            width: 100px;
            height: 100px;
            background-color: #f00;
        }
        .inner:nth-child(2){
            width: 100px;
            height: 100px;
            background-color: green;
        }
        .inner:nth-child(3){
            width: 100px;
            height: 100px;
            background-color: blue;
        }
</style>
<div class="box">
        <div class="inner1">1</div>
        <div class="inner2">2</div>
        <div class="inner3">3</div>
</div>

现在大盒子为500,每个inner的宽度为100px,默认情况下,200px的剩余空间是不会被占用的; flex-grow 的作用就是就是用来瓜分剩余空间的 我们假设box的width是500px,现在我们再假设inner1、inner2、inner3的width是100px,那么剩余空间就是500-100*3=200。 知道了剩余空间有什么用呢?这个时候flex-grow就该出场了,假如我们这个时候对inner1设置flex-grow:1,那么我们会发现,inner1把inner2和inner3都挤到右边了,也就是说剩余的200px空间都被inner1占据了,所以此时inner1的width比实际设置的值要大。

面试题:flex:0 1 auto 是什么意思

flex:是flex-grow,flex-shrink和flex-basis的简写

flex-grow:定义项目的的放大比例;

flex-shrink:定义项目的缩小比例;

flex-basis: 定义在分配多余空间之前,项目占据的主轴空间(main size),浏览器根据此属性计算主轴是否有多余空间,

  • 默认值为auto,即 项目原本大小;
  • tranform:rotate3D( 0/1 ,y,z,deg);
  • 数据类型:布尔值(true 1/false 0)
    所以flex属性的默认值为:0 1 auto (不放大会缩小) flex为none:0 0 auto (不放大也不缩小) flex为auto:1 1 auto (放大且缩小)

面试题:怎么让元素上下左右居中

综合案例-淘宝移动端底部Tab效果

![[ecb8b29d-3d7d-48a4-9b35-4c6a479a314c.png]]

删除或者添加一个底部tab选项,都不需要调整样式,flex弹性盒子会根据内容的多少,调整元素和元素之间的距离

css 复制代码
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2924794_90p693jkqb5.css">
    <style>
        .all{
            width: 620px;
            height: 3000px;
            margin: 0 auto;
            border: 1px solid #0f0;
        }
        .box{
            width: 560px;
            position: fixed;
            bottom: 0;
            display: flex;
            /* 两端对齐 */
            justify-content: space-between;
            background-color: beige;
            padding: 0 30px;
        }
        .box div{
            text-align: center;
        }
        .box i{
            font-size: 26px;
        }
    </style>
    <div class="all">
        <div class="box">
            <div>
                <i class="iconfont icon-shouji"></i><br/>
                首页
            </div>
            <div>
                <i class="iconfont icon-kefu"></i><br/>
                客服
            </div>
            <div>
                <i class="iconfont icon-kefu"></i><br/>
                客服
            </div>
            <div>
                <i class="iconfont icon-kefu"></i><br/>
                客服
            </div>
            <div>
                <i class="iconfont icon-smile"></i><br/>
                客服
            </div>
        </div>
    </div>

案例一:使用弹性盒子制作骰子效果

![[61dc8a45-6f69-40c8-baf3-39532d7941ad.png]]

相关推荐
xianxin_2 分钟前
HTML5 浏览器支持
前端
我叫黑大帅2 分钟前
📝 Java 文件 IO 入门教程
java·前端
今禾3 分钟前
# 🚀 深入浅出 TypeScript(下):掌握泛型、接口及 React 中的高级应用
前端·javascript·typescript
GISer_Jing19 分钟前
浏览器缓存机制全解析:强缓存与协商缓存
前端·javascript·缓存
fatsheep洋30 分钟前
XSS的原型链污染1--原型链解释
前端·xss
天生我材必有用_吴用36 分钟前
Fabric.js从入门学习到labelImg标注工具实现
前端
WebInfra38 分钟前
深度剖析 tree shaking:主流打包工具的实现对比
前端·javascript·架构
weixin_4715257842 分钟前
【学习嵌入式day-17-数据结构-单向链表/双向链表】
前端·javascript·html
jingling5551 小时前
Git 常用命令指南:从入门到高效开发
前端·javascript·git·前端框架
索西引擎1 小时前
【前端】网站favicon图标制作
前端