详细介绍弹性盒模型(display:flex)

弹性盒模型,即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,则表示不缩小。

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

时间: 03-12

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

弹性盒布局display:flex详解

一:弹性盒子 随着响应式设计的流行,网站开发者在设计网页布局时往往要考虑到页面在适配不同分辨率的浏览器时其内部组件位置大小都会产生变化,因此需要设计者根据窗口尺寸来调整布局,从而改变组件的尺寸和位置,以达到最佳的显示效果.本文介绍的就是一种实现这种变化的比较简单的模型:弹性盒子. 二:属性 首先要给父容器设置display:flex(或者inline-flex)属性,就可以让该父容器的布局方式变为弹性盒模型,接着,给父容器或者子元素设置不同属性来实现具体布局. ①:给父容器添加的属性 1.fle

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

布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. 尽管目前css3在PC端上的兼容性还不是那么完美,但是在移动端已基本实现兼容. 网络上有很多关于flex布局很好的教程.总结的也很完美,我就直接收藏了,以备查询 详解css3弹性盒模型(Flexbox) 移动端开发小记 – Flexbox

CSS3.0盒模型display:flex;的使用[兼容微信浏览器]

话不多说,上代码,关键在对应的低版本安卓的微信浏览器,需要-webkit-box对应的-webkit-box-orient -webkit-box-pack等的设置. .flex{ /* 设置弹性布局 */ display:-webkit-box;/* android 2.1-3.0, ios 3.2-4.3 */ display:-webkit-flex;/* Chrome 21+ */ display:-ms-flexbox;/* WP IE 10 */ display:flex;/* an

弹性盒模型flex

弹性盒子模型 布局方案 传统的布局方案大多采用div+css+float+position+display来实现,但是随着css3中弹性盒子模型的推出,在前端布局方案中就又多出了一项彪悍的选项.而因为最近在研究小程序,发现中间使用弹性盒子布局效果更好效率更高一点,所以就将之前学习弹性盒模型的相关知识点整理出来,给大家分享. 弹性盒模型flex布局介绍 弹性盒模型(flexbox)又称为弹性布局,是css3中新提出的一种布局方式,通过弹性布局,可以让子元素自动调整宽度和高度,从而达到很好的填充任何

CSS弹性盒模型flex在布局中的应用

× 目录 [1]元素居中 [2]两端对齐 [3]底端对齐[4]输入框按钮[5]等分布局[6]自适应布局[7]悬挂布局[8]全屏布局 前面的话 前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法,本文将介绍flex在布局中的应用 元素居中 [1]伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items <style> .parent{ display: flex; justify-content: center; align-items: center; } &

CSS3弹性盒模型flexbox完整版教程

文章目录 基础知识 属性介绍 display: flex | inline-flex; (适用于父类容器元素上) 请注意: flex-direction (适用于父类容器的元素上) flex-wrap (适用于父类容器上) flex-flow (适用于父类容器上) justify-content (适用于父类容器上) align-items (适用于父类容器上) align-content (适用于父类容器上) order (适用于弹性盒模型容器子元素) flex-grow (适用于弹性盒模型容

分享一道弹性盒模型笔试题

请用弹性盒模型原理写出类名为divA divB divC三个元素横排三列(出divA宽度为50px,以外,其他平分剩余空间)的HTML与CSS. <style> body{ margin:0; padding:0; } .box{ width:100%; height:50px; display:flex; flex-direction:row; } .divA{ width:50px; background:blue; } .divB,.divC{ flex:1; } .divB{ back

html5浮动、等高、弹性盒模型

1px dashed虚线 box-sizing拯救了布局 1.inherit  继承父级 2.content-box(默认)-----这个盒子的边框.内边距 这2个值是不包括在width和height中,所以外扩 3.border-box---- 这个盒子的边框.内边距 这2个值是包括在width和height中了 浮动就是让元素脱离了文档.文档为空后,所以边框就包不住了.所以我们要清除浮动 方法一:(有问题,不建议) 之前html是用clear来清除的,现在不能用这个了 <!-- 在父级里添加

CSS3弹性盒模型

旧式的弹性盒子 1.在拥有盒子的盒子上加display:box; 或 inline-box 开启弹性盒模型 2.box-flex 分配空间,假如容器有a份,box-flex:2,那就占a分之2 3.分布方向  水平box-orient: horizontal;  垂直 box-orient:vertical; 4.定义显示顺序:box-ordinal-group 实例 <!DOCTYPE html> <html lang="zh"> <head> &