认真看看那正在热潮的 flex 响应式布局

当前位置: 首页 » 记录 » css » 认真看看那正在热潮的 flex 响应式布局

分类: css 1,287阅读阅读模式

flex 布局,是一个广义的说法,不能说:加了 display:flex 就能够实现响应式布局,以 flex 属性为中心,还有一套全家桶等着你,家庭成员有:align-content、align-items、flex( flex-grow flex-shrink flex-basis )、flex-flow ( flex-direction flex-wrap )、justify-content、order 。

注意 3 个点:

  • 多栏布局的 column-* 属性对弹性项目无效。
  • float 与 clear 对弹性项目无效。(使用 float 只会使元素的 display 属性变成 block )
  • vertical-align 对弹性项目的对齐无效。

默认的

如果下级元素定义了长度,而且仅是对父元素添加 flex 属性,那么从左到右排序,有两种情况

1、子元素总长度小于父元素,空余的地方留空。

如下图

2、子元素总长度大于父元素,子元素原有设定的长度将失效,变成:子元素长度 = 父元素长度 / 子元素个数

如下图

 

 

flex-grow

默认值:0 ,简写:flex: flex-grow flex-shrink flex-basis;

简要说明:用来占据你的绿~~

详细说明:用来对剩余长度占比的属性,前提子元素总长度小于父元素。

占比总长度 = 父元素长度 - 子元素长度*子元素个数

如下图,绿色部分为占比总长度:

 

如果只有其中一个写了 flex-grow 属性,那么它的长度将会是:这么长 = 占比总长度 / 你写的数值 + 本身长度

 

如下图,只有区块 2 写了 flex-grow 的值:

它是这么来的,下图:

提示:flex-grow 的数值不能为负数,可以写小数,但不能写百分比。

注意:只有一个标签写了该属性时,数值 1 为占据 100% ,即每 0.1 占据 占比总长度的10% 长度。

 

 

flex-shrink

默认值:1 ,简写:flex: flex-grow flex-shrink flex-basis;

简要说明:我越大,你们就越膨胀

详细说明:用来对超出部分的长度控制缩减的属性。当子元素的长度相加大于总长度时,才可以发生作用。

缩减总长度 = 子元素长度*子元素个数 - 父元素长度

如下图,虚线部分为缩减的总长度

那么它的长度计算是这么计算的:这么长 = 当前元素设定元素的长度 - 缩减总长度 / 所有 shrink 值相加 * 当前元素的 shrink 值

示例,如下图区块 2 值为 3,区块 4 为 4,其它没写的区块默认为 1。

提示:flex-shrink 的数值不能为负数,可以写小数,但不能写百分比。

 

 

flex-basic

默认值: auto ,简写:flex: flex-grow flex-shrink flex-basis;

简要说明:算了,先放着

详细说明:覆盖当前元素设定的长度(width),重新定义当前元素的长度,前提是定义的长度值(basic)不能比当前字符串加起来的长度值小。

由下图可以看到,原字符长度为 86.33px ,如果设定宽度数值小于这个长度,还是这长度...

子元素全部按百分比的话,例如该百分比为18% ,那么子元素会是:这么长 = 父元素的长度 * 18%

如图: 800 * 18% = 144

 

