flex布局

最新推荐文章于 2022-07-29 15:32:45 发布

Dseai_

最新推荐文章于 2022-07-29 15:32:45 发布

阅读量498

点赞数

分类专栏： css3

css3 专栏收录该内容

8 篇文章

订阅专栏

网页布局，是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