flex布局

让人想犯罪 __ 提交于 2019-11-27 18:11:28

网页布局,是css的一个重要应用。

传统的网页布局,主要是基于盒模型,和display、position、float属性,这些属性的一个优势就是简单,容易理解,但也有一些不方便的地方,比如在实现垂直居中的时候。

2009年,W3C提出了一种新的解决方案:Flex(Flexible Box,弹性布局)布局。

设置为flex布局的容器称为flex容器,flex容器的子元素称为容器项目(flex item)。

将元素设置为flex布局后,子元素的float、clear、vertical-align属性将失效。

Flex布局的一些基本概念

Flex容器默认有两根轴,水平的主轴(main axis)和垂直的交叉轴(cross asix)。主轴的开始位置叫做main start,主轴的结束位置叫做main end。交叉轴的开始位置叫做cross axis,交叉轴的结束位置叫做cross end。

容器项目默认沿主轴排列,单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

Flex容器的一些属性

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

1.flex-direction:容器的方向

有4个值:

row(默认值):主轴为水平方向,起点在左侧

row-reverse:主轴为水平方向,起点在右侧

column:主轴为垂直方向,起点在顶部

column-reverse:主轴为垂直方向,起点在底部

2.flex-wrap:项目排列

有3个值:

nowrap(默认):不换行

wrap:换行,第一行结束后,另起一行开始排列

wrap-reverse:换行,第一行结束后在上面一行开始排列

3.flex-flow:flex-direction和flex-wrap的简写形式,默认值为row nowrap

.ele{flex-flow:<flex-direction>||<flex-wrap>}

取值请看例子:

.container{

  flex-flow:row nowrap;

}

4.justify-content:项目在主轴上的对齐方式

有5个值:

flex-start(默认):左对齐

flex-end:右对齐

center:居中

space-between:两端对齐,项目之间的间隔相等

space-around:每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍

5.align-items:项目在交叉轴上的对齐方式

有5个值,与交叉轴的方向有关,具体如下:

flex-start:交叉轴的起点对齐

flex-end:交叉轴的终点对齐

center:交叉轴的中点对齐

baseline:项目的第一行文字的基线对齐

stretch(默认值):如果项目未定义或height为auto,将占满整个容器的高度

6.aglin-content:多根轴线的对齐方式,如果只有一根轴线,该属性不起作用

.box{
    align-content: flex-start || flex-end || center || space-between || space-around || stretch;
}

有6个值:

flex-start:与交叉轴的起点对齐

flex-end:与交叉轴的终点对齐

center:与交叉轴的中点对齐

space-between:与交叉轴的两端对齐,轴线之间的间隔平均分布

space-around:每根轴线两侧的间隔都相等。轴线之间的间隔比轴线与边框之间的间隔大一倍

stretch(默认值):轴线占满整个交叉轴

项目的属性

项目可以设置以下这些属性:

order

flex-grow

flex-shrink

flex-basis

flex

align-self

1.order:项目的排列顺序。数值越小,排序越靠前,默认为0

.item {
    order: <integer>;
}

2.flex-grow:定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

.item {
    flex-grow: <number>; /*default 0*/
}

如果所有项目的flex-grow都为1,则它们将等分剩余空间。如果一个项目的flex-grow为2,其他项目的flex-grow为1,那么前者将占有的剩余空间比后者多一倍。

3.flex-shrink:定义项目的缩小比例,默认为1,即如果空间不足,该项目将被缩小。

.item {
    flex-shrink: <number>; /*default 1*/
}

如果所有项目的flex-shrink都为1,当空间不足时,都将等比例缩小。但是如果一个项目的flex-shrink为0,其他项目的flex-shrink为1,那么当空间不足时,前者不缩小,后者则将等比例缩小。

属性值不能为负值。

4.flex-basis:在定义剩余空间之前,项目占据的主轴的空间。浏览器根据这个属性,计算主轴是否有剩余空间,它的默认值为auto,即项目的本来大小。

.item {
    flex-basis: <length> || auto; /*default auto*/
}

5.flex:flex-grow、flex-shrink、flex-basis的简写,默认为0 1 auto,后两个属性为可选属性。

flex属性有两个快捷值:auto(1 1 auto)、none(0,0,auto)。

建议使用简写方式。

6.align-self:允许单个项目有与其他项目不一样的对齐方式,可以覆盖align-items属性,默认值为auto,表示继承父元素的align-items属性,如果没有父元素,等同于stretch。

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

该属性可以取6个值,除了auto以外,其他都与align-items完全相同。

 

分享自:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!