一、CSS弹性布局[弹性盒子、弹性元素]
一、CSS弹性布局
1.弹性盒子
弹性盒子的属性全都是写在父元素上面
1.1基础
解释:在父元素上写上display:flex;
或者display:inline-flex;
子元素就会出现弹性效果,其中flex是块元素,inline-flex是行内块元素。
如:
A:未加入display:flex;
B:加入display:flex;
1.2设置分布主轴
解释:该属性为:flex-direction: row;//默认是该参数
flex-direction: row;//元素从右向左排列
flex-direction: row-reserve;//元素从左向右排列
flex-direction: column;//元素从上向下排列
flex-direction: column-reverse;//元素从下向上排列
1.3设置换行与否
解释:该属性为:flex-wrap: nowrap;//默认是该参数
,注意不换行(nowrap),当父元素大小放不小子元素大小总和时,每个子元素就会等比例压缩,占满盒子
选项 | 说明 |
---|---|
nowrap | 元素不拆行或不拆列(默认值) |
wrap | 容器元素在必要的时候拆行或拆列 |
wrap-reverse | 容器元素在必要的时候拆行或拆列(以相反的顺序) |
1.4 flex-flow
解释:flex-flow 是 flex-direction 与 flex-wrap 的组合简写模式
代码:flex-flow: row nowrap;
1.5 主轴设置
解释:该属性为:justify-content:flex-start;//默认值
,用于控制元素在主轴上的排列方式
选项 | 说明 |
---|---|
flex-start | 元素紧靠主轴起点(默认) |
flex-end | 元素紧靠主轴终点 |
center | 元素从弹性容器中心开始 |
space-between | 第一个元素靠起点,最后一个元素靠终点,余下元素平均分配空间 |
space-around | 每个元素两侧的间隔相等。所以,元素之间的间隔比元素与容器的边距的间隔大一倍 |
space-evenly | 元素间距离平均分配 |
1.6 交叉轴设置
1.6.1 设置单行元素
如果把该属性应用到多行元素效果会很差
解释:该属性为:align-items:stretch;//默认值
,用于控制容器元素在交叉轴上的排列方式
选项 | 说明 |
---|---|
stretch | 元素被拉伸以适应容器(默认值)(体现该值效果时,不能设置高度) |
center | 元素位于容器的中心 |
flex-start | 元素位于容器的交叉轴开头 |
flex-end | 元素位于容器的交叉轴结尾 |
演示:
- stretch
1.6.2 设置多行元素
该属性为:align-content:stretch;//默认值
,用于控制容器元素在交叉轴上的排列方式,需要配合设置flex-wrap: wrap;//如果不换行体现不出来效果
选项 | 说明 |
---|---|
stretch | 将空间平均分配给元素(体现该值效果时,不能设置高度) |
flex-start | 元素紧靠主轴起点 |
flex-end | 元素紧靠主轴终点 |
center | 元素从弹性容器中心开始 |
space-between | 第一个元素靠起点,最后一个元素靠终点,余下元素平均分配空间 |
space-around | 每个元素两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍 |
space-evenly | 元素间距离平均分配 |
2.弹性元素
应用于子元素,也就是父元素设置display:flex;,其子元素可以设置下面的弹性元素
1.不能使用 float 与 clear 规则
2.弹性元素均为块元素
3.绝对定位的弹性元素不参与弹性布局
2.1 单个元素主轴设置
解释:属性为align-self:stretch;
,需要父元素里面的子元素都在一行即flex-wrap:nowrap;
,这样就能使得子元素能够单独被设置
选项 | 说明 |
---|---|
stretch | 将空间平均分配给元素 |
flex-start | 元素紧靠主轴起点 |
flex-end | 元素紧靠主轴终点 |
center | 元素从弹性容器中心开始 |
2.2 空间分配
解释:该属性为flex-grow:1;
用于将弹性盒子的可用空间,分配给弹性元素。可以使用整数或小数声明。
注意其会把盒子剩余空间都占满。元素flex-wrap:nowrap;
于flex-wrap:wrap;
都可以
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.a{display: flex;flex-direction: row;flex-wrap: nowrap;height: 800px;width: 500px;align-content:center;background-color: red;}.a1{height: 100px;width: 50px;background: pink;flex-grow: 1;}.a2{height: 100px;width: 50px;background: blue;flex-grow: 2;}.a3{height: 100px;width: 50px;background: skyblue;flex-grow: 1;}</style>
</head>
<body><div class="a"><div class="a1"></div><div class="a2"></div><div class="a3"></div></div>
</body>
</html>
效果:
设置
flex-grow
前:
设置
flex-grow
后(上面代码效果):
2.3 空间压缩
解释:该属性为flex-shrink: 1;//默认为1
在弹性盒子装不下元素时定义的缩小值,该属性使用于flex-wrap:nowrap;
即不换行时,会自动压缩,每个元素默认都有flex-shrink:1;。‘1’这个位置数越大压缩比列越大即元素越小,当flex-shrink:0; 元素不会进行任何压缩。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.a{display: flex;flex-direction: row;flex-wrap: nowrap;height: 800px;width: 100px;background-color: red;}.a1{height: 100px;width: 50px;background: pink;flex-shrink: 1;}.a2{height: 100px;width: 50px;background: blue;flex-shrink: 2;}.a3{height: 100px;width: 50px;background: skyblue;flex-shrink: 1;}</style>
</head>
<body><div class="a"><div class="a1"></div><div class="a2"></div><div class="a3"></div></div>
</body>
</html>
效果:
flex-shrink不为0时(上面代码效果)
flex-shrink:0;
2.4 显示优先级
解释:该属性是order:0;
数值越小越靠前(也就是在弹性盒子主轴最前面),配合js效果很好
一、CSS弹性布局[弹性盒子、弹性元素]相关推荐
- 弹性布局最后一行的元素的对齐方式设置
随着技术的不断更新换代,网页布局也增加了弹性布局方式,不得不说弹性布局是真的很好用,但好用的同时也给我们带来一些不便之处.比如在布局列表内容时经常会用到子项目的两端对齐,但最后一行不需要两端对齐 我们 ...
- 6.前端CSS之布局属性(盒子,float,overflow,opsition,z-index,opacity)
目录 1. 盒子模型(margin,padding) 2.浮动(float) 3.溢出属性(overflow) 4. 定位(position)[relative,absolute,fixed] 5.z ...
- CSS页面布局之盒子模型
目录 1 盒子模型 1.1 看透网页布局的本质 1.2 盒子模型组成 1.3 边框(border) 1.4 表格的细线边框 1.5 边框会影响盒子实际大小 1.6 内边距(padding) 案例:新浪 ...
- CSS之布局(盒子的垂直布局)
盒子的垂直布局: <!DOCTYPE html> <html><head><meta charset="UTF-8"><tit ...
- CSS之布局(盒子的水平布局)
盒子的水平布局: <!DOCTYPE html> <html><head><meta charset="UTF-8"><tit ...
- CSS之布局(行内元素的盒模型)
行内元素的盒模型: <!DOCTYPE html> <html><head><meta charset="UTF-8"><ti ...
- CSS之布局(盒子模型--外边距)
盒子模型--外边距: <!DOCTYPE html> <html><head><meta charset="UTF-8"><t ...
- CSS之布局(盒子的尺寸)
盒子的尺寸: <!DOCTYPE html> <html><head><meta charset="UTF-8"><title ...
- CSS之布局(盒子模型--内边距)
盒子模型--内边距: <!DOCTYPE html> <html><head><meta charset="UTF-8"><t ...
- CSS之布局(盒子模型—边框)
盒子模型-边框: <!DOCTYPE html> <html><head><meta charset="UTF-8"><tit ...
最新文章
- plsql创建中文表头_如何使用快捷键来提升Excel斜线表头绘制速度,照着学就行了...
- mysql批量插入定时器
- mysql range用法_MySQL的常用函数
- 转子碰磨 matlab,航空科普:什么是航空发动机转子碰磨?
- beta版本项目冲刺
- 面试官系统精讲Java源码及大厂真题 - 28 Future、ExecutorService 源码解析
- C语言10进制写法,用c语言编写函数Htoi(s)把由16进制数成10进制的数
- Spring中使用JdbcTemplate和HibernateTemplate的数据库操作
- 抓包工具tcpdump和tshark
- ios 文本翻转_反转文字的方法_深入浅出 iPhone 开发 (使用 Swift4)_iOS视频-51CTO学院...
- 使用.NET和Jquery打造简单的便签纸
- 人工智能、机器学习、神经网络、深度学习之间的关系
- 阿里云EMAS 移动推送发布uni-app插件
- windows7系统的“ .exe”图标显示不正常解决办法
- 微信公众号数据2019_全国公众号总排名2019,全国微信公众号排名
- 数字认证机构(CA)业务流程
- Lua IDE - x-studio 强大的IDE
- 3d计算机原理,3d的技术原理有哪些
- php递归函数return问题
- Jsoup如何获得某元素后面的所有兄弟元素