flex-dirction属性

  • flex布局中默认x轴为主轴，可以用flex-dirction:column 指定y轴为主轴

justify-content属性

  • 指定主轴的排列方式

  • flex-start为默认

  • flex-end

  • center

  • space-around 不贴边

  • space-between 贴边

flex-wrap属性

  • flex布局中默认为nowrap不换行，如果盒子超出，那么就会缩小子盒子的宽度，父盒子不变

align-items属性

  • 指定侧轴的排列方式(单行)(不换行)

  • flex-start 默认

  • flex-end

  • center

  • stretch拉伸,但是子盒子不能给高度

align-content属性

  • 使用align-content前提是有换行(多行)，需要设置flex-wrap:wrap

  • 使用align-content有以下额外的属性值

  • space-around

  • space-between

flex-flow属性

  • flex-flow属性属于复合属性
  • flex-flow:column wrap 可以同时指定flex-direction和flex-wrap

flex属性(*)

  • 用于指定父盒子在一行中剩余空间的分配情况
  • 子盒子相对于父盒子来说可以写百分号%
  • flex:20% 一行放五个盒子
  • flex:1

align-self属性

  • 当侧轴上的某个子盒子需要特殊排列时，可以搭配:nth-child(x)使用

order属性

  • 用于指定子盒子显示的优先级可以进行左右调换
Flex_布局知识点