Web进阶——Flex布局

Flex布局/弹式布局

• 是一种浏览器提倡的布局模型

• 布局网页更加简单、灵活

• 避免浮动脱标的问题

作用

• 基于Flex精确灵活控制跨级盒子的布局方式，避免浮动布局中脱离文档流现象发生。

• Flex布局非常适合结构化布局
  
  

设置方式

• 父元素添加 display:flex ，子元素可以自动挤压或拉伸
  
  

组成部分

• 弹性容器

• 弹性盒子

• 主轴

• 侧轴/交叉轴
  
  

主轴对齐方式

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

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

属性值	作用
flex-start	默认值，起点开始依次排列
flex-end	重点开始依次排列
center	沿主轴居中排列
space-around	弹性盒子沿主轴均匀排列，空白间距分在弹性盒子两侧
space-between	弹性盒子沿主轴均匀排列，空白间距均分在相邻盒子之间
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

侧轴对齐方式

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

• 修改侧轴对齐方式属性：
  • align-items（添加到弹性容器）
  • align-self：控制某个弹性盒子在侧轴对齐方式（添加到弹性盒子）

属性值	作用
flex-start	默认值，起点开始依次排列
flex-end	重点开始依次排列
center	沿侧轴居中排列
stretch	默认值，弹性盒子沿着主线轴被拉伸铺满容器

伸缩比

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

• 属性
  • flex：值
• 取值分类
  • 数值（整数）

只占用父盒子剩余尺寸

主轴方向

使用flex-direction改变元素排列方向

• 主轴默认是水平方向，侧轴默认是垂直方向
• 修改主轴方向属性：flex-direction

属性值	作用
row	行，水平（默认值）
column	列，垂直
row-reverse	行，从右向左
column-reverse	列，从下向上

弹性盒子换行

使用flex-wrap实现弹性盒子多行排列效果

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

• 调整行对齐方式：align-content

• 取值与justify-content基本相同