码迷,mamicode.com
首页 > 其他好文 > 详细

flexible box layout

时间:2017-09-09 09:43:22      阅读:115      评论:0      收藏:0      [点我收藏+]

标签:flexible box layout

flexible box 的简介:

            flexbox 是 2009 年 W3C 提出的一种全新的可伸缩的 CSS 布局方式。依赖 flexbox,我们可以更简单,高效的完成可伸缩式页面的布局。flexbox 一共经历了三个版本,分别为 old,tweener,new,这三种版本下的 display 属性值不一样,分别为 "display: box","display: flexbox","display: flex"。flexbox 中有两个非常重要的概念:flex container(flex 容器) 和 flex item(flex 项目),当我们给一个元素添加一个 "display: flex" 属性后,这个元素就会变成一个 flex container ,它的直接子元素就会变成 flex item 成为一个 flex container 成员。特别是当我们给一个元素设置成 flex container 时,会在文档中生成一个伸缩容器,伸缩容器会为子元素内容生成一个伸缩容器上下文(FFC)。伸缩容器不是块容器,所以 flex item 不能使用那些用来控制块元素布局的属性,例如,clear,float,vertical-align 属性。

技术分享

PS:flex container 默认存在两根轴线:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做 main start,结束位置叫做 main end;交叉轴的开始位置叫做  cross start,结束位置叫做 cross end。flex 项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size,占据的交叉轴空间叫做 cross size。


flexbox 的属性分为两类: 一类为 flex 容器的属性,另一类为 flex 项目的属性。

            flexbox 容器的属性:

                            justify-content

                            align-items

                            flex-direction

                            flex-wrap

                            flex-flow

                            align-content

            flexbox 项目的属性:

                            order

                            flex-grow

                            flex-shrink

                            flex-basis

                            flex

                            align-self

1、justify-content  用来设置 flex item 在主轴方向上的对齐方式

具体示例:
#container {
       display: -webkit-flex;
       display: -moz-flex;
       display: -ms-flex;
       display: -o-flex;
       display: flex;
       justify-content: center;
}
.item {
       width: 100px;
       height: 200px;
       border: 1px solid #000;
}

justify-content 属性的值有:flex-start | flex-end | center | space-around | space-between。
       flex-start:默认值,flex container 内所有的 flex item 在主轴上按从左至右方向排列(左对齐);
       flex-end:flex container 内所有的 flex item 在主轴上按从右至左方向排列(右对齐);
       center:flex container 内所有的 flex item 在主轴上居中对齐;
       space-around:每个 flex item 两侧的间隔相等并且项目之间的间隔比项目与边框的间隔大一倍;
       space-between:两端对齐,项目之间的间隔都相等;

2、align-items  用来设置 flex item 在交叉轴方向上的对齐方式

具体示例:
#container {
       display: -webkit-flex;
       display: -moz-flex;
       display: -ms-flex;
       display: -o-flex;
       display: flex;
       align-items: center;
}
align-items 属性的值有:flex-start | flex-end | center | baseline | stretch。
       flex-start:flex container 内所有的 flex item 在交叉轴上按从上至下方向排列(顶部对齐);
       flex-end:flex container 内所有的 flex item 在交叉轴上按从下至上方向排列(底部对齐);
       center:flex container 内所有的 flex item 在交叉轴上居中对齐;
       baseline:所有 flex item 中的第一行文字的基线对齐;
       stretch:默认值,如果 flex item 没有设置高度或为 auto,flex item 将会占满整个容器的高度;

3、flex-direction  用来设置主轴的方向

具体示例:
#container {
       display: -webkit-flex;
       display: -moz-flex;
       display: -ms-flex;
       display: -o-flex;
       display: flex;
       flex-direction: column;
}
flex-direction 属性的值有:row | row-reverse | column | column-reverse。
       row:默认值,主轴在水平方向上,起点在左端;
       row-reverse:主轴在水平方向上,起点在右端;
       column:主轴在垂直方向上,起点在上沿;
       column-reverse:主轴在垂直方向上,起点在下沿;

4、flex-wrap  用来设置 flex item 是否进行多行并反转排列

具体示例:
#container {
       display: -webkit-flex;
       display: -moz-flex;
       display: -ms-flex;
       display: -o-flex;
       display: flex;
       flex-wrap: wrap;
}
flex-wrap 属性的值有:nowrap | wrap | wrap-reverse。
       nowrap:默认值,所有的 flex item 排列在一条水平的轴线上,不换行;
       wrap:换行,第一行在上方;
       wrap-reverse:换行,第一行在下方;

5、flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式,默认值为 row nowrap

具体示例:
#container {
       display: -webkit-flex;
       display: -moz-flex;
       display: -ms-flex;
       display: -o-flex;
       display: flex;
       flex-flow: column-reverse wrap-reverse;
}
flex-flow 属性的值有:row | row-reverse | column | column-reverse | nowrap | wrap | wrap-reverse。

6、align-content 属性定义了多根轴线的对齐方式,如果容器只有一根轴线,该属性不起作用

