flexboxlayout-创新互联
flexbox 的简介:
创新互联建站-专业网站定制、快速模板网站建设、高性价比塔城网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式塔城网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖塔城地区。费用合理售后完善,十余年实体公司更值得信赖。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
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
当前题目:flexboxlayout-创新互联
转载源于:http://scyanting.com/article/coehgd.html