摘要:顾名思义,意味着增长,用于控制的尺寸的伸展。与相对的是,用于控制子元素尺寸超过后,对子元素的压缩。压缩后的的宽度分别为,所以相比于初始宽度被压缩掉的宽度分别为,,与的值成反比。
基本介绍 特点
flexbox是一种css display类型,提供一种更简单高效的布局方式;
flexbox可以对元素相对于父元素、兄弟元素进行定位、控制尺寸、控制间距;
flexbox对响应式有很好的支持;
工作原理设置父元素的display属性为flex,则子元素都变成flex item,由此可以控制子元素的排列方式、尺寸、间距等;
兼容性 Flex Container先来看一个最简单的flex示例,外层div设置display: flex成为一个flex container,内部的3个div则自动变为flex item:
html:
css:
.flex-container{ max-width: 960px; margin: 0 auto; display:flex; } .box{ height: 100px; min-width: 100px; } .one{ background: pink; } .two{ background: lightgreen; } .three{ background: skyblue; }
效果:
效果与浮动布局类似,但是如果用浮动实现的话需要写更多的代码,而flex一行就搞定了。
1. Justify Content如果我们想让flex item居中排列呢,我们可以给flex container增加一个css属性:justify-content,它控制flex item在主轴方向(main axis,由flex-drection决定,默认为水平方向)上的对齐方式:
.flex-container{ ... justify-content: center; }
效果如图:
除此之外justify-content还可以设置为flex-start, flex-end, space-around, space-between, space-even等值,具体效果请自行实验。
2. Align Items实现了flex方向的居中后,垂直于主轴方向(cross axis)的居中可以用align-items实现。
css:
.flex-container{ max-width: 960px; margin: 0 auto; display:flex; justify-content: center; height: 200px; background-color: white; align-items: center; }
效果:
使用flex解决了以往css垂直居中实现复杂的问题!相应的,align-items还有flex-start, flex-end等其他值。
3. Flex Directionflex-direction决定了主轴方向即flex item排列方向,除了默认的row方向之外,还可以纵向、反向(row-reverse/column-reverse)排列flex item:
css:
.flex-container{ ... flex-direction: column; align-items: center; }
效果:
4. Flex Wrap如果我们不想在窗口变窄的情况下压缩flex item,而是让超出边界的flex item换行显示那我们可以设置flex container的flex-wrap:
.flex-container{ max-width: 960px; margin: 0 auto; display:flex; flex-wrap: wrap; } .box{ height: 100px; min-width: 300px; flex-grow: 1; }
当我们压缩窗口的时候,效果如下:
flex wrap还有一个值:wrap-reverse,设置该值后,被wrap的元素会排到其他元素上面:
由此可见,flex wrap一定程度上可以取代media query了。
5. Flex Row最后,flex-direction和flex-wrap可以合并为一个属性flex-flow,比如:flex-flow: row-reverse wrap。
Flex Item 1. Flex Grow在上面所有的例子中,三个flex item只占据了flex container小部分空间,如果想让flex item占满flex container我们需要给flex item设置flex-grow属性。顾名思义,grow意味着增长,用于控制flex item的尺寸的伸展。
将css修改为:
.box { height: 100px; min-width: 100px; flex-grow:1; }
效果:
可以看到三个子元素平分了父元素的空间,因为此时它们的flex-grow都是1。如果只有一个子元素设置了flex-grow呢?
css:
.box{ height: 100px; min-width: 100px; } .one{ background: pink; flex-grow: 1; }
效果:
此时two和three的大小不变,而one占据了父元素剩余空间。
如果将one的flex-grow改为2,而two和three改为1,我们看看会发生什么:
css:
.box{ height: 100px; min-width: 100px; flex-grow:1; } .one{ background: pink; flex-grow: 2; }
效果:
可以看到one的宽度变成了two和three的两倍,因此flex item的尺寸和flex-grow的值成正比。
2. Flex Shrink与flex-grow相对的是flex-shrink, flex-shrink用于控制子元素尺寸超过flex container后,对子元素的压缩。请看示例:
修改box的宽度为flex container的1/3,one、two、three的flex-shrink分别为1,2,3:
.box{ height: 100px; width: 320px; } .one{ background: pink; flex-shrink: 1; } .two{ background: lightgreen; flex-shrink: 2; } .three{ background: skyblue; flex-shrink: 3; }
当窗口正常尺寸时,效果如下:
当我们压缩窗口使其变得更窄后,效果如下:
当flex container宽度变为540px后,子元素都被不同程度的压缩了。压缩后的one、two、three的宽度分别为250px、180px、110px,所以相比于初始宽度320px被压缩掉的宽度分别为70px、140px、210px,70 : 140 : 210 = 1 : 2 : 3,与flex shrink的值成反比。实际上压缩率和flex item的初始尺寸也有关系,只不过当初始尺寸一样时它带来的影响被忽略了。
假设flex shrink为fs,flex item的初始尺寸为is,flex item被压缩的尺寸为ss,则正确的表达式为:
fs ∝ is/ss3. Flex Basis
flex-basis用于设置flex item的初始宽/高。为什么有width和height还需要重新加一个flex-basis呢?flex-basis和width/height有如下的区别:
flex-basis只能用于flex-item,而width/height可以应用于其他类型的元素;
flex-basis和flex-direction有关,当flex-direction为row的时,flex-basis设置的是宽度,当flex-direction为column时,flex-basis设置的是高度;
当flex item被绝对定位后(absolute position),flex-basis不起作用,而width/height可以;
flex-basis可以用于flex的简写形式,如:flex: 1 0 200px;
我们来看一下flex-basis的作用,将css修改如下:
.box{ height: 100px; flex-grow: 1; } .one{ background: pink; flex-basis: 100px; } .two{ background: lightgreen; flex-basis: 200px; } .three{ background: skyblue; flex-basis: 300px; }
3个flex item都在原来的初始宽度基础上增加了相同的宽度:
当然,这个例子如果换成使用width也是一样的效果,但是虽然效果一样但意义不一样,所以使用flex布局时还是应该尽量遵守规范,选合适的人去干正确的事。
4. Order通过order属性我们可以改变flex item的排列顺序,例如:
html:
1234
css:
#blocks{ display: flex; margin: 10px; justify-content: space-between; } #blocks div{ flex: 0 0 100px; padding: 40px 0; text-align: center; background: #ccc; }
默认排列顺序是按照flex item在html中的出现顺序:
当我们修改flex item的order值后,flex item会按照order值升序排列:
css:
.one{ order: 4; } .two{ order: 3; } .three{ order: 2; } .four{ order: 1; }
效果:
结语flex就先简单介绍到这里,flex很强大也很简单,希望大家用的开心。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/53431.html
摘要:高度模型浅识为的简写,简称为块级格式化上下文,为浏览器渲染某一区域的机制,中只有和中还增加了和。并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不...
摘要:当然使用要注意语法严谨,像这种写法是无法解析的,用名称模拟出的结构在二维空间上必须是一个整体,因为每个也是无法分割的。 基本介绍 上一篇文章我们介绍了 css3 flexbox,今天我们再来说说css3的另外一个强大的功能:Grid。Grid做前端的同学应该都很熟悉了,翻译成中文为栅格,用过bootstrap、semantic ui、ant design的同学肯定都了解grid lay...
阅读 978·2023-04-25 14:20
阅读 1846·2021-11-24 10:20
阅读 3739·2021-11-11 16:55
阅读 2753·2021-10-14 09:42
阅读 3444·2019-08-30 15:56
阅读 1096·2019-08-30 15:55
阅读 1027·2019-08-30 15:44
阅读 739·2019-08-29 11:28