flex布局学习笔记

给一个element加上display:flex;,它就变成了一个flexContainer,它的子元素(孙元素不算)就都成了flexItem

flexContainer 及其相关属性

flexContainer有五个相关属性

  1. flex-direction(排列方向)
    有四个值,row/row-reverse/column/column-reverse/

  2. flex-wrap(是否换行)
    有三个值,nowrap/wrap/wrap-reverse/

  3. justify-content(子元素在主轴方向的排列方式)
    有五个值,flex-start/flex-end/center/space-between/space-around

  4. align-items(子元素在辅轴方向的排列方式)
    有五个值,stretch/flex-start/flex-end/center/baseline

  5. align-content(多条轴线时,轴线的排布方式)
    有6个值,stretch/flex-start/flex-end/center/space-between/space-around/

flexItem及其相关属性