Flex 是什么
Flex Box全称为Flexible Box，也即弹性布局，Flexbox布局比较适合Web应用程序的一些小组件和小规模的布局，而Grid布局更适合用于一些大规模的布局。本文我们对FlexBox布局进行详细的介绍。
Flex语法
任何一个容器都可以指定为Flex布局，块元素和内联元素都可以；Webkit内核的浏览器，必须加上-webkit前缀。
块元素：.box { display : flex ;}
内联元素：.box { display : inline-flex ;}
webkit内核浏览器：
.box{
display:-webkit-flex;
display:flex;
}
! 容器设为flex布局后，子元素的float、clear、vertical-align属性将会失效
采用Flex布局的元素，称为Flex容器，它的所有子元素自动成为容器成员，称为Flex项目，简称“项目”。
Flex基本概念
如下图所示，容器默认存在两根轴：水平的主轴main axis和垂直的交叉轴cross axis。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
基本上，Flex项目是沿着main axis（从main strat 到main end） 或沿着cross size（从cross start 到cross end）排列。
FlexBox.png
容器属性
容器共有6个属性，分别是：flex-direrction、flex-wrap、flex-flow、justify-content、align-items、align-content。
flex-direction
flex-direction属性规定主轴的方向，即容器项目的排列方向。
flex-direction有四个值：row、row-reverse、column、column-reverse。
flex-direction
row为默认值，表示主轴为水平方向，左边为起点。
row-reverse表示主轴为水平方向，右边为起点，从右至左排列。
column表示主轴为竖直方向，上边为起点，从上至下排列。
column-reverse表示主轴为竖直方向，下边为起点，从下至上排列。
代码示例：
.box{
flex-direction : row | row-reverse | column | column-reverse ;
}
flex-wrap
flex-wrap属性定义，如果一条轴线排不下，如何换行。
flex-wrap属性有三个值：no-wrap、wrap、wrap-reverse；
flex-wrap
代码示例：
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
no-wrap为默认值，表示不换行
no-wrap
wrap为表示换行，换行后第一行在上方
wrap
wrap为表示换行，换行后第一行在下方。
wrap-reverse
flex-flow
flex-flow属性是flex-direction 和 flex-wrap属性的简写形式，默认值为row no-wrap
代码示例：
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
justify-content
justify-content属性定义了属性在主轴上的对齐方式，有五个值：flex-start、flex-end、center、space-between、space-around、
justify-content
-
flex-start为默认值，为左对齐方式； -
flex-end为右对齐方式； -
center为居中方式； -
space-between为两端对齐方式，项目之间的间隔相等 -
space-around每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍
代码示例：
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
align-items
align-items属性定义项目在交叉轴上如何对齐，有五个值：flex-start、flex-end、center、stretch、base-line。
align-items
-
stretch为默认值，如果项目未设置高度或设为auto时，项目将占满整个容器的高度。 -
flex-start表示在交叉轴的起点对齐； -
flex-end表示在交叉轴的终点对齐； -
center表示在交叉轴的中点对齐； -
base-line表示以项目的第一行基线为准对齐；
代码示例：
.box{
align-items : stretch | flex-start | flex-end | center | base-line
}
align-content
align-content属性定义了多跟轴线的对齐方式，如果该项目只有一根轴线，则该属性不起作用。
该属性有6个值：flex-start、flex-end、center、space-between、space-around、stretch。
align-content
- flex-start：与交叉轴的起点对齐。
- flex-end：与交叉轴的终点对齐。
- center：与交叉轴的中点对齐。
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch（默认值）：轴线占满整个交叉轴。
代码示例：
.box{
align-content : flex-start | flex-end | center | space-between
| space-around | stretch ;
}
项目属性
项目属性有6个：order、flex-grow、flex-shrink、flex-basis、flex、align-self
order
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
order
代码示例：
.item { order: <integer> ; }
flex-grow
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-grow
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
代码示例：
.item {flex-grow: <number> ; }
flex-shrink
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
代码示例：
.item {
flex-shrink: <number>; /* default 1 */
}
flex-shrink
flex-basis
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
align-self
代码示例：
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
网友评论