Flex布局知识点概括

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属性

• 用于指定子盒子显示的优先级可以进行左右调换