flex布局_flex布局经典案例-CSDN博客

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

order
flex-grow
flex-shrink
flex-basis
flex
align-self

说明
关于这些CSS3的属性，我先把它分成2大类，然后分别说明每一个属性的作用，默认值，可选值，组合作用等几个角度说明。

任何容器都可以被声明为flex布局

.box{
  display: flex;
}
/*行内元素也可以使用Flex布局*/
.box{
  display: inline-flex;
}

设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

flex-direction：主轴方向
- 默认值：raw
- 可取值：raw | raw-reverse | column | column-reverse
- 值说明：水平| 水平翻转| 竖直 | 竖直翻转
- 这个值的取值将影响后面的对齐方式
flex-wrap：换行
- 默认值：nowrap
- 可取值： nowrap | wrap | wrap-reverse
- 值说明：不换行 | 换行 | 换行顺序翻转
- 这个取值影响align-items和align-content.
flex-flow: 的简写
justify-content: 主轴上的对齐方式
- 默认值：flex-start
- 可取值：flex-end|center|space-between|space-around
- 值说明：水平对齐
align-items：
align-content：这2个属性决定纵轴的对齐方式.
当子项只有多行时，align-content才起作用；
单行，还是多行，align-items都起作用.
区别是:
align-items对齐的标准是行
align-content对齐的是容器

先定义flex-flow(尽量使用简写属性)，确定主轴方向，和是否换行。
flex-direction去column时，对齐方式使用align-items，而不再是justify-content。
align-items和align-content的区别在域，当子项有多行时的对齐差异，在子项没有设置margin-top，margin-bottom时，前者每行之间有空隙，后者每行紧挨着。
子项有多行，取决于子项的宽度，数目，还有子项的flex的取值。

这些在阮一峰的博客flex布局实例有简单的说明。在写的过程中，需要注意一些小细节，以及属性的掌握程度。通过demo来验证，本来想把demo放在github上，用gitpages显示效果，然而只有通过组合，修改属性来验证真正的用法，这些都没有办法展示，所有自己谢demo，调整属性取值才是王道。

flex: 1;
flex是简写的属性，而flex-grow,flex-shrink，都只能去非负的数。
flex-basis可以取值百分比，长度。
所有规定：

 

/* 等价写法*/ 

.item{ 

  flex: auto; 

} 

.item { 

    flex-grow: 0; 

    flex-shrink: 1; 

    flex-basis: auto; 

}

 

/* 等价写法*/ 

.item{ 

  flex: none; 

} 

.item { 

    flex-grow: 0; 

    flex-shrink: 0; 

    flex-basis: auto; 

}

 

/* 等价写法*/ 

.item{ 

  flex: 1; 

} 

.item { 

    flex-grow: 1; 

    flex-shrink: 1; 

    flex-basis: 0%; 

}

flex-basis取0%的值表示：自身空间为0，剩余空间100%;
要特别注意：剩余空间的分配规则，而我们往往关注最终显示空间的效果。