flex 布局

flex 布局

flex 容器

开启 flex 容器

.myClass {
    /** inline-flex 也可以开启 */
    display: flex;
}

flex-direction

flex-direction 定义了 main axis,其决定容器内的元素是横向布局还是纵向布局,其可选值如下:

  • row (默认)
  • row-reverse
  • column
  • column-reverse

flex-wrap

flex-wrap 指定容器内的元素如何换行,默认情况下是挤在一行。其可选值如下:

  • nowrap (默认)
  • wrapfrom top to bottom
  • wrap-reversefrom bottom to top

flex-flow

flex-flowflex-directionflex-wrap 这两个属性的缩写,能够同时定义这两个属性。

.myClass {
    flex-flow: flex-direction flex-wrap;
}

flex-flow 的默认值:row nowrap

justify-content

main axis 轴上如何利用剩余空间

align-items

cross axis 轴上如何利用空间:

align-content

main axis 轴如果有多行,应该如何布局:

flex 元素(项)

order

控制元素出现的顺序

flex-grow

定义元素自己自我 grow(伸张扩展) 的能力:

flex-shrink

定义元素自我伸缩的能力:

flex-basis

定义元素默认的初始的 size,接受如下几个值:

  • 长度:20% 或 5rem 这种
  • auto: 取决于元素本身的 width 和 height
  • content:取决于元素的内容

flex

flexflex-growflex-shrinkflex-basis 这三个属性的简略写法。flex 的默认值:0 1 auto

(1) flex 1

flex: 1flex: 1 1 0% 含义相同。它可以均分元素。

align-self

可以覆盖 flex 容器的 align-items 的默认布局,调整单个元素的对齐方式: