HTML知识点拾遗

一、布局方式

弹性布局

1. 主轴相关

改变主轴方向：flex-direction：column（垂直向下），row（默认值，水平向右）

主轴子元素排列方式：justify-content

• flex-start ：以主轴开始点对齐
• flex-end：以主轴结束点对齐
• center：以主轴中心点对齐
• space-around：平分剩余空间（总空间 - 盒子总共占用的空间）
• space-between：先两边贴边，再分配剩余空间

flex:1  -> 可以占满剩余空间

2. 侧轴相关

单行侧轴对齐方式：align-items

• flex-start：从侧轴开始位置对齐
• flex-end：向侧轴结束位置对齐
• center：以侧轴中心位置对齐
• stretch（默认值）：
  • 子盒子拉伸
  • 子盒子未设置高度有拉伸效果，一直拉到底；否则以设置的高度为准

多行侧轴对齐方式：align-content

    让多行贴靠在一起移动

• flex-start：向侧轴开始位置对齐
• flex-end：向侧轴结束位置对齐
• center：以侧轴中心位置对齐
• stretch：子盒子高度平分父盒子高度
• space-around：空白环绕子盒子
• space-between：空白填充子盒子

3. 是否换行

• flex-wrap：nowrap：不换行（默认值）；wrap：换行