06-移动web之flex布局
一、基本概念
- flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局
- Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
- 任何一个容器都可以指定为 Flex 布局。
- 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
- flex布局就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。
1.flex的特点
- 设置了display: flex;的元素称之为父项。
- 父项里面的亲儿子元素称之为子项。
- 父项中有一条默认水平向右的轴称之为主轴。
- 父项有一条垂直与主轴且默认垂直向下的轴称之为侧轴。
- 设置了flex，里面的子项不论是什么元素显示模式，都拥有了设置宽高的权利。
二、flex中的父项属性
1.改变主轴方向（flex-direction）
/* 改变主轴方向 */
/* 主轴垂直向下，当主轴占据侧轴位置时，侧轴会转换到主轴位置上，且方向时钟水平向右 */
/* flex-direction: column; */
/* 主轴垂直向上，侧轴水平向右 */
/* flex-direction: column-reverse; */
/* 默认值，主轴水平向左，侧轴垂直向下 */
/* flex-direction: row; */
/* 主轴水平向右，侧轴垂直向下 */
flex-direction: row-reverse;
注意
- 只能控制主轴的方向
- 主轴和侧轴与x，y轴完全不是一个东西。
- 主轴控制的实际上是控制流的方向。
- 主轴为垂直方向时，占据了侧轴的位置，此时侧轴就会转换为主轴方向，方向始终是水平向右。
2.改变子项在主轴上的排列顺序（justify-content）
/* 默认从起点到终点排列 */
/* justify-content: flex-start; */
/* 从终点到起点排列 */
/* justify-content: flex-end; */
/* 居中对齐 */
justify-content: center;
/* 先固定；两端，剩下的元素平分剩下的空间 */
/* justify-content: space-between; */
/* 每个子项两侧的间隔相等。所以，子项之间的间隔比子项与边框的间隔大一倍 */
/* justify-content: space-around; */
/* 均衡分布,子项分分父相空间 */
justify-content: space-evenly;
3.设置侧轴上的子项排列方式（align-items 单行）
/* 从起点到终点 */
/* align-items: flex-start; */
/* 从终点到起点 */
/* align-items: flex-end; */
/* 居中对齐 */
/* align-items: center; */
/* 拉伸，默认值
当侧轴处置垂直向下时，如果子项未设置高度或设为auto，将占满整个容器的高度。
当侧轴水平向右时 如果子项未设置宽度或设为auto，将占满整个容器的宽度*/
align-items: stretch;
默认值为stretch
4.换行（flex-wrap）
默认子元素是不换行的，如果装不开，会缩小子元素的宽度，强制一行排列。
/* 默认不换行，强行缩小子元素使其在一行上显示 */
flex-wrap: nowrap;
/* 换行 */
/* flex-wrap: wrap; */
/* 反向换行 */
/* flex-wrap: wrap-reverse; */
注意
- 必须所有子项的宽度相加大于父相宽度才能换行，否则即使设置换行也无效。
- 换行时候为什么行之间间距那么大？
原因：由于侧轴的默认属性是stretch，有多少行就将父元素拉伸为多少份，每一份中的每一行在起点对齐，每一份多出每一行的高度就是各行之间的空隙。
解决：1.设置align-content:flex-atart;
2.将盒子高度去掉或者auto，即可铺满整个父项。
4.设置侧轴上子项的排列方式(align-content)
/* 换行 */
flex-wrap: wrap;
/* 起点对齐 */
/* align-content: flex-start; */
/* 终点对齐 */
/* align-content: flex-end; */
/* 居中对齐 */
/* align-content: center; */
/* 环绕对齐 */
/* align-content: space-around; */
/* 两端对齐 */
/* align-content: space-between; */
/* 默认 */
/* align-content: stretch; */
注意：必须在换行的前提下设置
5.六面骰子案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transform-style: preserve-3d;
animation: tou 1s infinite linear;
}
@keyframes tou {
0% {
transform: rotate(0);
}
100% {
transform: rotateX(360deg) rotateY(360deg);
}
}
.container:hover {
animation-play-state: paused;
}
section[class ^='box'] {
position: absolute;
top: 0;
left: 0;
display: flex;
width: 200px;
height: 200px;
margin-top: 10px;
background-color: #09f;
padding: 20px;
border: 1px solid #000;
}
section .dot {
width: 30px;
height: 30px;
background-color: #000;
border-radius: 50%;
}
/* 前面 */
.box1 {
transform: translateZ(120px);
justify-content: center;
align-items: center;
}
/* 后面 */
.box2 {
transform: translateZ(-120px);
flex-direction: column;
justify-content: space-between;
align-items: center;
}
/* 左面 */
.box3 {
transform: rotateY(90deg) translateZ(120px);
justify-content: space-between;
}
.box3 div:nth-child(2) {
align-self: center;
}
.box3 div:nth-child(3) {
align-self: flex-end;
}
/* 右面 */
.box4 {
transform: rotateY(-90deg) translateZ(120px);
flex-direction: column;
justify-content: space-between;
}
.info {
display: flex;
justify-content: space-between;
}
/* 上面 */
.box5 {
transform: rotateX(90deg) translateZ(120px);
flex-direction: column;
justify-content: space-between;
}
.box5>.dot {
align-self: center;
}
.box6 {
transform: rotateX(-90deg) translateZ(120px);
flex-direction: column;
justify-content: space-between;
}
</style>
</head>
<body>
<div class="container">
<section class="box1">
<div class="dot"></div>
</section>
<section class="box2">
<div class="dot"></div>
<div class="dot"></div>
</section>
<section class="box3">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</section>
<section class="box4">
<div class="info">
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="info">
<div class="dot"></div>
<div class="dot"></div>
</div>
</section>
<section class="box5">
<div class="info">
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="dot"></div>
<div class="info">
<div class="dot"></div>
<div class="dot"></div>
</div>
</section>
<section class="box6">
<div class="info">
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="info">
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="info">
<div class="dot"></div>
<div class="dot"></div>
</div>
</section>
</div>
</body>
</html>
6.第四面详讲
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
/* 2.将大盒子设为容器 */
display: flex;
/* 3.转换主轴方向 */
flex-direction: column;
/* 4.主轴两端对齐 */
justify-content: space-between;
width: 150px;
height: 150px;
margin: 100px auto;
background-color: #09f;
padding: 30px;
}
section .info {
/* 1.设为容器，子项沿主轴两端对齐 */
display: flex;
justify-content: space-between;
border: 1px solid #000;
}
section .info .dot {
width: 30px;
height: 30px;
background-color: #000;
border-radius: 50%;
}
</style>
</head>
<body>
<section class="container">
<div class="info">
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="info">
<div class="dot"></div>
<div class="dot"></div>
</div>
</section>
</div>
</body>
</html>
7.flex-flow属性
flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性
flex-flow:row wrap;
/* 复合写法，没有顺序 */
flex-flow: column wrap;
三.flex中的子项属性
1.order属性
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
.info1 {
order: 1;
}
.info3 {
order: -1;
}
3.align-self属性
.info2 {
align-self: center;
}
.info3 {
align-self: flex-end;
}
4.flex属性
4.1 flex-grow
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
display: flex;
width: 400px;
height: 350px;
margin: 50px auto;
background-color: #f34;
border: 2px solid #000;
}
/* 子相可以设置宽高 */
span {
width: 50px;
height: 50px;
margin: -1px;
background-color: #09f;
border: 2px solid #fff;
}
/* order是定义子项的排列顺序，默认值是0，数字越小，排列越靠前 */
.box1 span:nth-child(3) {
order: -1;
}
.box1 span:first-child {
order: 1;
}
.box2 {
align-items: center;
}
/* align-self是单独控制自己在侧轴上的排列方式 */
.box2 span:first-child {
align-self: flex-start;
}
.box2 span:nth-child(3) {
align-self: flex-end;
}
/* flex-grow:是子项占父项目宽度 */
.box3 span:first-child {
flex-grow: 2;
}
.box3 span:nth-child(3) {
flex-grow: 1;
}
/* flex-shrink：表示当flex容器空间不足是，会将子项进行收缩，默认是1，0表示不收缩，值越大收缩越厉害 */
.box4 span:first-child {
flex-shrink: 0;
}
.box4 span:nth-child(3) {
flex-shrink: 2;
}
/* flex-basis：定义分配空间前子项的默认大小 */
.box5 span:first-child {
flex-basis: 10px;
}
.box5 span:nth-child(3) {
flex-basis: 100px;
}
/* flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 */
.box6 span:first-child {
flex: 0 0 30px;
}
.box6 span:nth-child(3) {
flex: 1 1 auto;
}
</style>
</head>
<body>
<div class="box1">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<div class="box2">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<div class="box3">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<div class="box4">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<div class="box5">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<div class="box6">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</body>
</html>
4.1 flex-shrink
<div class="container container2">
<div class="info">1</div>
<div class="info">2</div>
<div class="info">3</div>
<div class="info">4</div>
<div class="info">5</div>
<div class="info">1</div>
<div class="info">2</div>
<div class="info">3</div>
<div class="info">4</div>
<div class="info">5</div>
</div>
/* flex-shrink：表示当flex容器空间不足是，会将子项进行收缩，默认是1，0表示不收缩，值越大收缩越厉害 */
.container2 .info:first-child {
flex-shrink: 0;
}
.container2 .info:nth-child(3) {
flex-shrink: 2;
}
.container2 .info:nth-child(6) {
flex-shrink: 5;
}
4.1 flex-basis
<div class="container container3">
<div class="info">1</div>
<div class="info">2</div>
<div class="info">3</div>
<div class="info">4</div>
<div class="info">5</div>
</div>
/* flex-basis：定义分配空间前子项的默认大小 */
.container3 .info:first-child {
flex-basis: 10px;
}
.container3 .info:nth-child(3) {
flex-basis: 100px;
}
.container3 .info:nth-child(5) {
flex-basis: 20%;
}
4.4 flex
/* flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 */
.container4 .info:first-child {
flex: 0 0 30px;
}
.container4 .info:nth-child(3) {
flex: 1 1 auto;
}
.container4 .info:nth-child(5) {
flex: 1;
}
<div class="container container4">
<div class="info">1</div>
<div class="info">2</div>
<div class="info">3</div>
<div class="info">4</div>
<div class="info">5</div>
</div>
一般情况下flex只写一个值，表示子项占父项的份数，例如有6个盒子，每个flex=1；那么每个盒子都占父相的1/6.
相关推荐：
在线演示flex网站
https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/
06-移动web之flex布局的更多相关文章
- 2021年3月-第02阶段-前端基础-Flex 伸缩布局-移动WEB开发_flex布局
移动web开发--flex布局 1.0 传统布局和flex布局对比 1.1 传统布局 兼容性好 布局繁琐 局限性,不能再移动端很好的布局 1.2 flex布局 操作方便,布局极其简单,移动端使用比较广 ...
- 移动web开发之布局
移动web开发流式布局 1.0 移动端基础 1.1浏览器现状 PC端常见浏览器:360浏览器.谷歌浏览器.火狐浏览器.QQ浏览器.百度浏览器.搜狗浏览器.IE浏览器. 移动端常见浏览器:UC浏览器,Q ...
- 【前端】移动端Web开发学习笔记【2】 & flex布局
上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...
- [Web 前端 ] 还在用浮动吗？CSS flex布局你了解多少？
cp from : https://blog.csdn.net/wwwxuewen/article/details/80859764 传统的布局:围绕盒子模型(border.margin.paddin ...
- 移动Web开发-WebApp（flex布局+移动端导航案例）
实际开发中的像素:css像素设备像素比dpr=设备像素/css像素标清屏dpr=1 高清屏dpr=2缩放改变的是css像素大小PPI(每英寸的物理像素点)=根号(屏幕横向分辨率²+屏幕纵向分辨率²)/ ...
- web网页 页面布局的几种方式（转）
web网页 页面布局的几种方式 转载 2017年06月16日 12:19:40 2218 网页基本布局方式: (1)流式布局 Fluid 流布局与固定宽度布局基本不同点 就在于对网站尺寸的侧量单位不同 ...
- 在移动端中的flex布局
flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局, 弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...
- 从web移动端布局到react native布局
在web移动端通常会有这样的需求,实现上中下三栏布局(上下导航栏位置固定,中间部分内容超出可滚动),如下图所示: 实现方法如下: HTML结构: <div class='container'&g ...
- CSS魔法堂：Flex布局
前言 Flex是Flexible Box的缩写,就是「弹性布局」.从2012年已经面世,但由于工作环境的原因一直没有详细了解.最近工作忙到头晕脑胀,是要学点新东西刺激一下大脑,打打鸡血. Flex就 ...
随机推荐
- M-Renamer方法名修改器，iOS项目方法名重构，Objective-C/Swift，代码模型预判，减少误改的机率，替换速度更快，可视化操作，傻瓜式操作，一键操作，引用处自动修改，马甲包的福音
M-Renamer M-Renamer(Method-Name-Renamer)类方法名修改器,采用链式解析头文件,代码模型预判,减少误改的机率,替换速度更快:可以解析整个项目大多数类的方法,可视化操 ...
- 信息收集工具-dimtry
GitHub地址: kali下也是自带的: -s以及-e 参数需要用到Google搜索 1.获取whois主机ip信息 2.扫描端口,根据banner信息判断服务
- 安装sql server 2005时出现“安装汇编”错误的解决办法
今天安装sql server 2005 management studio到最后步骤的时候报“安装汇编”错误,卸载重装的几遍还是不行,最后将net framework 3.5删除后,终于安装成功了.
- .NET Core使用NPOI导出复杂，美观的Excel详解
前言: 这段时间一直专注于数据报表的开发,当然涉及到相关报表的开发数据导出肯定是一个不可避免的问题啦.客户要求要导出优雅,美观的Excel文档格式的来展示数据,当时的第一想法就是使用NPOI开源库来做 ...
- 学习mybatis框架时配置xml文件解决select莫名其妙报错问题
遇到这种情况,如果语法没有错误,那就可能是你的eclipse在耍你!!! 怎么弄呢,重新建立一个文件,把原来的代码复制到新的文件中就ok啦!不用谢我,我叫雷锋
- AC自动机（初步学习）
一开始讲AC自动机就是在字典树上做一个KMP,吓得我感觉好难,不过了解了以后,感觉也就是有点难度,不吓人. 它只是在字典树上用了KMP的思想 典型问题:给n个模式串和一个文本串,问有多少个模式串在文本 ...
- nginx使用手册+基本原理+优缺点
一.nginx优点 1.反向代理 1.正向代理: 客户端和原始服务器(origin server)之间的服务器,为了从原始服务器取得内容,客户端向代理发送一个请求并指定目标(原始服务器),然后代理向原 ...
- WeChat-SmallProgram：如何定义一个组件
创建组件所需的文件: 1.在根目录创建 Componet 文件夹 2.再创建一个select文件夹 3.然后:右键这个文件夹,新建下面的这个 Component.然后输入需要创建的名称,我这里为了方便 ...
- qq，新浪分享
var _title,_source,_sourceUrl,_pic,_showcount,_desc,_summary,_site; // 新浪微博分享$('.xlwb-share').on('cl ...
- softmax及python实现
相对于自适应神经网络.感知器,softmax巧妙低使用简单的方法来实现多分类问题. 功能上,完成从N维向量到M维向量的映射 输出的结果范围是[0, 1],对于一个sample的结果所有输出总和等于1 ...