flex 使用说明

介绍了 flex 的各种属性和值，如果觉得看文字不过瘾，这里有动画演示

容器盒子

使用了 display: flex 后会形成一个容器盒子，里面的子元素为 item
对容器盒子进行设置

属性 — 值

• justify-content：items 在主轴上的对齐方式
  • center：居中对齐
  • flex-start：对齐主轴起始端
  • flex-end：与 flex-start 相反
  • space-between：两端对齐，items中间间隔相等
  • space-around：和 space-between 类似，但是每个 item 两侧间隔相等
• align-items：items 在交叉轴（即与主轴垂直的方向）上的对齐方式
  • center：居中对齐
  • flex-start：对齐交叉轴起始端
  • flex-end：与 flex-start 相反
  • baseline：以每个 item 的第一行文字的基线对齐
  • stretch：默认，若 items 没有设置 height 或设置为auto，则撑满容器
• flex-direction：设置主轴，items 在主轴上的排列方向
  • row：默认，水平方向，从左开始
  • row-reverse：水平方向，从右开始
  • column：垂直方向，从上开始
  • column-reverse：垂直方向，从下开始
• flex-wrap：换行，items 在主轴方向上是否换行
  • nowrap：默认，不换行
  • wrap：换行
  • wrap-reverse：换行（反向）
• flex-flow：
  • flex-direction 和 flex-wrap 的合写，默认值 flex-flow: row nowrap;
• align-content：
  当使用了 flex-wrap 后，如果 items 换行了，此时会产生多个轴线，此时这个属性才会生效；
  将每一行当成一个 item ，设置其在交叉轴上的对齐方式，效果类比 justify-content
  • flex-start：对齐交叉轴起始端
  • flex-end：与 flex-start 相反
  • center：居中对齐
  • space-between：同理 justify-content
  • space-around：同理 justify-content
  • stretch：默认值，撑满容器

items

对容器内的 item 进行设置

属性 — 值

• order：定义当前 item 在整个items 里的顺序位置，值越小排在越前，可接受负数
• flex-grow：放大比例，默认为0
• flex-shrink：缩小比例，默认为1，设为0表示不缩小
• flex-basis：在分配剩余空间之前，设置 item 占据的主轴空间，默认为auto，表示 item 原始大小
• flex：
  • 按flex-grow flex-shrink flex-basis 的顺序合写
  • flex-grow必选参数，flex-shrink 和 flex-basis 可选
  • 默认值为 flex: 0 1 auto
  • 快捷值：flex: auto(1 1 auto)；flex: none(0 0 auto)
• align-self：单独设置 item 在交叉轴上的对齐方式，覆盖 align-items 的值
  • auto：默认值，表示继承父元素的 align-items 的属性值
  • flex-start，flex-end，center，stretch，baseline 表现与 align-items 一致