具体示例:
#container {
       display: -webkit-flex;
       display: -moz-flex;
       display: -ms-flex;
       display: -o-flex;
       display: flex;
       align-content: center;
}
align-content 属性的值有:flex-start | flex-end | center | space-around | space-between | stretch。
       flex-start:与交叉轴的起点对齐;
       flex-end:与交叉轴的终点对齐;
       center:与交叉轴的中点对齐;
       space-around:每根轴线的两侧间隔相等,并且轴线之间的间隔比轴线与边框的间隔大一倍;
       space-between:与交叉轴的两端对齐,并且轴线之间的间隔都相等;
       stretch:默认值,轴线将占满整个交叉轴;

7、order 属性用于调整 flex item 的顺序(数值越大,排列越靠后)

具体示例:
#container {
       display: -webkit-flex;
       display: -moz-flex;
       display: -ms-flex;
       display: -o-flex;
       display: flex;
}
.item {
       width: 100px;
       height: 200px;
       border: 1px solid #000;
       order: 1;
}
order 属性的值有:-1 | 0 | 1 |  integer,默认值为 0。

8、flex-grow 属性用于定义 flex item 的放大比例(设置负值无效)

具体示例:
#container {
       display: -webkit-flex;
       display: -moz-flex;
       display: -ms-flex;
       display: -o-flex;
       display: flex;
}
.item {
       width: 100px;
       height: 200px;
       border: 1px solid #000;
       flex-grow: 1;
}
flex-grow 属性的值:number,默认值为 0,即存在剩余空间也不放大。
PS:如果所有 flex item 的 flex-grow 属性值都为 1,则它们将等分剩余空间(如果有的话)。如果一个项目的 flex-grow 属性值为 2,其他项目都为 1,则前者占据的剩余空间将比其他项目多一倍。

9、flex-shrink 属性用于定义 flex item 的缩小比例(设置负值无效)

具体示例:
#container {
       display: -webkit-flex;
       display: -moz-flex;
       display: -ms-flex;
       display: -o-flex;
       display: flex;
}
.item {
       width: 100px;
       height: 200px;
       border: 1px solid #000;
       flex-shrink: 1;
}
flex-shrink 属性的值:number,默认值为 1,即空间不足该项目将缩小。
PS:如果所有项目的 flex-shrink 属性值都为 1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink 属性值为 0,其他项目都为 1,则空间不足时,前者将不会缩小。

10、flex-basis 属性用于定义 flex item 占据主轴空间的大小

具体示例:
#container {
       display: -webkit-flex;
       display: -moz-flex;
       display: -ms-flex;
       display: -o-flex;
       display: flex;
}
.item {
       width: 100px;
       height: 200px;
       border: 1px solid #000;
       flex-basis: 100%;
}
flex-basis 属性的值:length,默认值为 auto,即项目的本来大小。也可以设置固定值,如500px。
特别注意当 flex-basis 值为 0 时 flex item 分配的是容器所有的空间;当 flex-basis 值为 auto 时 flex item 分配的是容器减去所有 flex item 内容之后剩余的容器空间。

11、flex 属性是 flex-grow,flex-shrink 和 flex-basis 属性的简写形式,默认值为 0 1 auto

具体示例:
#container {
       display: -webkit-flex;
       display: -moz-flex;
       display: -ms-flex;
       display: -o-flex;
       display: flex;
}
.item {
       width: 100px;
       height: 200px;
       border: 1px solid #000;
       flex: 1 100%;
}
flex 属性的值有两个缩写 none(0 0 auto),auto(1 1 auto)。

12、align-self 属性用于设置单个项目与其他的项目不一样的对齐方式,可覆盖容器的 align-items 属性

具体示例:
#container {
       display: -webkit-flex;
       display: -moz-flex;
       display: -ms-flex;
       display: -o-flex;
       display: flex;
}
.item {
       width: 100px;
       height: 200px;
       border: 1px solid #000;
       align-self: flex-end;
}
align-self 属性的值有:flex-start | flex-end | center | baseline | stretch | auto。
       flex-start:flex container 内所有的 flex item 在交叉轴上按从上至下方向排列(顶部对齐);
       flex-end:flex container 内所有的 flex item 在交叉轴上按从下至上方向排列(底部对齐);
       center:flex container 内所有的 flex item 在交叉轴上居中对齐;
       baseline:所有 flex item 中的第一行文字的基线对齐;
       stretch:如果 flex item 没有设置高度或为 auto,flex item 将会占满整个容器的高度;
       auto:默认值,继承容器的 align-items 属性。如果容器没有该属性,则等同于 stretch;

PS:一个好玩的 flexbox 学习网站:http://flexboxfroggy.com/#zh-cn

       flexbox bugs 问题及解决方法:https://github.com/philipwalton/flexbugs




本文出自 “珞辰的博客” 博客,转载请与作者联系!

flexible box layout

标签:flexible box layout

原文地址:http://luochen2015.blog.51cto.com/9772274/1963849

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!