Flex布局相关知识点

flex布局

• 特点：

是一种浏览器提倡的布局模型，在布局网页时更加的灵活，简单。与浮动不同的是，flex布局避免了浮动脱标的问题。

• 作用：

①避免浮动布局中脱离文档流现象发生

②非常适合结构化的布局

• 设置方式：

给父元素添加display:flex

• 组成部分：

弹性容器

弹性盒子

主轴

侧轴/交叉轴

• 在布置网页时，盒子之间的距离如何实现？

在flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的距离

• 主轴与侧轴的对齐方式

①修改主轴的对齐方式属性：justify-content;

flex-start:默认值，起点开始依次排列

flex-end:终点开始依次排列

center:沿主轴居中排列

space-around:弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧

space-between:弹性盒子沿主轴均匀排列，空白间距均分在相邻盒子之间

space-evenly:弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

②修改侧轴对齐方式属性：align-items;（添加到弹性容器）

align-self:控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

flex-start:默认值，起点开始依次排列

flex-end:终点开始依次排列

center:沿侧轴居中排列

stretch:默认值，弹性盒子沿着主轴线被拉伸至铺满容器

• 伸缩比

属性

flex：值

取值分类

数值（整数）

⚠️注意：只占用父级盒子剩余尺寸

• 主轴方向

在flex布局模型中，弹性盒子默认沿着水平方向排列，如果想实现图文垂直排列，要改变主轴的方向让其变成垂直方向，可使用flex-direction;实现

修改主轴的方向属性：flex-direction;

row:行，水平

column:列，垂直

roe-reverse:行，从右向左

row-reverse:列，从下向上

⚠️注意：

在flex布局模型中，一旦修改了主轴的方向后，要先确定主轴的方向，再选择对应的属性实现主轴或侧轴的对齐方式

例如：

如若主轴在垂直方向，如何实现水平居中？

主轴在垂直方向，默认侧轴是在水平方向，侧轴想要居中就使用align-items:center;

如若主轴在垂直方向，如何实垂直居中？

主轴本就在垂直方向，使用justify-content:center; 即可

• 弹性盒子换行

弹性盒子换行显示：flex-wrap:wrap;

弹性盒子对齐方式：align-content

取值与justify-content基本相同