史上最全flex兼容写法整理

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了史上最全flex兼容写法整理相关的知识,希望对你有一定的参考价值。

参考技术A 直接干货,记得点赞。

/*

flex  设置为flex

inline-flex  行内flex

flex-row  主轴横向排列

flex-column 主轴纵向排列

属性定义了项目在主轴上的对齐方式

justify-content-center  设置主轴居中

justify-content-end 设置主轴对齐底部

justify-content-space-between 设置主轴元素均分且紧贴两边

justify-content-space-around 设置主轴元素均分

属性定义项目在交叉轴上如何对齐

align-items-start 设置侧轴起点对齐

align-items-end  设置侧轴对齐底部

align-items-center 设置侧轴居中对齐

align-items-baseline 设置项目的第一行文字的基线对齐

多根轴线的对齐方式

align-content-start  与交叉轴的起点对齐

align-content-end    与交叉轴的终点对齐

align-content-center  与交叉轴的中点对齐

align-content-between 与交叉轴两端对齐,轴线之间的间隔平均分布

align-content-around 每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍

align-content-stretch (默认值):轴线占满整个交叉轴

定义,如果一条轴线排不下,如何换行。

flex-wrap-nowrap 不换行

flex-wrap-wrap 换行,第一行在上方。

flex-wrap-reverse 换行,第一行在下方。

*/

/* 

写在设置为flex的子元素上的6个值 (需要改具体参数值) 注意是子元素

1.order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

.item

-prefix-box-ordinal-group: 1;

-webkit-box-ordinal-group: 2;   

-moz-box-ordinal-group: 2;     

-ms-flex-order: 2;             

-webkit-order: 2;               

order: 2; 



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

.item 

-moz-flex-flex-grow: 2;       

-ms-flex-flex-grow: 2;             

-webkit-flex-grow: 2;               

flex-grow: 2;



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

.item

-moz-flex-shrink: 2;       

-ms-flex-shrink: 2;             

-webkit-flex-shrink: 2;               

flex-shrink:: 2;



4.flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

.item

-moz-flex-basis: 2;       

-ms-flex-basis: 2;             

-webkit-flex-basis: 2;               

flex-basis:: 2;



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

.item

-moz-flex: 2;       

-ms-flex: 2;             

-webkit-flex: 2;               

flex:: 2;



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

.item

align-self: auto | flex-start | flex-end | center | baseline | stretch;



*/

转发请写原链接

金九银十,史上最强 Java 面试题整理。

以下会重新整理所有 Java 系列面试题答案、及各大互联网公司的面试经验,会从以下几个方面汇总,本文会长期更新。

Java 面试篇

史上最全 Java 面试题,带全部答案

史上最全 69 道 Spring 面试题和答案

史上最全 Java 多线程面试题及答案

史上最全 50 道 Redis 面试题及答案

史上最全 55 道 MySQL 面试题总结

i++ 是线程安全的吗?

高级 Java 面试通关知识点整理

出场率比较高的一道多线程安全面试题

30 个 Java 集合面试问题及答案

Java 中创建 String 的两道面试题详解

面试必问线程安全的 Map 解析

Java 面试常问计算机网络问题

入门到放弃的 Java 架构师面试题

10 个 MyBatis 常见面试题

Java 面试常见的 10 大算法问题

史上最全 Javascript 面试题及答案

让面试官颤抖的 HTTP 2.0 面试题

大公司面试篇

......关注下面的微信公众号,回复“面试题”获取。

Java 面试经验

......关注下面的微信公众号,回复“面试题”获取。

 

以上是关于史上最全flex兼容写法整理的主要内容,如果未能解决你的问题,请参考以下文章

前端开发者的必备知识宝库 —— 史上最全JavaScript domAPI整理(建议收藏)

前端开发者的必备知识宝库 —— 史上最全JavaScript domAPI整理(建议收藏)

史上最全单例模式的写法和破坏单例方式

史上最全的jQuery选择器

史上最全“大数据”学习资源整理

金九银十,史上最强 Java 面试题整理。