flexbox弹性布局

flexbox的核心是自适应动态变化的弹性布局

伸缩布局盒模型和术语

主轴
main axis:Flex容器的主轴主要用来配置Flex项目。注意，它不一定是水平，这主要取决于flex-direction属性。
main-start | main-end:Flex项目的配置从容器的主轴起点边开始，往主轴终点边结束。
main size:Flex项目的在主轴方向的宽度或高度就是项目的主轴长度，Flex项目的主轴长度属性是width或height属性，由哪一个对着主轴方向决定。

侧轴
cross axis:与主轴垂直的轴称作侧轴，是侧轴方向的延伸。
cross-start | cross-end:伸缩行的配置从容器的侧轴起点边开始，往侧轴终点边结束。
cross size:Flex项目的在侧轴方向的宽度或高度就是项目的侧轴长度，Flex项目的侧轴长度属性是width或height属性，由哪一个对着侧轴方向决定。

 设置父容器的属性有

.container{
    display: flex | inline-flex;
    flex-direction: row | row-reverse | column | column-reverse;
    flex-wrap: nowrap | wrap | wrap-reverse;
    flex-flow: @flex-direction @flex-wrap;
    justify-content: flex-start | flex-end | center | space-between | space-around;
    align-items: flex-start | flex-end | center | baseline | strtch;
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

 设置子元素的属性有

.item{
    order: number;
    flex-grow: number; /* default 0 */
    flex-shrink: number; /* default 1 */
    flex-basis: number | auto; /* default auto */
    flex: none | @flex-grow @flex-shrink @flex-basis;
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

 flex-direction 显示方向

.container{
　　　display: flex;
　　　flex-direction: row | row-reverse | column | column-reverse;
}

• row:默认值,从左至右，从上到下;
• row-reverse: 伸缩项目则是从右往左显示。
• column: 主轴和侧轴交换。如果书写系统是垂直的，那么伸缩项目也是垂直显示的。
• column-reverse: 和 column 一样，但是方向相反。

 

 flex-wrap 伸缩行换行

.container{
    display: flex;
    flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap : 默认值,一行显示
• wrap : 在一个伸缩行容不下所有伸缩项目时，伸缩项目会换行到一条新增的伸缩行上。新增的伸缩行根据侧轴的方向添加。
• wrap-reverse : 与wrap方法向反;

 

flex-flow 伸缩方向与换行 flex-flow 是 flex-direction 和 flex-wrap 的缩写

.flex-container {
  -webkit-flex-flow: column nowrap;
  flex-flow: column nowrap;
}

 justify-content 主轴对齐

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

• flex-start : 左对齐（默认）;
• flex-end : 右对齐;
• center : 居中对齐;
• space-between : 两端对齐;
• space-around :平均分布;

 align-items 侧轴对齐

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

• flex-start : 顶部对齐（默认）;
• flex-end : 底部对齐;
• center : 居中对齐;
• baseline :文本基线对齐。基线根据伸缩项目的内容计算得到;
• stretch : 上下对齐并铺满,此属性子元素不能有固定高度;将伸缩项目从侧轴起点拉伸到侧轴终点。

 align-content 堆栈伸缩行(该属性只针对父容器内多行的情况,如设置了flex-wrap:wrap;属性断行)

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

• flex-start : 顶部对齐(默认)
• flex-end : 底部对齐;
• center : 居中对齐
• space-between : 两端对齐;
• space-around :平均分布;
• stretch : 上下对齐并铺满,此属性子元素不能有固定高度;将伸缩项目从侧轴起点拉伸到侧轴终点。

 order 显示顺序,数值小的排在前面。可以为负值。

.item {
  order: <integer>;
}

 flex

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] //默认情况下，flex的值是0 1 auto;
}

• flex :1; /*空间被平均分配*/
• flex :2; /*某项目占2个空间点*/
• flex: auto; /*自动伸缩以占用所有剩余空间,与flex:1一样*/
• flex: none; /*在任何情况都不会发生伸缩*/

　　float，clear和vertical-align属性在Flex项目中无效

flex-shrink: 0;固定大小,不会收缩

flex-basis

flex-basis属性告诉父容器，在剩余空间被分配之前先定义子元素的默认尺寸，可以指定为百分比或rem等长度单位或者auto关键字。

flex-basis: 0将父容器的全部空间按比例分配到每个子元素上，下面我们就来为每个子元素添加flex-basis: 0属性：

 align-self 单个项目的侧轴对齐(它的值和 align-items 一样)

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

• flex-start : 顶部对齐（默认）;
• flex-end : 底部对齐;
• center : 居中对齐;
• baseline :文本基线对齐。基线根据伸缩项目的内容计算得到;
• stretch : 上下对齐并铺满,此属性子元素不能有固定高度;将伸缩项目从侧轴起点拉伸到侧轴终点。