Css flex属性

flex布局

注意：设为flex布局之后，子元素的float,clear和vertical-align属性将会失效

基本概念

名称	描述
flex container	容器（采用flex布局的元素，举例div1）
flex item	容器内的成员（项目，举例div1下的标签）
main axis	水平轴
cross axis	垂直交叉轴（纵轴）
main start	主轴开始位置
main end	主轴结束位置
cross start	交叉轴开始位置
cross end	交叉轴结束位置
main size	单个项目占据的主轴空间（width,height+border）
cross size	交叉轴空间

注意：主轴不是固定的水平轴，需要具体属性设置，所以交叉轴也不一定是纵轴。

容器属性

flex-direction

设置主轴方向

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}
#row 水平轴为主轴，起点在左端（想象浮动后的块状元素）
#row-reverse 水平轴为主轴，起点在右端
#column 纵轴为主轴，起点在上沿（想象默认块元素的 堆放）
#column-reverse 纵轴为主轴，起点在下沿

flex-wrap

设置主轴如何换行

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
#nowrap 默认是不换行的，所有的项目都排在一行（容不下会挤压）
#wrap 换行
#wrap-reverse换行，但是是往上方换行。（当前行容不下，在当前行上方新加一行）

flex-flow

flex-flow是上面两个属性的简写默认 row nowrap

.box {
  flex-flow: row wrap;
}

justify-content

justify-content属性是定义主轴方向项目对齐方式

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
#flex-start（默认值）：左对齐
#flex-end：右对齐
#center： 居中
#space-between：两端对齐，项目之间的间隔都相等。
#space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items

定义项目在交叉轴的对齐方式

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
#flex-start：交叉轴的起点对齐。
#flex-end：交叉轴的终点对齐。
#center：交叉轴的中点对齐。
#baseline: 项目的第一行文字的基线对齐。
#stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content属性

多跟轴线上的对齐方式，如果只有一根轴线，该属性不起作用（理解为项目不止一行时）

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
#flex-start：与交叉轴的起点对齐。
#flex-end：与交叉轴的终点对齐。
#center：与交叉轴的中点对齐。
#space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
#space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
#stretch（默认值）：轴线占满整个交叉轴。

项目属性

注意：这里的数值都是与项目之间的比例，不是针对某一项目

order

定义项目的排列顺序，数值越小排列越靠前，默认为0（可以指定它的位置。不一定是我们写的顺序）

.item{
    order:0;#整型数
}

flex-grow

定义项目的放大比例，默认为0，即使有剩余空间也不放大。

.item{
    flex-grow:<number>;
}
#如果项目没有将空间占满，并且都设置了此属性为1，则平分剩余空间

flex-shrink

定义项目的缩小比例

.item{
    flex-shrink:<number>;#默认为1 
}
#如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
#负值对该属性无效。

flex-basis

定义项目的主轴空间。默认值是auto,项目本身大小。浏览器就是根据这个属性去判断是否有多余空间或者是否空间不足。

.item {
  flex-basis: <length> | auto; /* default auto */
}
# 它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
#该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
#建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

align-self

定义某个项目与其他项目不一样的对齐方式，可以覆盖容器的align-items属性。默认值auto,表示继承父元素的align-items属性，没有父元素为stretch

#可以理解为他是为了实现鹤立鸡群的感觉，“杀马特做派”
.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}