---

一、Flex布局详解

1.Flex布局的概念

1.1 传统布局

盒子模型：我们知道当并列书写多个div标签，它们会纵向向下排位，如果我们想将多个div并列成一排，就得借助position，float，或display属性，这便是传统的盒模型做法。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

不同部分的说明：

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

1.2 Flex布局

Flex容器：Flex布局则是一种新的布局方案，通过为修改父div的display属性，让父元素成为一个flex容器，从而可以自由的操作容器中子元素(项目)的排列方式。

例如我们让多个div横向排列，传统做法是使用浮动，但浮空后因为脱离文档流的缘故，父元素会失去高度，这又涉及了清除浮动等一系列的问题。

而flex布局相对简单很多，修改父元素display:flex，你会发现div自动就排列成了一行，而且没有浮动之后的副作用，从回流角度考虑，flex的性能更优于float；随着浏览器不断兼容以及旧版本的淘汰，flex布局注定会成为更为流行的布局方案。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

1.3 Flex布局声明

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

.box{display: flex;
}

行内元素也可以使用 Flex 布局。

.box{display: inline-flex;
}

Webkit 内核的浏览器，必须加上-webkit前缀。

.box{display: -webkit-flex; /* Safari */display: flex;
}

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

2.Flex布局的容器属性

Flex布局的容器属性主要有：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。

2.1 flex-direction属性

flex-direction属性决定主轴的方向（即项目的排列方向）。

.box {flex-direction: row | row-reverse | column | column-reverse;
}

值说明：

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

row横向排列，项目排列顺序为正序1-2-3。
row-reverse横向排列，项目顺序为倒序3-2-1。
column纵向排列，项目顺序为正序1-2-3。
column-reverse纵向排列，项目顺序为倒序3-2-1。

column-reverse排列示意图：

2.2 flex-wrap属性

flex-wrap属性用于控制项目是否换行。

.box{flex-wrap: nowrap | wrap | wrap-reverse;
}

值说明：

• nowrap（默认）：不换行。
• wrap：换行，第一行在上方。
• wrap-reverse：换行，第一行在下方。

nowrap示意图：

wrap示意图：

wrap-reverse示意图：

2.3 flex-flow属性

flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。

.box {flex-flow: <flex-direction> || <flex-wrap>;
}

2.4 justify-content属性

justify-content属性用于控制项目在横轴的对齐方式，默认flex-start即左对齐，center 为居中，对应的flex-end为右对齐。

.box {justify-content: flex-start | flex-end | center | space-between | space-around;
}

值说明：

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

示意图：

2.5 align-items属性

align-items属性用于控制项目在纵轴排列方式，默认stretch即如果项目没设置高度，或高度为auto，则占满整个容器，下面第一张图的项目没设置高度，其余图片中均为60px。

.box {align-items: flex-start | flex-end | center | baseline | stretch;
}

值说明：

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

示意图：

注意，常理来说justify-content与align-items默认分别处理项目横轴，纵轴的对齐方式，但如果我们修改了flex-direction为column，它们处理的轴向会交换，也就是justify-content处理纵轴，align-items处理横轴。

2.6 align-content属性

align-content属性用于控制多行项目的对齐方式，如果项目只有一行则不会起作用；默认stretch，即在项目没设置高度，或高度为auto情况下让项目填满整个容器，与align-items类似。

