原文:A Visual Guide to CSS3 Flexbox Properties
Flex布局官方称为CSS Flexble Box布局模型是CSS3为了提高元素在容器中的对齐、方向、顺序,甚至它们是动态的或者不确定大小的新布局模型。Flex容器的主要特征是能够调整其子元素在不同的屏幕大小中能够用最适合的方法填充合适的空间。
很多的设计师和开发者发现Flex布局很容易使用,它定位元素简单因此很多复杂的布局能够用很少的代码实现,引领更简单的开发过程。Flex布局的算法是基于方向的,不同于基于水平或者垂直的block和inline布局,这种Flex布局可以被用在小的应用组件中,而CSS3 网格布局模型是新兴处理大规模的布局。
本文主要讲解flex的每个属性怎样栩栩如生的影响布局。
在开始描述Flexbox属性之前,我们先小小的介绍一下Flexbox模型,Flex布局由父容器称为Flex容器(flex-container)和它直接的子元素称为flex 项目(flex-item)构成,在下文中将它们简称为“容器”和“项目”。
在上图中你可以看到用来描述Flex容器和它的子元素的属性和术语,你可以阅读W3C的官方文档来了解他们的意思。
Flexbox是2009年W3C提出的新布局方案,这里用的是2014年10月的最新标准,它的最新的浏览器支持情况
使用flex布局首先在HTML中的父元素上设置display属性:
.flex-container { display: -webkit-flex; /* Safari */ display: flex;}
.flex-container { display: -webkit-inline-flex; /* Safari */ display: inline-flex;}
flex-direction:row(默认值) | row-reverse | column | column-reverse;
values:
.flex-container { -webkit-flex-direction: row; /* Safari */ flex-direction: row;}
.flex-container { -webkit-flex-direction: row-reverse; /* Safari */ flex-direction: row-reverse;}
.flex-container { -webkit-flex-direction: column; /* Safari */ flex-direction: column;}
.flex-container { -webkit-flex-direction: column-reverse; /* Safari */ flex-direction: column-reverse;}
column-reverse 方向指明flex项目在一列中从底到顶部堆放
flex-wrap:nowrap(默认值) | wrap | wrap-reverse;
values:
.flex-container { -webkit-flex-wrap: nowrap; /* Safari */ flex-wrap: nowrap;}
.flex-container { -webkit-flex-wrap: wrap; /* Safari */ flex-wrap: wrap;}
项目(flex items)会在多行展示,如果需要的话它们可以从左到右或者从上到下排列。
.flex-container { -webkit-flex-wrap: wrap-reverse; /* Safari */ flex-wrap: wrap-reverse;}
flex-flow: <flex-direction> || <flex-wrap>;</flex-wrap></flex-direction>
values:
.flex-container { -webkit-flex-flow: <flex-direction> || <flex-wrap>; /* Safari */ flex-flow: <flex-direction> || <flex-wrap>;}</flex-wrap></flex-direction></flex-wrap></flex-direction>
默认值: row nowarp
justify-content:flex-start(默认值) | flex-end | center | space-between | space-around;
定义了项目在容器主轴上的对齐方式,当的容器中项目都是一行并且非弹性的时候或者项目是弹性的但是达到了它们的最小宽度的时候该属性可以定义容器中的剩余空间的分配。
values:
.flex-container { -webkit-justify-content: flex-start; /* Safari */ flex-start;}
.flex-container { -webkit-justify-content: flex-end; /* Safari */ justify-content: flex-end;}
.flex-container { -webkit-justify-content: center; /* Safari */ justify-content: center;}
.flex-container { -webkit-justify-content: space-between; /* Safari */ justify-content: space-between;}
.flex-container { -webkit-justify-content: space-around; /* Safari */ justify-content: space-around;}
align-items:flex-start | flex-end | center | baseline | stretch(默认值);
定义项目在交叉轴上的对齐方式,交叉轴与当前的轴线有关系,与justify-content很相似,只不过是垂直方向的;这属性为所有的项目设置默认的交叉轴上的对齐方式,包括匿名的。
values:
.flex-container { -webkit-align-items: stretch; /* Safari */ align-items: stretch;}
.flex-container { -webkit-align-items: flex-start; /* Safari */ align-items: flex-start;}
项目会堆放在容器交叉轴的起始位置(cross start )。
.flex-container { -webkit-align-items: flex-end; /* Safari */ align-items: flex-end;}
.flex-container { -webkit-align-items: center; /* Safari */ align-items: center;}
.flex-container { -webkit-align-items: baseline; /* Safari */ align-items: baseline;}
基线?不知道基线是什么请戳这里-->基线是什么?
align-content:flex-start | flex-end | center | space-between | space-around | stretch(默认值);
values:
.flex-container { -webkit-align-content: stretch; /* Safari */ align-content: stretch;}
.flex-container { -webkit-align-content: flex-start; /* Safari */ align-content: flex-start;}
.flex-container { -webkit-align-content: flex-end; /* Safari */ align-content: flex-end;}
.flex-container { -webkit-align-content: center; /* Safari */ align-content: center;}
.flex-container { -webkit-align-content: space-between; /* Safari */ align-content: space-between;}
.flex-container { -webkit-align-content: space-around; /* Safari */ align-content: space-around;}
注意:这个属性仅仅当容器中有多行的项目时有效,如果所有项目仅仅占一行,那这个属性对布局没有任何影响。
<span style="font-size:14px; font-family: Arial, Helvetica, sans-serif;"> order: <integer></integer></span>
values:
values:.flex-item { -webkit-order: <integer>; /* Safari */ order: <integer>;}</integer></integer>
<span style="font-size:14px;">flex-grow: <number></number></span>
.flex-item { -webkit-flex-grow: <number>; /* Safari */ flex-grow: <number>;}</number></number>
当所有的项目的flex-grow值相等的时候它们的size相同。
第二个项目占用了更多的剩余空间。
默认值是:0
注意:负数在这个属性中是没有用的
flex-shrink: <number></number>
values:
.flex-item { -webkit-flex-shrink: <number>; /* Safari */ flex-shrink: <number>;}</number></number>
默认情况下,所有的项目都会收缩,但是当我们设置该属性的值为0的时候,项目会保持原有的大小。
默认值是:1
注意:负数在这个属性中是没有用的
flex-basis:auto | <width></width>
values:
.flex-item { -webkit-flex-basis: auto | <width>; /* Safari */ flex-basis: auto | <width>;}</width></width>
flex:none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]</flex-basis></flex-shrink></flex-grow>
values:
.flex-item { -webkit-flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; /* Safari */ flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];}</flex-basis></flex-shrink></flex-grow></flex-basis></flex-shrink></flex-grow>
align-self:auto | flex-start | flex-end | center | baseline | stretch;
.flex-item { -webkit-align-self: auto | flex-start | flex-end | center | baseline | stretch; /* Safari */ align-self: auto | flex-start | flex-end | center | baseline | stretch;}
注意:auto 表示项目会使用父元素(容器)的align-items的值,如果该项目没有父元素的话align-self的值是stretch。
flex items值得注意的是:float、clear、vertical-align这些属性对于项目(flex item)会失效。