1.flex 布局

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

布局方式

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

组成部分

  • 弹性容器 父元素
  • 弹性盒子 子元素
  • 主轴 默认水平
  • 侧轴 / 交叉轴 默认垂直

查看兼容性网站:www.caniuse.com

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

属性 作用

center 居中

space-around 间距在子级的两侧(中间大两边小)

space-between 间距在弹性盒子(子级)之间

space-evenly 所有子级盒子的间距一样

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

* align-items (添加到弹性容器)

  • align-self (添加到弹性盒子)

属性值 作用

center 居中

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

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

  • 属性 :flex 值
  • 取值分类:数值(整数)
    * 注意:只占用父盒子剩余的尺寸

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

  • 主轴默认是水平,侧轴默认是垂直方向
  • 修改主轴方向属性: flex-direction
  • 属性值:column 作用:列,垂直

5.使用 flex-wrap 调节元素在主轴的对齐方式

  • 弹性盒子换行显示:flex-wrap: wrap;
  • 调整行对齐方式:align-content
最后修改:2021 年 10 月 08 日
谢谢老板打赏