码迷,mamicode.com
首页 > 其他好文 > 详细

Flex 布局参数分析

时间:2019-09-02 18:54:08      阅读:108      评论:0      收藏:0      [点我收藏+]

标签:sel   数字   弹性   定位   效果   value   prope   lock   auto   

flex布局很好用,优点很多:静态流文件,空间概念,主流样式可以简单调整,同时支持bfc,空间可以动态分配,专业一维空间布局

这么多优点,所以要提倡使用弹性布局。

空间设置:flex的方向、定位这些可以再父节点设置。

内部单项设置可扩展,可压缩,占比,剩余空间占比,独立对齐。这些需要在子节点设置。

就需要学会配置,可以简写的flex-item的属性:flex-grow |  flex-shrink  |  flex-basis  |  order |  align-self

数字和auto,举个例子

      flex: 1 auto;   // flex: auto 效果一样

浏览器解析后是这样: 两个可变属性,被定为1,最后的基本宽高 设置为auto,说明flex的优先级最高的属性是 flex-basis,以此值为点做调整。

      flex-grow: 1;

      flex-shrink: 1;

      flex-basis: auto;

none,一类特殊设置:

      flex: none;   // 失去弹性效果,和 display:block; width: auto;  效果一样, 注意:设置有 none 再加其他值不合法。

浏览器解析后:

      flex-grow: 0;

      flex-shrink: 0;

      flex-basis: auto;

一个数字的情况:

      flex: 1;

浏览器解析后:     平时喜欢非子节点都是这上flex: 1,就是这样的情况,所有item子节点同时参数收缩和增长空间的处理,所以可以按比例划分。

      flex-grow: 1;

      flex-shrink: 1;

      flex-basis: 0%;

两个数字的情况:

      flex: 2 1;

浏览器解析后:

      flex-grow: 2;

      flex-shrink: 1;

      flex-basis: 0%;

三个数字的情况

      flex: 2 1 2;  // 不合法,基础值必须是可用的单位,如百分比,px,em这些具体单位。

      flex: 2 2 5%;  // 嗯,这样合法。

 

Flex 布局参数分析

标签:sel   数字   弹性   定位   效果   value   prope   lock   auto   

原文地址:https://www.cnblogs.com/the-last/p/11448120.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!