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基本相同

posted @ 2022-05-31 22:04  maplerain  阅读(86)  评论(0编辑  收藏  举报