❕Flex
赋予父容器布局子容器的能力
Last updated
赋予父容器布局子容器的能力
Last updated
flex layout 的主要思想是：父容器可以改变（直接）子容器的 width + height + order，以便很好地填充父容器的可用空间而不 overflow。
父容器，flex container
子容器，flex items
即使子容器的大小是未知的或是动态的，也能很方便地被 lay out 和 align，这就是 “flex” 的含义。
如果说常规布局是基于 block flow direction 和 inline flow direction，那么 flex 布局就是基于 flex-flow direction。
flex 的子容器是按照 main axis（主轴）或 cross axis（横轴）来进行布局的。
main axis 是由父容器的 flex-direction 属性设置
cross axis 即垂直于 main axis 的轴
main size 是子容器的在 main axis 上的 size（width 或 height）
cross size 是子容器的在 cross axis 上的 size（height 或 width）
flexbox 是单向布局的，要么是 horizontal rows 要么是 vertical columns。
display 定义了一个 flex container，开启了 flex layout 的上下文。
flex-direction 建立了 main-axis，即子容器的放置方向
flex-wrap 表示在 cross-axis 上如何折行
flex-flow 是 flex-direction 和 flex-wrap 的缩写
也就是说，它同时定义了 flex container 的 main-axis 和 cross-axis
justify-content 用来定义父容器如何分配在 main-axis 上的多余空间，即子容器沿 main-axis 的对齐方式
left, right
align-content 用来分配 lines 在 cross-axis 上的多余空间（仅针对多行时）
normal（默认）
stretch
公共取值：
flex-start, flex-end, center：针对 flex-direction（main-axis 时）
space-between, space-around, space-evenly
start, end：针对 writing-mode（main-axis 时）
align-items 定义了子容器沿 cross-axis 与同行（或同列）上的兄弟们的对齐方式。
取值可以是：
stretch（默认）：拉伸以填充容器
flex-start, flex-end, center
start, end
baseline
row-gap
column-gap
gap 是 row-gap 和 column-gap 的缩写
以下属性，设置当父容器在分配剩余空间时，子容器如何“缩”“放”自身的比例。
flex-grow 设置子容器需要 grow 时的比例
flex-shrink 设置子容器需要 shrink 时的比例
flex-basis 设置子容器的 size
当值是 0 时，表示不考虑周围的额外空间
当是其它值时，表示（在父容器给分配空间之前）的默认 size
flex 是 flex-grow, flex-shrink, flex-basis 的缩写（推荐）
设置当前子容器沿 cross-axis 与同行（或同列）上的兄弟们的对齐方式。
其值会覆盖父容器设置的 align-items。
设置子容器的顺序，默认值是 0。
当值相等时，就按照元素在 HTML 代码里的出现顺序进行排列。