如果只有其中一个写了 flex-basic 属性,并且还是百分比的话,那么当前元素会是: 这么长 = 父元素长度 / (当前子元素百分比 + (子元素设定长度 / 父元素长度 * ( 子元素个数 - 1 ) ) * 当前子元素百分比
示例 1 、

示例 2 、区块 2 为 50% ,区块 4 为 100%,其他区块为 25% = 0.25 = 200 / 800 ,那么计算如图所示:

注意:flex-basic 的数值不能为负数。

 

 

flex-direction

默认值:row ,简写:flex-flow: flex-direction flex-wrap;

简要说明:别跑,跟我走。

详细说明:规定子元素的展示方向,默认从左往右,自上往下。

如图,默认值 row 与 row-reverse , 方向完全反转了,起点和终点互换角色。

row 是从左往右,自上往下;row-reverse 是从右往左,自上往下。

 


属性影响

注意:有一个影响属性 direction ,该值会影响值 row 的方向,但对值 column 无影响。

如果设置了该属性将会有以下几种情况:

direction:ltr +--> flex-direction:row ------------->默认从左往右

direction:ltr +--> flex-direction:row-reverse ---->默认从右往左

direction:rtl +--> flex-direction:row ------------->将默认的从左往右变成从右往左

direction:rtl +--> flex-direction:row-reverse ---->将默认的从右往左变成从左往右

如图:


 

column 的值在于从上往下排序,column-reverse 方向与 column 方向相反,自下而上。

如下方,值 column 图例:

值 column-reverse 图例:

注意:float 对该值无效,值 column 将会令原有元素设定的高度失效,高度变为适用内容的高度。

 

 

flex-wrap

默认值:nowrap ,简写:flex-flow: flex-direction flex-wrap;

简要说明:后面排队的过来这儿(wrap)再排一行。

详细说明:默认的 flex 布局是不换行的,如果要换行,请用 flex-wrap 控制。

默认的,不换行的情况下,子元素超出父元素长度时,子元素的长度等于父元素除以子元素的个数,也就是说原有的设定的子元素宽度失效,而如果换行的情况下,子元素的设定宽度不会失效,子元素超出父元素长度时,将自上往下,从左往右的排序。

如图:设定子元素宽度为 200px ,父元素宽度为 800px;

默认值 nowrap 图例

值 wrap 图例

如果值为 wrap-reverse 那么它的顺序将会是自下往上,从左往右。wrap 与于 wrap-reverse 不同的是上下展示的方向的不同。

如下图:

flex-flow 其他情况图例

  • flex-flow: column wrap; 下图 1
  • flex-flow: column wrap-reverse; 下图 2
  • flex-flow: row-reverse wrap; 下图 3
  • flex-flow: row-reverse wrap-reverse; 下图 4

 

图 1 + 图 2

图 3 + 图 4

 

 

 

order

默认值:0

简要说明:给钱(integer)我,就让你排前面

详细说明:对当前项进行排序,当元素设定该值时,元素就位于该数值位置,同数值元素将按照文档读取顺序排序。

如图所示:指定了某些区块的 order 值。

注意:值可以接受负数但不能为小数点。

 

 

align-content

默认值:stretch

简要说明:单排的一边去

详细说明:对当前行所有子元素进行对齐,根据值进行位移,对单行所有子元素无效,对单个子元素设该属性无效。

注意:多考虑浏览器特性,部分浏览器不支持导致某些属性效果为 baseline 的效果。

如下图:默认子元素 200px * 6 ,宽度 900px ,高度 300px。

默认值 stretch 平分了父元素余下的高度,以平分的高度开始基线进行对齐,保证与下一行间隔一致,末行将与高度底部间隔。

注意:若其中某子元素未定义高度,它将会填满至下一行,无缝连接下一行。

 

值 baseline 图例

值 baseline 以元素高度为基准,在开始位置进行对齐,类似后面的 start 。值 first baseline 及 last baseline 估计还在实验中,并未得到实现。

 

值 center 图例

值 center 于 baseline 类似,不过它实现的是上下位置居中对齐。

 

值 flex-start 和 flex-end 图例

非溢出情况

溢出情况

flex-startflex-end以父元素高度的开始基线对齐以父元素高度的结束基线对齐(绕口,请看上方的溢出及非溢出图)。

貌似后面出的 start 及 end 测试有效,但 left 和 right 估计还在实验中,并未得到实现。

 

值 space-around 图例

值 space-around 平分了父元素余下的高度,并且在平分的高度中,上下位置居中对齐。

 

值 space-between 图例

值 space-between 首行元素粘合父元素开始基线,尾行元素粘合父元素结束基线,其余行平分剩下高度余下的值,并保证行之间距离一样。

 

值 space-evenly 图例

值 space-evenly 平分了父元素余下的高度,并保证每行间隔一样。

 

 

align-item

默认值 stretch

简要说明:来来来,我们一起膨胀

详细说明:对当前行的子元素进行对齐,可对单行进行赋值,但对单个子元素无效。

和 align-content 区别?align-item 是控制行内子元素对齐, align-content 是控制行对齐...

注意:多考虑浏览器特性,部分浏览器不支持导致某些属性效果为 baseline 的效果。

默认值 stretch 如下图:

值 baseline 图例

值 baseline ,以每行的间隔开始基线对齐,如不填写高度,将默认为内容高度。

 

值 center 图例

值 center , 平分父元素余下的高度,并且每行自身上下间隔一样(以行内最大高度为基准),如不填写高度,将默认为内容高度。

 

值 flex-star 和 flex-end 图例

值 flex-star 和 flex-end , 平分父元素余下的高度,并且每行上(end)或下(start)间隔一样(以行内最大高度为基准),与后来的 start 及 end 貌似一样效果。

 

 

justify-content

默认值 stretch

简要说明:别惹事,站开点

详细说明:与 align-item 类似,不过它是用来对行内元素的水平对齐的控制。

注意:多考虑浏览器特性,部分浏览器不支持导致某些属性效果为 baseline 的效果。

默认值 stretch ,如下图:

与值 baseline ,貌似于默认值没区别。

 

值 center 图例

 

值 center ,集中所有子元素并水平居中对齐。

 

值 flex-star 和 flex-end 图例

 

值 flex-star 和 flex-end , 集中所有子元素并水平居左(start)或右(end)对齐。 与后来的 start 及 end 貌似一样效果。

 

值 space-around 图例

值 space-around ,水平分散对齐,并保证每个子元素自身的间隔一致。

 

值 space-between 图例

值 space-between ,水平分散对齐,首列粘合左边位置,末列粘合右边,其余列左右间隔对齐,并保持一致。

 

值 space-evenly 图例

值 space-evenly , 水平分散对齐,并保证每个元素间隔一致。

 

部分元素未得到测试,后续支持再添加。

 

完毕!

 

更多相关内容参考:

https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-items

http://www.css88.com/book/css/properties/flex/flex.htm

http://www.runoob.com/w3cnote/flex-grammar.html

 

相关文章