.box {align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

值说明：

• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch（默认值）：轴线占满整个交叉轴。

示意图：







align-content其实也有baseline等其它可用值，表现与上面介绍过的属性一致，只是单行项目或多行项目的区别。

3.Flex布局的项目属性

Flex布局的项目属性主要有：order、flex-grow、flex-shrink、flex-basis、flex、align-self。

3.1 order属性

order属性用于决定项目排列顺序，数值越小，项目排列越靠前。

.item {order: <integer>;
}

3.2 flex-grow属性

flex-grow属性用于决定项目在有剩余空间的情况下是否放大，默认不放大；注意，即便设置了固定宽度，也会放大。

.item {flex-grow: <number>; /* default 0 */
}

假设默认三个项目中前两个个项目都是0，最后一个是1，最后的项目会沾满剩余所有空间。

假设只有第一个项目默认为0，后面两个项目flex-grow均为1，那么后两个项目平分剩余空间。

假设第一个项目默认为0，第二个项目为flex-grow:2，最后一个项目为1，则第二个项目在放大时所占空间是最后项目的两倍。

3.3 flex-shrink属性

flex-shrink属性用于决定项目在空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小；注意，即便设置了固定宽度，也会缩小。

.item {flex-shrink: <number>; /* default 1 */
}

3.4 flex-basis属性

flex-basis属性用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会width属性高，因此会覆盖widtn属性。

.item {flex-basis: <length> | auto; /* default auto */
}

上图中先设置了flex-basis属性，后设置了width属性，但宽度依旧以flex-basis属性为准。

3.5 flex属性

flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度。

.item {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

3.6 align-self属性

align-self属性用于让个别项目拥有与其它项目不同的对齐方式，各值的表现与父容器的align-items属性完全一致。

.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

总结

Flex布局在小程序应用还是很广的也可以用于网页。小程序也有很多UI框架可以使用这样Flex布局不需要自己写。

【愚公系列】2022年04月 微信小程序-Flex布局详解相关推荐

1. 【愚公系列】2022年08月 微信小程序-icon图标详解

   文章目录 前言 一.自带图标 二.实现图标的五种方案 1.图片 2.精灵图 3.CSS绘图 4.矢量字体 4.1 使用步骤 5.SVG格式 前言 在小程序中经常会用到各种各样的图标,如果这些图标都使用 ...

2. 【愚公系列】2022年04月 微信小程序-多人音视频对话

   文章目录 前言 一.多人音视频对话 1.wxml 2.js 前言 微信小程序开发多人音视频对话首先得去小程序管理后台,「开发」-「接口设置」中自助开通该组件权限. 相关属性: 一级类目/主体类型 二级 ...

3. 2022年04月 微信小程序-富文本和文本的使用

   前言 富文本格式(Rich Text Format)即RTF格式,又称多文本格式,是由微软公司开发的跨平台文档格式.大多数的文字处理软件都能读取和保存RTF文档.它是一种方便于不同的设备.系统查看的文 ...

4. 【愚公系列】2022年04月 微信小程序-实时音视频录制

   文章目录 前言 一.实时音视频录制 1.js代码 2.wxml代码 3.效果 前言 小程序的实时音视频播放需要先去微信开发者平台开通权限,「开发」-「接口设置」中自助开通该组件权限. 类目属性如下: ...

5. 【愚公系列】2022年04月 微信小程序-项目篇(公交查询)-02周边站点-获取位置和城市信息

   文章目录 前言 1.相关API 一.获取位置和城市信息 前言 1.相关API 逆地址解析:提供由经纬度到文字地址及相关位置信息的转换能力,广泛应用于物流.出行.O2O.社交等场景.服务响应速度快.稳定 ...

6. 【愚公系列】2022年04月 微信小程序-项目篇(公交查询)-01周边站点

   文章目录 前言 1.公交车站的意义 2.公交车站的作用 一.周边站点 1.wxml 2.js 3.wxss 4.实际效果 前言 1.公交车站的意义 转变现有出行模式,倡导公共交通和混合动力汽车.电动车 ...

7. 【愚公系列】2022年04月 微信小程序-项目篇(公交查询)-06站点查询

   文章目录 前言 1.相关API 2.相关案例 一.站点搜索 1.wxml 2.js 3.效果 总结 前言 1.相关API 接口地址:https://api.jisuapi.com/transit/st ...

8. 【愚公系列】2022年04月 微信小程序-地图的使用之面聚合

   文章目录 前言 一.面聚合 1.wxml 2.js 3.wxss 4.实际效果 前言 地图基础属性: 属性 类型 默认值 必填 说明 最低版本 longitude number 是 中心经度 1.0. ...

9. 【愚公系列】2022年04月 微信小程序-项目篇(公交查询)-03周边站点-获取周边站址

   文章目录 前言 1.相关API 2.相关案例 一.获取周边站址 总结 前言 1.相关API 接口地址:https://api.jisuapi.com/transit/nearby 返回格式:JSON, ...

10. 【愚公系列】2022年04月 微信小程序-项目篇(公交查询)-04周边站点-地图展示

    文章目录 前言 1.相关API 一.地图展示 1.js 2.wxml 前言 1.相关API 本文使用的是百度地图API,百度地图JavaScript API是一套由JavaScript语言编写的应用程 ...

最新文章

1. [转载]dorado学习笔记(二)
2. Hybris商品图片导入与压缩有关的配置.
3. file获取文件后缀_Python 工匠：高效操作文件的三个建议
4. 循环神经网络——裁剪梯度（应对梯度爆炸）
5. 全能型 uWSGI 配置
6. 微信小程序毕业设计 基于微信小程序外卖点餐系统开题报告
7. window10耳机插入没有声音，电脑里没有Realtek 高清晰音频管理器解决方法
8. Win11 Android Stuido虚拟机启动失败、崩溃
9. STM32开发环境的搭建
10. PLC与7种常见输入输出设备的连接方式
11. oracle热备是什么意思,Oracle冷备和热备脚本
12. 解决Vue项目: verbose stack Error: unable to resolve dependency tree
13. img标签，显示服务器图片
14. python剪切文件_python剪切文件 - osc_42713235的个人空间 - OSCHINA - 中文开源技术交流社区...
15. [从0开始机器学习]4.线性回归 正规方程
16. 省赛 蓝桥杯2015 JavaC
17. 《公司的力量》第一集 公司！公司！
18. 【2. Nginx高级知识】
19. 计算机音乐安顺学院教务网络管理系统,安顺学院教务网络管理系统jwxt.asu.edu.cn/jwweb/...
20. Mongo Shell 文档搜索

热门文章

1. CAD表格制作之CAD制图软件中如何合并表格？
2. UML建模工具最近更新（-2022年7月）（1）Papyrus、EA
3. 一款比PowerDesigner好用的uml建模工具chiner
4. 广域网、局域网和城域网（ip城域网和因特网）
5. linux+ipv6免流量下载,Ubuntu 12.04 校园网下使用IPv6源 免流量更新
6. Python中神奇的迭代器和生成器
7. multisim常用d触发器_怎么在multisim找D触发器
8. Windows 远程桌面（RDP）客户端相关工具
9. 『信息安全技术』 标准系列合集（467个）
10. eclipse集成阿里代码规范工具p3c