Flex布局/弹性布局模型

2022-10-26 16:33:56 浏览数 (2)

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 布局教程:实例篇

0 人点赞