CSS-flex弹性布局

慕容嘉荣

2023-12-01

1.认识flex

Flex的发展史

2009年W3C 提出概念，但是官方没有flex这个词

2011年浏览器厂商决定使用flexbox，来形容它的布局特点

2015年W3C正式将其修改为flexbox布局

2016年5月官方正式公布最新的稳定的flex布局规范标准，各大浏览器的支持越来越稳定

定义

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

作用

它能够更加高效方便的控制元素的对齐、排列

可以自动计算布局内元素的尺寸，无论这个元素的尺寸是固定的还是动态的

控制元素在页面的布局方向

按照不同于DOM所指定排序方式对屏幕上的元素重新排序

应用场景

使用在现代浏览器中

有一定宽容度要求的设计中

相对

宽容度要求较高

绝对

宽容度要求较低，100%还原设计稿

Flex基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”

水平主轴（main axis）

垂直交叉轴（cross axis）

项目默认沿主轴排列

Flex布局语法

块级元素 display : flex;

行内元素 display : inline-flex;

注意

添加前缀 -webkit- -moz- -ms- -o-

设为 Flex 布局以后，flex item的float、clear和vertical-align属性将失效

2.flex弹性盒模型

2.1flex-direction主轴的方向

dispiay：flex是为了改成弹性盒模型

flex-direction决定主轴的方向

flex-direction：row row为默认值（从左到右的水平方向）

flex-direction：row-reverse（从右到左的水平方向）

flex-direction：column （从上到下的垂直方向）

flex-direction：column-reverse（从下到上的垂直方向）

2.2flex-wrap排列

flex-wrap：wrap可以保持换行

flex-wrap：wrap-reverse可以将排列顺序

原：1 2 改为现: 3 4

3 4 1 2

flex-flow为复合属性是flex-direction和flex-wrap的简写形式默认值为row nowrap

flex-flow：row nowrap

属性值去两个属性的值即可，只写一个值就表示另一个为默认值

根据团队习惯来，团队为了增加代码的可读性也会不使用简写

2.3justify-content

justify-content定义项目在主轴上的对齐方式

justify-content：flex-start；（默认值）左对齐

justify-content：flex-end；右对齐

justify-content：center；居中

就算有margin也会把整个item居中，并且item距离两边边框的大小相等

justify-content：space-between；两边对齐（项目之间的距离都相等）

justify-content：space-around；项目到边框的距离是项目项目之间的距离的一半且项目间距相等

justify-content：space-evenly；项目到边框的距离和项目之间的距离都相等（会受到子元素设置margin英雄）

2.4align-items

align-items定义项目在交叉轴上的对齐方式

align-items：flex-start；交叉轴的起点对齐（默认值）

align-items：flex-end；交叉轴的终点对齐

align-items：center；交叉轴的中间对齐