Flex布局————笔记篇

原创 nyy3723 随笔 css3相关 1172阅读 2017-06-23 11:22:06 举报

参考阮一峰的网络日志-Flex布局教程:语法篇
网页布局(layout是css的一个重点应用),布局的传统解决方案,基于盒子模型,依赖display属性+position属性+float属性。传统的能满足一些普遍页面的需求,但是对于需要特殊布局非常不方便,比如:垂直居中就不太容易实现。
2009年,W3C(万维网)提出了一种新的方案——flex布局,可以简便、完整、响应式的实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全的使用。
一、flex布局是什么?
flex是flexble box的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性。
任何一个容易都能指定为flex布局
块元素使用:.box{display:flex;}
行内元素使用:a{display:inline-flex}
webkit内核的浏览器,必须加上-webkit前缀
.box{display:-webkit-flex;display:flex;}
注意:设为flex布局以后,子元素的float。clear和vertical-align属性将失效
一、基本概念
采用flex布局的元素,称为flex容器(flex-container),简称容器,它的所有子元素自动成为容器成员,成为(flex item),简称“项目”。

Flex布局————笔记篇
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边康的交叉点)叫做main start,结束位置叫做main end;交叉轴的位置叫做cross start,结束位置叫做cross end
项目默认沿主轴排列。单个项目占据的主轴叫做main size,占据的交叉轴空间叫做cross size
三、容器的属性
以下6个属性设置在容器上。
[quote] [ul]
[li]flex-direction[/li]
[li]flex-wrap[/li]
[li]flex-flow[/li]
[li]justify-content[/li]
[li]align-items[/li]
[li]align-content[/li]
[/ul][/quote]
3.1、flex-direction属性
flex-direction属性决定主轴的方向(即项目的排列方向)
[quote].box{
flex-direction(四个值):
row (默认值):主轴为水平方向,起点在左端
row-reverse :主轴为水平方向,起点在右端
column:主轴为垂直方向,起点在上沿
column-reverse :主轴为垂直方向,起点在下沿
}[/quote]
3.2、flex-wrap属性
默认情况下,项目都排在一条线上(又称“轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。
[quote]
.box{
flex-wrap (三个值):
nowrap(默认不换行)
wrap(换行,第一排在上方)
wrap-reverse(换行,第一排在下方)
}
[/quote]
3.3、flex-flow属性
flex-flow属性是flex-direction属性和flex-wrap属性的间歇方式,默认值为row nowrap;
[quote]
.box{
flex-flow:<flex-direction> || <flex-wrap>
}
[/quote]
3.4、justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。
[quote]
.box{
justify-content(5个值):
flex-start(默认值左对齐)
flex-end(右对齐)
space-between(两端对齐,项目之间的间隔都相等)
space-around(每个项目两侧的间隔相等。所有,项目之间的间隔比项目与边框的间隔大一倍)
}
[/quote]
3.5、align-items属性
align-items属性定义项目在交叉轴上如何对齐。
[quote]
.box{
align-items(4个值):
flex-start(交叉轴的起点位置)
flex-end(交叉轴的终点对齐)
center(交叉轴的中点对齐)
baseline(项目的第一行文字的基线对齐)
stretch(默认值,如果项目未设置高度或者设置auto,将占满整个容器的高度)
}
[/quote]
3.6、align-content属性
align-content属性定义了多根多轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
[quote]
.box{
align-content(6个值):
flex-start(与交叉轴的起点对齐)
flex-end(与交叉轴的终点对齐)
center(与交叉轴的中点对齐)
space-between(与交叉轴两端对齐,轴线之间的间隔平均分布)
space-around(每根轴线两侧的间隔都相等,所以,轴线之间的间隔比轴线与边框的间隔大一倍。)
stretch(默认值,轴线占满真个交叉轴)
}
[/quote]
四、项目的属性
以下6个属性设置在项目上。
[quote] [ul]
[li]order[/li]
[li]flex-grow[/li]
[li]flex-shrink[/li]
[li]flex-basis[/li]
[li]flex[/li]
[li]align-self[/li]
[/ul][/quote]
4.1、order属性
order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0.

.item{order:<number>}

4.2、flex-grow属性
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
注意:如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项目一倍。

.item{flex-grow:<number> 默认为0}

4.3、flex-shrink属性
flex-shrink属性定义了项目的缩小比例,默认为1,即如果存在空间不足,该项目将缩小。

.item{flex-shrink:<number>默认为1}

注意:如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时, 前者不缩小,负值对该属性无效。
4.4、flex-basis属性
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。该浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

.item{flex-basis:<length> | auto(默认为auto)}
注意:它可以设为width或height属性一样的值(比如350px),则该项目将占据固定空间。
4.4、flex-basis属性
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。该浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

.item{flex-basis:<length> | auto(默认为auto)}
注意:它可以设为width或height属性一样的值(比如350px),则该项目将占据固定空间。
4.5、flex属性
flex属性时flex-grow,flex-shrink和flex-basis的简写,默认值为0 1 auto。后两个属性可选。
[quote]
.item{
flex:none |[<'flex-grow'><'flex-shrink'> ?|| <'flex-basis'> ]
}
该属性有两个快捷值:auto(1 1 auto)和none(0 0 auto)。
建议优先只用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值
[/quote]
4.6、align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖,
align-items属性。默认值为auto,表示集成父元素的align-items属性,如果没有父元素,则等同于stretch。

.item{align-self: auto|flex-start|flex-end|center|baseline|stretch}

先大概的了解每个属性的意义,然后再根据自己的理解参考一些网站做对应的布局练习。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复