弹性盒模型,即Flexbox,是css3中的新特性,其实弹性盒模型的原身是dispaly:box;这里,我们暂时不考虑旧的,我们只看新的。

为容器指定弹性盒子,只需在父元素(也就是容器)中设置:display:flex;(注意,webkit内核的需要加webkit前缀,行内元素设置弹性盒子的话,设置display:inline-flex;而且,设置了弹性盒子,子元素的float,clear,vertical属性都将失效)。

弹性盒子默认有两条轴,横轴和纵轴,默认横轴为主轴(默认自左向右)纵轴为辅轴(默认自上而下)。设置了display:flex的容器(也就是父元素)的属性有:flex-direction、flex-wrap,justify-content,flex-flow,align-items,align-content;

其中:flex-direction决定了主轴的方向,其值有:row(默认值,自左向右)/row-reverse(自右向左)/column(主轴为垂直的,自上而下)/column-reverse(自下而上)。

flex-wrap定义一排容不下的时候是否换行,默认为nowrap不换行(一行容不下时,各条目的宽度会按比例缩小)。wrap为正常换行。wrap-reverse是换行时第一行跑到了下面,第二行跑到了上面(暂时还没想好如何描述更清楚)。

flex-flow是flex-direction和flex-wrap的合并写法。默认为row nowrap。

justify-content定义了条目在主轴上的排列方式:有左对齐flex-start(默认值),右对齐flex-end,居中对齐center,两端对齐space-between,等分space-around即每个条目两端的空隙相等。

align-item定义了条目在纵轴上的排列方式:有顶部对齐flex-start,底部对齐flex-end,居中对齐center,strecth(默认值,如果条目不设置具体数值的高度,则高度会沾满整个父元素的高度),baseline,以条目里的第一行文字的基线为准。

align-content定义了多跟轴线时,条目的在纵轴的对齐方式,如果只有一根主轴线则该属性不起作用。值和justify-content的值是一样的。

说完容器(也就是父元素)所拥有的属性,该来说说容器中的条目(也就是子元素)所用有的属性了,不能父亲一手遮天,我们崇尚自由民主,所以,父亲有属性,孩子也有属性。

孩子的属性都有:order,flex-grow,flex-shrink,flex-basis,(flex),align-self。

order定义了子元素出现的排列先后,值越小,排列越靠前,默认为0。

flex-grow(看到grow我们就应该联想到变大)定义了子元素的放大比例,默认为0,表示即使父元素还有剩余空间也不放大该子元素。设父元素的宽度为700px,三个子元素宽度分别为200px,如果所有子元素的flex-grow的值为1,则如果父元素有剩余空间,子元素会等比例放大,即剩余出来的100/3分给三个孩子;如果是一个子元素flex-grow为1,一个为2,第三个为3,则三个子元素分别多分到,100*(1/6),100*(2/6),100*(3/6)。

flex-shrink(看到shrink,我们就赢联想到变小)定义了子元素的缩小比例,默认为1,当容器空间不足时,如果各个条目的flex-shrink值均为1,则表明等比例缩小,如果为0,则表示不缩小。

剩余的几个条目属性我们稍后再说。。

详细介绍弹性盒模型(display:flex)的更多相关文章

  1. 弹性盒模型display:flex

    Flex布局意为"弹性布局",用来为盒模型提供更多灵活性.此外,Flex定义的容器可以对块级元素(display: flex;)或行内元素(display: inline-flex ...

  2. 弹性盒子模型display:flex

    1.div上下左右居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  3. 弹性盒布局display:flex详解

    一:弹性盒子 随着响应式设计的流行,网站开发者在设计网页布局时往往要考虑到页面在适配不同分辨率的浏览器时其内部组件位置大小都会产生变化,因此需要设计者根据窗口尺寸来调整布局,从而改变组件的尺寸和位置, ...

  4. CSS3弹性盒模型,Flex布局教程

    布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型 ...

  5. 弹性盒模型,flex布局

    弹性盒模型   弹性盒子是css3的一种新布局模式,由容器(父元素)和项目(子元素)组成. 弹性盒子是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式. 引入弹性盒模型的 ...

  6. CSS弹性盒布局(display:flex)

    CSS弹性布局(display:flex) 参考: http://www.runoob.com/w3cnote/flex-grammar.html https://www.jianshu.com/p/ ...

  7. 弹性盒子模型display:flex(2)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 弹性盒模型:flex多行多列两端对齐,列不满左对齐

    [1]需求: [2]解决方案: 最近遇到布局上要求item两端对齐,且最后一行在列不满的情况下要求左对齐,使用flex的justify-content: space-between;实现时发现最后一行 ...

  9. CSS3弹性盒模型 display:box

    刚开始做网页时就有一个困惑,为什么display:block只能垂直排列,如果要水平排列就要使用float:left等方式.这种方法最难受的当然是当子元素的数量改变时,需要去修改子元素的宽度使重新适应 ...

随机推荐

  1. 【SHOI2015】脑洞治疗仪(恶心的线段树,区间最大子段和)

    题目描述: 曾经发明了自动刷题机的发明家 SHTSC 又公开了他的新发明:脑洞治疗仪——一种可以治疗他因为发明而日益增大的脑洞的神秘装置. 为了简单起见,我们将大脑视作一个 01 序列.11代表这个位 ...

  2. bzoj2982: combination(lucas)

    Description LMZ有n个不同的基友,他每天晚上要选m个进行[河蟹],而且要求每天晚上的选择都不一样.那么LMZ能够持续多少个这样的夜晚呢?当然,LMZ的一年有10007天,所以他想知道答案 ...

  3. 【TOJ 4493】Remove Digits(单调栈贪心)

    描述 Given an N-digit number, you should remove K digits and make the new integer as large as possible ...

  4. 【Nowcoder 上海五校赛】1 + 2 = 3?(斐波那契规律)

    题目描述 小Y在研究数字的时候,发现了一个神奇的等式方程,他屈指算了一下有很多正整数x满足这个等式,比如1和2,现在问题来了,他想知道从小到大第N个满足这个等式的正整数,请你用程序帮他计算一下. (表 ...

  5. 【c学习-7】

    #include /*#include"test31.c"*/ //定义阶乘函数 /* int fac(int n){ //定义寄存器存储变量 register int i ,f= ...

  6. 吐血分享:QQ群霸屏技术教程(利润篇)

    QQ群技术,不论日进几百,空隙时间多的可以尝试,日进100问题不大. QQ群技术,如何赚钱,能赚多少钱?不同行业,不同关键词,不同力度,不一样的产出. 群费 群费,这个和付费群是有区别的,群费在手机端 ...

  7. mysql 优化like查询

    1. like %keyword    索引失效,使用全表扫描.但可以通过翻转函数+like前模糊查询+建立翻转函数索引=走翻转函数索引,不走全表扫描. 2. like keyword%    索引有 ...

  8. 关于Linux中mysql中文乱码

    1.SHOW VARIABLES LIKE 'character_set_%';查看编码集 2.编辑/etc/my.cnf文件 加入这个设置 default-character-set=utf8 (这 ...

  9. re模块(详解正则)

    re模块 imort re 1.\w \W print(re.findall('\w','ab 12\+- _*&')) #\w 匹配字母 数字 及下划线 执行结果:['a', 'b', '1 ...

  10. go学习笔记-基础类型

    基础类型 布尔值 布尔值的类型为bool,值是true或false,默认为false. //示例代码 var isActive bool // 全局变量声明 var enabled, disabled ...