ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

flex项目的属性rder、flex-grow、flex-shrink、flex-basis、flex、align-self

2022-08-21 11:05:11  阅读:195  来源: 互联网

标签:flex basis auto align item 属性


1、order 属性定义项目的排列顺序

.item { order: <integer>; }

2、flex-grow 属性定义项目的放大比例,默认为 0,即如果存在剩余空间,也不放大

.item { flex-grow: <number>;; /* default 0 */ }

 

3、flex-shrink 属性定义了项目的缩小比例,默认为 1,即如果空间不足,该项目将缩小

.item { flex-shrink: <number>;; /* default 1 */ }

4、flex-basis 属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。

.item { flex-basis: <length> | auto; /* default auto */ }

 

5、flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写,默认值为 0 1 auto。后两个属性可选

.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }

6、align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items 属性。默认值为 auto ,表示继承父元素的 align-items 属性,如果没有父元素,则等同于 stretch

.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }

标签:flex,basis,auto,align,item,属性
来源: https://www.cnblogs.com/96net/p/16609600.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有