flex 布局快速梳理

flex 布局快速梳理

属性

• flex-direction: 定义主轴的方向

  1. row
  2. row-reverse
  3. column
  4. column-reverse

• justify-content: 定义主轴上的对齐方式

  1. flex-start
  2. flex-end(这两个可以做聊天对话的布局)
  3. center
  4. space-between(第一个和最后一个紧贴容器边缘)
  5. space-around
  6. space-evenly(解决前一个中间间隙是两边间隙两倍的问题)

• align-items: 定义交叉轴上的对齐方式

  1. flex-start
  2. flex-end
  3. center

• gap: 虽然不是 flex 的属性，但可以用来设置子元素之间的间距, 在flex布局中好用

• flex-wrap: 定义是否换行

  1. nowrap(当父盒子空间不足时, 子盒子会收缩)
  2. wrap
  3. wrap-reverse

• align-content: 定义多行时的对齐方式

  当 flex-wrap: wrap 时, 如果有多行, 就相当于每一行有一个主轴和交叉轴, align-items 只是定义了对应一行交叉轴的对齐方式

  1. flex-start
  2. flex-end
  3. center
  4. space-between
  5. space-around
  6. space-evenly
  7. stretch(默认值, 每行占满交叉轴剩余空间, 所以显的每行间距很大)

定义在子项目上的属性

• flex-shrink: 定义子项目的收缩比例, 默认值为 1, 如果父盒子空间不足, 就会按照这个比例来收缩, 如果设置为 0, 就不会收缩

• flex-grow：定义子项目的放大比例, 默认值为 0, 如果父盒子空间充足, 就会按照这个比例来放大, 如果设置为 1, 就会放大到占满父盒子剩余空间

以上他们可以和max-width和max-height配合使用, 来限制子项目的最大尺寸, 以防止它们过度放大或收缩, 且他们的值是一种权重, 表示"速率"

结合媒体查询来防止元素溢出, 当设置 min-width 或 min-height 时, 可以确保元素不会缩小到一定程度以下, 从而避免内容溢出或布局崩溃

@media screen and (max-width: 600px) {
    .container {
        flex-wrap: wrap;
    }
}

• align-self: 定义子项目在交叉轴上的对齐方式, 可以覆盖父项目的 align-items 属性

  1. auto(默认值, 继承父项目的 align-items 属性)
  2. flex-start
  3. flex-end
  4. center
  5. baseline(与父项目的基线对齐)
  6. stretch(占满交叉轴剩余空间)

示例

导航栏

一个元素在最左侧, 其他元素在最右侧

.container {
    display: flex;
    justify-content: flex-end;
}

#item1 {
    margin-right: auto;
}

总结