木灵鱼儿

木灵鱼儿

阅读:352

最后更新:2022/01/19/ 19:36:55

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;
}

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 352

相关文章