flex布局知识补充

子元素自身的order属性

子元素的order的作用详解：

默认情况下order的值都为0，如果这个值越小，那么就越靠近起始点，值越大，位置就越后，order其实用于移动元素的位置，而位置的方向则取决于父元素设置的：flex-direction

子元素自身的align-self属性

从正常角度，align-self是控制子元素y轴的对齐方式，也称侧轴对齐，这个y轴的定义也是取决于父元素flex-direction

子元素自身的flex-basis属性

flex-basis的效果，最好配合：flex-shrink:0;让子元素不被压缩。

flex-basis会根据主轴的来设置元素的宽度还是高度：

• 当主轴是横向的时候：flex-direction: row;或者lex-direction: row-reverse;；flex-basis控制的是子元素的宽度，并且优先级高于width和min-width属性。
• 当主轴是竖向的时候：flex-direction: column;或者lex-direction: column-reverse;；felx-basis控制的是子元素的高度，并且优先级高于height和min-height。

max-width(height) 依旧拥有最高权重;

百分比

当flex-basis设置的值为百分比时，百分比根据父元素宽高来决定，设置10%；父元素宽1000px；主轴横向，子元素宽度等于：1000*10%=100px

flex 简写

div {
  flex: flex-grow flex-shrink flex-basis;
}

默认值：

div {
  flex: 0 1 auto;
}