7、弹性盒子模型(项目属性)

此类属性全部为项目属性

1、flex-grow:定义项目放大比例 默认为0(即使有剩余空间都不分配)。值为num;无单位

(1)项目没有给定宽度:

默认按照比例分配此时会造成宽度分配不均需要给所有项目加宽度width:0;

(2)项目给定宽度:

会分配剩余空间(宽度小于容器的前提下)
按照flex-grow: num;分配

!!!注意是分配剩余空间

2、flex-shrink:定义收缩比例 默认值为1(即使超出也不会超出会压缩)。值为num;无单位

算法:
加权综合(每个项目宽度自己的shrink 的总和)
收缩值(项目的宽度
shrink/加权综合)
项目实际的宽度(项目初始宽度-收缩值)

!!!注意是压缩超出空间

例:

{ width: 100px; flex-shrink: 1;  }
{ width: 200px; flex-shrink: 1; }
{ width: 200px; flex-shrink: 3; }//按照1:2:6(1*1:2*1:2*3)

3、flex-basis: 通俗的说就是宽度,

分配空间的时候要根据这一个值来进行计算,默认值auto(width属性或者内容撑开的宽度),也就是说,如果有这个属性,则按照这个属性分配,如果没有,按照width分配,width也没有,按内容撑开的宽度分配

优先级:

flex-basis > width > 无宽度(内容撑开)

4、复合属性flex: flex-grow flex-shrink flex-basis;

当容器宽度改变时,会根据给定的比例进行伸缩。

5、align-self 单独的项目在交叉轴上的对齐方式

属性值:stretch //默认值
flex-start //和默认值一样
center //居中
flex-end //主轴尾对齐
baseline //基线对其
注:如果要用baseline对齐,则这些项目都要有这个属性,是按照最大的字体的基线对齐

6、order排序 值越大,越靠后,并且了还可以拉到负的值(负值排在前面)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,569评论 0 6
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,686评论 0 26
  • 前言 FlexBox是css3的一种新的布局方式,天生为解决布局问题而存在的它,比起传统的布局方式,我们使用Fle...
    zevei阅读 1,448评论 23 3
  • 在以前页面布局多依赖于table,但table标签太多,于是有了absolute布局,float布局等,但它们小问...
    张歆琳阅读 4,223评论 3 55
  • CSS 3中弹性盒布局的最新版概述 在CSS 3中,CSS Flexible Box模块为一个非常重要的模块,该模...
    吾名无双阅读 1,256评论 0 5