本文详细介绍了CSS3的弹性盒子模型，包括弹性盒子的布局原理、应用场景、容器属性（如flex-direction、justify-content、align-items等）以及项目属性（如align-self、order、flex等）。此外，还探讨了calc()函数的使用，用于动态计算长度值，实现更灵活的布局。通过示例代码展示了如何利用弹性盒子和calc()实现各种布局效果。
1、弹性盒子
1.1 什么是弹性盒子？
-
弹性盒子是CSS3的一种新的布局模式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行 排列、对齐和分配空白空间
-
-
操作方便，布局简单，移动端使用广泛
-
PC端浏览器支持情况较差
-
IE11或更低版本中，不支持或部分支持
-
在盒模型中较为灵活
-
-
弹性盒模型的内容包括：弹性容器、弹性子元素——项目
-
原理：为父元素设置flex属性，控制子元素的位置及排列方式
-
应用场景 : 移动端
1.2 设置弹性盒子——display属性
-
display: flex; 将对象作为弹性伸缩盒显示
-
display: inline-flex; 将对象作为内联块级弹性伸缩盒显示
-
注意：
将容器设置为flex布局之后，子元素中的float、clear、vertical-align属性都会失效
弹性子元素-类似于行内块元素，如果不设置宽高，由内容撑开；即使是行内元素也可以设置宽高
1.3 基本概念
-
flex容器、项目——弹性子元素
-
默认在容器中有两根轴线
-
默认主轴方向——x轴方向，水平向右（左侧为主轴起点，右侧为主轴终点）
-
默认交叉轴方向——y轴方向，水平向下（上方为交叉轴起点，下方交叉轴终点）
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
注意: 主轴不一定是x轴,还可以是y轴,有一边是主轴,另外 一边就是侧轴
-
1.4 容器属性——添加弹性容器上
-
flex-direction属性：设置主轴的方向，子元素的排列方向
-
flex-direction: row; 默认值，主轴方向为水平方向，起点在左端
-
flex-direction: row-reverse; 主轴方向为水平方向，起点在右端
-
flex-direction: column; 主轴方向为垂直方向，起点在上方
-
flex-direction: column-reverse; 主轴方向垂直方向，起点在下方
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .warp, .warp1 { width: 300px; height: 300px; background-color: aqua; /* 设置弹性盒*/ display: flex; } div { width: 100px; height: 100px; } /* X为主轴 */ .warp { flex-direction: row; flex-direction: row-reverse; } /* Y为主轴 */ .warp1 { flex-direction: column; flex-direction: column-reverse; } .warp .box1 { background-color: red; } .warp .box2 { background-color: pink; } .warp1 .box1 { background-color: purple; } .warp1 .box2 { background-color: blue; } </style> </head> <body> <div class="warp"> <div class="box1">box1</div> <div class="box2">box2</div> </div> <hr> <div class="warp1"> <div class="box1">box1</div> <div class="box2">box2</div> </div> </body> </html> -
-
justify-content 属性：设置主轴的对齐方式,弹性子元素在主轴方向上的对齐方式,
-
justify-content: flex-start; 默认值，主轴顶端对齐
-
justify-content: flex-end; 主轴的末端对齐
-
justify-content: center; 居中对齐，子元素位于弹性容器的中心
-
justify-content: space-between; 两端对齐，子元素和子元素之间有空白空间,项目之间的间隔都相等。
-
justify-content: space-around; 子元素之前、之间、之后都留有空白空间，且空间自行分配,项目之间的间隔比项目与边框的间隔大一倍。
-
space-evenly:弹性项目平均分布在该行上,相邻项目的间隔，项目与容器之间空间相等
/* X为主轴 */ .warp { /* 设置弹性盒*/ display: flex; flex-direction: row; justify-content: flex-start; justify-content: flex-end; justify-content: center; justify-content: space-between; justify-content: space-around; } /* Y为主轴 */ .warp1 { /* 设置弹性盒*/ display: flex; flex-direction: column; justify-content: flex-start; justify-content: flex-end; justify-content: center; justify-content: space-between; justify-content: space-around; } -
-
align-items属性：弹性子元素在（侧轴）交叉轴上的对齐方式
-
align-items: stretch; 默认值，如果弹性子元素没有高度或高度为auto，将占满整个容器的高度
-
align-items: flex-start;子元素在侧轴顶端对齐
-
align-items: flex-end; 子元素在侧轴末端对齐
-
align-items: center; 子元素在侧轴中间对齐
-
align-items: baseline; 子元素在第一行文字的基线对齐
.warp { /* 设置弹性盒*/ display: flex; flex-direction: row; align-items: flex-start; align-items: flex-end; align-items: center; align-items: stretch;(height: auto;) } /* align-items: baseline; */ <style> /* align-items: baseline; */ .box { width: 400px; height: 400px; background-color: pink; display: flex; align-items: baseline; margin: 50px auto; } .box span { width: 100px; height: 100px; background-color: red; font-size: 20px; color: #fff; } .box img { height: 150px; } </style> </head> <body> <div class="box"> <span>XJX</span> <img src="../img/bg1.jpg" alt=""> </div> </body> </html> -
-
flex-wrap属性：指定弹性盒子的子元素换行方式
-
flex-wrap: wrap; 换行，第一行显示在上方
-
flex-wrap: wrap-reverse; 换行，第一行显示在下方
-
flex-wrap: nowrap; 默认值，不换行
注意：父元素有固定高度且高度大于子元素高之和换行中间有缝隙
父元素高度有内容撑开换行没有缝隙
-
-
align-content属性：折行,行与行之间有间隙,去除间隙 ,控制侧轴对齐方式（去掉了中间的间隙）
要设置： flex-wrap: wrap;
-
align-content: flex-start; 顶端没有行间距
-
align-content: flex-end; 底对齐没有行间距
-
align-content: center; 居中没有行间距
-
align-content: space-between; 两端对齐，中间自动分配
-
align-content: space-around; 自动分配距离
注意：弹性盒项目为多行时有效
.warp { display: flex; /* 设置后没有间隙 上端 下端*/ align-content: flex-start; align-content: flex-end; /* 设置后没有间隙 中间*/ align-content: center; /* 自动分配距离 */ align-content: space-around; /* 两端对齐，中间自动分配 */ align-content: space-between; } -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
height: 500px;
background-color: chartreuse;
display: flex;
}
.box p:nth-child(1),
.box p:nth-child(3) {
width: 200px;
height: 480px;
background-color: red;
}
.box p:nth-child(2) {
/* 中间剩余空间分配 */
flex: 1;
height: 480px;
background-color: green;
}
</style>
</head>
<body>
<div class="box">
<p>左边</p>
<p>中间</p>
<p>右边</p>
</div>
</body>
</html>
-
复合写法
flex-flow:flex-direction flex-wrap; 例： flex-flow:cloumn wrap;
1.5 项目属性——写在弹性子元素上
-
align-self属性：调整自身在侧轴的对齐方式，弹性容器中被选中子项的对齐方式（设置在子元素中）
此属性和弹性容器的 align-items 属性作用相同
-
align-self: stretch; 如果弹性子元素没有高度或高度为auto，将占满整个容器的高度
-
align-self: flex-start;（侧轴）交叉轴起点对齐
-
align-self: flex-end; （侧轴）交叉轴终点对齐
-
align-self: center; （侧轴）交叉轴中点对齐
.warp .box1 { height: auto; background-color: red; align-self: auto; align-self: stretch; } .warp .box2 { background-color: pink; align-self: flex-start; align-self: flex-end; } .warp .box3 { background-color: brown; align-self: center; } -
-
order属性；子元素的排列次序
-
属性值为数值，没有单位，默认数值为0，数值越小，排列越靠前
-
必须为整数，不能为小数，可以为负数
.warp .box1 { background-color: red; order: 1; } .warp .box2 { background-color: pink; order: 0; } .warp .box3 { background-color: brown; order: -1; }flex
-
作用：用于指定弹性子元素如何分配空间。 flex是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性
-
-
flex-grow属性：子元素的放大比例（子项宽度和<父盒子宽度的时候）
-
属性值为数值，没有单位，默认值为0，表示不放大
-
负值对该属性无效
-
可以为小数
-
注意：当容器有剩余空间时有效
.warp { width: 400px; height: 400px; display: flex; } .warp div { width: 100px; height: 100px; } /* 剩余空间400-300=100 */ .box1 { background-color: red; flex-grow: 2; /* 100+100*2/4 = 150 */ } .box2 { background-color: pink; flex-grow: 1; /* 100+100*1/4=125 */ } .box3 { background-color: brown; /* 100+100*1/4=125 */ flex-grow: 1; } -
-
flex-shrink属性：子元素的缩小比例（子项宽度和>父盒子宽度的时候）
-
属性值为数值，没有单位
-
默认值为1，表示当空间不足时，等比例缩小
-
属性值为0，表示当空间不足时，不缩小
-
负值对该属性无效
-
-
可以为小数
.warp { width: 500px; height: 400px; display: flex; } .warp div { width: 200px; height: 100px; } /*不足空间，缺了100 600-500=100*/ .box1 { background-color: red; flex-shrink: 2; } .box2 { background-color: pink; flex-shrink: 1; } .box3 { background-color: brown; flex-shrink: 1; } 每个元素的宽 (当前元素的宽*shrink值)/(元素1*元素1shrink值+元素2*元素2shrink值...) * 溢出空间宽度
- 水平垂直居中的元素的父元素上设置相关属性 - display: flex; - justify-content: center; 主轴上子元素的对齐方式 - align-items: center; 交叉轴上子元素的对齐方式
<style>
.wrap {
width: 400px;
height: 400px;
background-color: chartreuse;
display: flex;
/* 水平居中 */
justify-content: center;
/* 垂直居中 */
align-items: center;
}
.wrap div {
width: 100px;
height: 100px;
background-color: pink;
font-size: 30px;
}
</style>
</head>
<body>
<div class="wrap">
<div>绝对居中</div>
</div>
</body>
</html>
flex-basis
-
定义弹性盒项目基准值（即参与计算的最终值————1.基于它计算容器的剩余空间2.基于它计算增长以后的最终值）
-
取值
-
auto 默认值
-
长度值 【一个长度单位或者一个百分比】
-
-
注意：与项目的宽、高同时存在时，flex-basis的优先级高于宽、高
2、calc()函数
-
用于动态计算长度值，值灵活
-
css3新增功能
-
任何长度值都可以使用calc()函数进行计算；
-
calc()函数支持 "+", "-", "*", "/" 运算；
-
calc()函数使用标准的数学运算优先级规则；
-
运算符前后都需要保留一个空格
-
语法： calc(表达式)
运算符前后都需要保留一个空格
width: calc(100% - 200px); 减号的前后添加空格
.box {
width: calc(100% - (10px + 20px) * 2);
height: 300px;
background-color: pink;
}
-
浏览器支持 在IE9+、Firefox、chrome、safari可以正常呈现
-
利用calc()实现三栏自适应布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .box { height: 500px; background-color: pink; } .box p { float: left; } /* 左右两栏 */ .box p:nth-child(1), .box p:nth-child(3) { width: 200px; height: 480px; background-color: red; } /* 中间 */ .box p:nth-child(2) { height: 480px; background-color: green; /* calc运算 */ width: calc(100% - 400px); } </style> </head> <body> <div class="box"> <p>左边</p> <p>中间</p> <p>右边</p> </div> </body> </html>
扫一扫
2845
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
