Flex布局（3）

2019年5月12日 247次阅读 来源: 前端开发

不仅容器有许多属性，项目也有属于自己的属性
项目的属性如下

  • align-self：单个项目的对齐方式，不同于其他项目的
  • order：排列顺序，项目的默认值是0，按照 从小到大排序
  • flex-grow：项目放大比例，默认是0。规则：当所有项目在主轴上已经铺满时，设置此属性项目不会放大；当未铺满时，项目最大放大到项目铺满，不会溢出；当项目放大比例小时，可以不 铺满。
  • flex-shrink：项目缩小比例，默认是1。规则：当所有项目在主轴上没有额外的空间时，项目缩小
  • flex-basis：指定项目的初始大小，在用flex-grow和flex-shrink调整大小之前，默认是auto
  • flex：是flex-grow，flex-shrink，flex-basis的综合。默认flex:0 1 auto
.item:nth-child(2){
    /*绝对flex 项目*/
    flex:0 1;
}
.item:nth-child(2){
    /*相对flex 项目*/
    flex-basis:0px;
}
// flex项目不会放大，会在必要时缩小
flex:0 1 auto;

// 宽度自动计算，不会放大或缩小项目
flex:0 0 auto;
flex:none

// 自动初始化宽度，必要时放大或缩小宽度 以适应
flex:1 1 auto
flex:auto

举个栗子
单个项目的对齐方式，交叉轴方向的

.box{
    display:flex;
}
.item:nth-child(2){
    align-self:center
}

《Flex布局（3）》 其他对齐方式.png

.box{
    display:flex;
}
.item:nth-child(2){
    align-self:flex-end;
}

《Flex布局（3）》 其他对齐方式.png

order排序

.box{
    display:flex;
}
.item:nth-child(2){
    order: -10;
}
.item:nth-child(3){
    order: 10;
}
.item:nth-child(4){
    order: -2;
}

《Flex布局（3）》 order排序.png

flex-grow 项目放大

.item:nth-child(2){
    flex-grow:0.4;
}

《Flex布局（3）》 放大倍数小时.png

// 放大倍数很大时，最多只能铺满
// 所以当已经铺满时，放大倍数这个属性就没有作用了
.item:nth-child(2){
    flex-grow:4;
}

《Flex布局（3）》 放大倍数很大时，最多只能铺满.png

参考链接：
https://www.w3cplus.com/css3/flexbox-adventures.html
https://www.w3cplus.com/css3/understanding-flexbox-everything-you-need-to-know.html

    原文作者：前端开发
    原文地址: https://www.jianshu.com/p/f8accf368ebe
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