本文主要借鉴了CSS Tricks：A Complete Guide to Flexbox

容器和条目

容器（container）就是外部的容器，条目（items）就是内部的条目。
image.pngimage.png

container有哪些属性

定义一个flex容器

  1. .container {
  2.   display: flex; /* or inline-flex */
  3. }

改变items的流动方向

  1. .container {
  2.   flex-direction: row | row-reverse | column | column-reverse;
  3. }

image.png

  • flex-direction: row：行顺序
  • flex-direction: row-reverse：行逆序
  • flex-direction: column：列顺序
  • flex-direction: column-reverse：列逆序

改变折行方式

  1. .container{
  2.   flex-wrap: nowrap | wrap | wrap-reverse;
  3. }

image.png

  • flex-wrap: nowrap：不换行，使劲挤
  • flex-wrap: wrap：能换行，就换行
  • flex-wrap: wrap-reverse：向上换行？！

主轴对齐方式

  1. .container {
  2.   justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
  3. }

image.png

  • justify-content: flex-start：都放在左侧
  • justify-content: flex-end：都放在右侧
  • justify-content: center：水平居中，尽可能靠近
  • justify-content: space-between：尽可能远离
  • justify-content: space-around：左右间距相等，margin不合并
  • justify-content: space-evenly：左右间距相等，margin合并

次轴对齐

  1. .container {
  2.   align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
  3. }

image.png

  • align-items: flex-start：向上靠拢
  • align-items: flex-end：向下靠拢
  • align-items: center：垂直居中
  • align-items: stretch：伸展以铺平
  • align-items: baseline：按baseline对齐

多行内容

  1. .container {
  2.   align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
  3. }

image.png

  • align-content: flex-start：挤在上面
  • align-content: flex-end：挤在下面
  • align-content: center：挤在中间
  • align-content: stretch：上下伸展以铺平上下空间
  • align-content: space-between：尽可能远离
  • align-content: space-around：行间距相等

item的属性

条目顺序

  • 使用order调整条目顺序
    1. .item {
    2. order: <integer>; /* default is 0 */
    3. }

image.png

长胖

  • 使用 flew-grow 控制按比例长胖
    1. .item {
    2. flex-grow: <number>; /* default 0 */
    3. }

image.png

变瘦

  • 一般写 flex-shrink: 0 防止变瘦
    1. .item {
    2. flex-shrink: <number>; /* default 1 */
    3. }

flex-shrink变瘦的计算公式： 假设有三个元素，他们的宽度分别为100px，150px，200px。设置他们仨的flex-shrink的值分别为3、2、1，当页面变窄时，第一个元素变窄宽度的计算公式为(100*3)/(100*3+150*2+200*1) * 100。

基准宽度

  • 默认是 flex-basis: auto
    1. .item {
    2. flex-basis: <length> | auto; /* default auto */
    3. }

私人订制

  • 使用 align-self
    1. .item {
    2. align-self: auto | flex-start | flex-end | center | baseline | stretch;
    3. }

image.png

Bugs

参考资料：flexbugs