记一下flex弹性布局 (3)

记一下flex弹性布局

4  flex-basis

记一下flex弹性布局

5 flex 上面flex-grow , flex-shrink , .flex-basis的综合写法 按照顺序来 , 没有的写默认值 , ***是写这个综合属性

6 align-self  该属性和容器的align-items一样,不在过度赘述

 

 

下面在把容器和项目的属性分别再写一遍,实际项目中不会用到那么多 , 根据自己需要选择即可 

容器的6个属性

      flex-direction:  该属性决定主轴的方向

      flex-wrap: 一行排列不下时,换行的方向

      flex-flow: 前面两个属性的综合写法

      justify-content: 项目在主轴上的对齐方式

  align-items: 项目在交叉轴的对齐方式

  align-content:  多轴线时的对齐方式 , 一行的情况下不起作用

项目的6个属性

order: 该属性是数值.决定项目的排列顺序.数值越小,越靠前,默认是0

   flex-grow:  该属性是项目的放大比例,数值 ,默认是0

   flex-shrink: 该属性是项目的缩小比例 , 数值,默认是1

    flex-basis: 该属性是有空余的前提下 , 剩余空间占据主轴的比例  

   flex : 上面三个属性flex-grow , flex-shrink , .flex-basis的综合写法

   align-self: 单个项目的对齐方式 . 容器有align-items是,会覆盖容器的align-items属性

 

根据上面的属性 , 分别将属性 , 值, 在页面上展示的形状一一在脑海中展现对应 , 多敲几遍代码 ,那就掌握 , 哦啦,到此结束.

以上东西有不对的还请大家指正,是个相互学习的过程 , 是根据别人的博客整理的思路 ,自己一点点写的, 如有抄袭,敬请告知

 

 

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zgjdsf.html