flex布局基础与应用
注:这是我之前在微信公众号‘雨后的梦溪笔谈’ (yuhou5206)写的一篇文章,今天移至简书,原创文章转载请注明。
阮一峰flex布局篇网址:
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html,
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
本篇基本参照阮一峰大神的内容,有一些地方有稍许改动加入个人观点,让我自己更易于理解.(其中原文中"交叉轴"在这里命做"侧轴").如果有时间建议参观面网址的原文,因为原文图片解析更加明了.
imagefirst:介绍
Flex布局:Flexible Box 弹性盒子布局,所以flex布局其实就是弹性盒子布局,就是弹弹弹,弹走鱼尾纹,那种布局.任何一个容器都可以指定为Flex布局.
支持浏览器:需要支持的浏览器是,IE10+,所以一般应用在移动端,如果要支持到IE8就要做处理.
second:开始
1.指定flex布局的两种方式,以及兼容webkit内核的浏览器.
image(注意,当设置为Flex布局以后,子元素的float,clear和vertical-align的属性都将失效)
采用Flex布局的元素,称为Flex容器(flex container),简称"容器". 它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"项目".
每一个flex容器中都有两个轴,主轴(main axis) ,侧轴(cross axis) ,主轴的开始位置与边框的交叉点,叫做main start,结束位置叫做main end;侧轴的开始位置叫做cross start,结束位置叫做cross end. 项目的默认沿着主轴排列,单个项目占据主轴的空间叫做main size,占据交叉轴的空间叫做cross size.
(原文图片)2.容器的属性
以下六个属性是设置在容器上的.
flex-direction,flex-wrap,flex-flow,justify-content,align-items,align-content
2.1 flex-direction 属性
flex-direction属性决定主轴的方向,也就是项目排列的方向;
image XXX:row(默认值):主轴为水平方向,起点在左端
XXX:row-reverse:主轴为水平方向,起点在右端
XXX:column:主轴为垂直方向,起点在上边际
XXX:column-reverse 主轴为垂直方向,起点在下沿
** 2.2 flex-wrap 属性**
默认情况下,项目都排在一条线(又称"轴线")上.flex-wrap空值的就是他的排列方式.
image
XXX:nowrap(默认值):不换行
wrap:换行,第一行在上方
wrap-reverse:换行,第一行在下方
2.3flex-flow
imageflex-flow属性是flex-direction属性和flex-warp属性的简写形式,默认值为row nowrap,
也就是==>> flex-flow:flex-direction && flex-wrap
也就是这两种加起来,zzz,建议使用的时候用flex-flow,而不要单一写
2.4 justify-content属性
imagejustify-content: flex-start | flex-end | center | space-between | space-around;
这里与之对应的是,开始,结束,居中,空白在之间,空白包围项目.
2.5 align-items
imageXXX:flex-start:侧轴的起点对齐
lex-end:侧轴的终点对齐
center:侧轴的中点对齐
baseline:项目的第一行文字的基线对齐
stretch(默认值):如果项目没有设置高度或设为auto,将占满整个容器的高度
2.6 align-content属性
align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
imageXXX:flex-start:与侧轴的起点对齐
flex-end:与侧轴的终点对齐
center:与侧轴的中心点对齐
space-between:与侧轴两端对齐,轴线之间的间隔平均分布.
space-around:每根轴线两侧的间隔都相等.所以,轴线之间的间隔比轴线与边框的间隔大一倍
strech(默认值):轴线占满整个侧轴,塞满,就是这个意思
3.项目的属性,容器内部项目的属性
对应参数:order flex-grow flex-shrink flex-basis flex align-self
3.1 order属性
order属性定义项目排列顺序.数值越小,排列越靠前,默认为0
image3.2 flex-grow 属性(扩展比例)
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。
如果一个项目的flex-grow属性为2,其他项目都 为1,则前者占据的剩余空间将比其他项多一倍
image
3.3 flex-shrink 属性(收缩率)
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。
如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。(注:负值对该属性无效)
image
3.4 flex-basis 属性
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。
浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。
image
3.5 flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。
后两个属性可选.建议优先使用这个属性,而不是单独写三个分离的属性.
image
3.6 align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。
默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
image
变量:auto flex-start flex-end center baseline stretch
4.一些实际简单应用,以及代码.
4.1骰子
一点
image(骰子图片均来自原网)
重要代码
image两点
image重要代码
image三点
image
重要代码
image四点
image重要代码
image image五点
源网没有图,这里,自己搞的就不弄什么阴影渐变圆角了....
image
重要代码
image image六点
image
重要代码
image4.2流式布局
流式布局,就是每个项目固定,但是会自动分行
image重要代码
image注:这是我之前在微信公众号‘雨后的梦溪笔谈’ (yuhou5206)写的一篇文章,今天移至简书,原创文章转载请注明。
(此节完)