12.Flex布局

• display: flex;会占用一整行，后续的div会在下一行
  display: inline-flex;不会占用一整行，后续的div会在同一行
  
  

  image.png

• flex属性

  
  
  

  image.png

父容器的属性flex container

• flex-direction 设置主轴的方向
主轴可以4个方向
交叉轴只能从左到右或者从上到下

  /* 从上到下 */
  flex-direction: column;

  /* 从左到右 */
  flex-direction:row;

image.png

• justify-content 设置主轴方向的对齐方式
  
  

  image.png
• align-items (单行) 设置flex items在cross axis(交叉轴)上的对齐方式 一般针对单行
  
  

  image.png
• align-content (多行) 设置flex items在cross axis(交叉轴)上的对齐方式 一般针对多行
  
  

  image.png

image.png

• flex-wrap 设置是否换行 默认是不换行
  

  

  image.png

• flex-flow 是flex-direction || flex-wrao的简写 可以同时设置也可以只设置其中一个，顺序也可以随意
  

  

  image.png

子容器的属性flex items

• order 觉得子容器的排布顺序
  
  

  image.png
• align-self
  
  

  image.png
• flex-grow
  
  

  image.png