Flex布局/弹性布局模型

Flex布局简介

• Flex布局是一种浏览器提倡的布局模型
• Flex布局的网页更简单、灵活
• 避免浮动脱标的问题

兼容性搜索：https://caniuse.com/

Flex布局模型构成

作用：

• 基于Flex精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
• Flex布局非常适合结构化布局。

设置方式：父元素添加 display:flex，子元素可以自带的挤压或拉伸。 组成部分：弹性容器、弹性盒子、主轴、侧轴/交叉轴

水平排列：默认主轴在水平，弹性盒子都是沿着主轴排列。

主轴对齐方式

使用 justify-contenr调节元素在主轴的对齐方式。

常用属性：

• 居中效果：

代码语言：javascript复制

justify-content:center;

• 间距在弹性盒子（子级）之间：

代码语言：javascript复制

justify-content:soace-between;

• 所有地方的间距都相等：

代码语言：javascript复制

justify-content:space-evenly;

• 间距加载子级的两侧 视觉效果：子级之间的距离是父级两头距离的2倍

代码语言：javascript复制

justify-content:spance-around;

侧轴对齐方式

使用 align-items调节元素在侧轴的对齐方式

修改侧轴对齐方式属性：

1. 添加到弹性容器：align-items
2. 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）：align-self

• 沿侧轴居中排列:

代码语言：javascript复制

align-items: center;

• 拉伸效果，默认值，现有状态，测试的时候去掉子级的高度

代码语言：javascript复制

align-items: stretch;

• 单独设置某个弹性盒子的侧轴对齐方式

代码语言：javascript复制

.box div:nth-child(2) {
            align-self: center;
        }

注意：当侧轴方向不给宽高值或者给 stetchi时，弹性盒子会自动拉伸到跟父级一样高。若给了高或拉伸后，弹性盒子的宽高为给出的宽高值或内容充满的值。

伸缩比

使用 flex属性修改弹性盒子伸缩比

语法：

代码语言：javascript复制

flex:值；

取值为整数值，按份计算，只占用父级剩余尺寸。

比如设置了2个盒子A和B，A盒子的取值为3，B盒子的取值为1，则表示把盒子剩余尺寸均分为：3 1=4份，A盒子占3份，B盒子占1份。

因为 Flex布局中都是是弹性盒子，所以伸缩比的好处是根据父级盒子的变化而变化，当浏览器窗口发生变化后，弹性盒子的尺寸也会随着父级容器变化后剩余的尺寸去继续计算。

此文是看完B站视频自己做的简单总结，内容较少，很多属性及语法也没进行过多介绍，更没有实例演示，推荐阅读阮一峰大佬的Flex布局教程：

Flex 布局教程：语法篇

Flex 布局教程：实例篇

display flex self 布局

0 人点赞