博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS-弹性布局3-伸缩属性
阅读量:6972 次
发布时间:2019-06-27

本文共 747 字,大约阅读时间需要 2 分钟。

5、项目的属性

属性值 说明
order 该属性定义项目的排列顺序,数值越小,排序越靠前,默认为0
flex-grow 该属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
flex-shrink 该属性定义了项目的缩写比例,默认为1,记如果容器空间不足,则该项目将缩小
flex-basis 该属性定义了在分配多余空间之前,项目占据的主轴空间,默认为auto,即项目本来的大小
flex 该属性是flex-grow, flex-shrink, flex-basis的简写。
align-self 该属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性

5.1 order

5.2 flex-grow

该属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

(1)如果所有项目的flex-grow均为1,那么所有的项目将均分容器的剩余空间。
(2)如果一个项目的flex-grow为2,其他为1的话,为2的这个项目分配到的剩余空间是其他项目的2倍。

5.2 flex-shrink

该属性定义了项目的缩写比例,默认为1,记如果容器空间不足,则该项目将缩小。

(1)如果所有的项目的flex-shrink均为1,那么所有项目将等比缩小。
(2)如果某一个项目的flex-shrink为0,则该项目不会被缩小。

5.3 flex-basis

该属性定义了在分配多余空间之前,项目占据的主轴空间,默认为auto,即项目本来的大小.

5.4 flex

该属性是flex-grow, flex-shrink, flex-basis的简写。

5.5 align-self

该属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。

转载地址:http://nnosl.baihongyu.com/

你可能感兴趣的文章
github开源文章生成pdf
查看>>
JavaEE(24) - JAAS开发安全的应用
查看>>
DDD领域驱动设计基本理论知识总结
查看>>
Python操作Redis数据库
查看>>
equals() 和 hashCode()
查看>>
<原创>在PE最后一节中插入补丁程序(附代码)
查看>>
简单的随笔 ,WSDL工具,Oracle备份还原,java调用.net webservice
查看>>
Workman websocket 握手连接
查看>>
[洛谷P1901]发射站
查看>>
cordova封装h5为app,cookie不可用解决方法
查看>>
mysql limit 优化
查看>>
谈恋爱与形象
查看>>
day22 Pythonpython 本文xml模块
查看>>
Fisher's exact test( 费希尔精确检验)
查看>>
SSH项目里面 忘记密码的邮件发送功能
查看>>
对Linux(Unix)的基础知识归纳
查看>>
自定义可扩展叠加头部的下拉控件
查看>>
转--Java工程师成神之路(2018修订版)
查看>>
SQLServer之Compute/ComputeBy实现数据汇总
查看>>
KMP算法
查看>>