flex布局速览

Posted on In ,
  • display: flex;
  • justify-content:
    • flex-start, flex-end;
    • center;
    • space-between, space-around;
  • align-items:
    • flex-start, flex-end;
    • center;
    • baseline, stretch;
  • flex-direction:
    • row, row-reverse;
    • column, column-reverse;
  • order:
    • 子元素上调整单个元素的位置, 以原位置为0进行调整;
  • align-self:
    • 子元素上调整单个元素的正交位置, 值同align-items;
  • flex-wrap:
    • wrap, wrap-reverse;
    • nowrap;
  • flex-flow:
    • 打包flex-direction和flex-wrap;
  • align-content:
    • 和align-items的不同: align-content determines the spacing between lines, while align-items determines how the items as a whole are aligned within the container.
    • flex-start, flex-end;
    • center;
    • space-between, space-around;
    • stretch;