Flex布局

Flex布局

• List item

运用在flex container上的属性

• flex-direction： 确定主轴方向
• flex-wrap： 设置是否换行
• flex-flow： 设置主轴方向和是否换行
• justify-content：延主轴方向的布局方式
• align-item： 延交叉轴方向的布局方式
• align-content： 多根轴线的布局方式

运用在Flex items上的属性

• order： item的排序，可以为负值
• flex-basis： 设置item基础宽度
• flex-grow： 设置计算后如果存在剩余空间，扩大的倍数
• flex-shrink： 设置如果空间不足，缩小的倍数
• flex： <flex-grow> || <flex-shrink> || <flex-basis>
• align-self: 设置当前item的布局方式

.son{
    width: 50px;
}
.son:nth-of-type(1){
    height: 40px;
    background-color: blue;
    /*align-self: flex-end;*/
}
.son:nth-of-type(2){
    height: 60px;
    background-color: #d3d3d3;
}
.son:nth-of-type(3){
    height: 30px;
    background-color: #ff7777;
}
.son:nth-of-type(4){
    height: 50px;
    background-color: #345343;
}
.parent{
    width: 200px;
    height: 100px;
    background-color: #111111;
    display: flex;
}

flex-direction

• row:
  

    flex-direction: row;

• row-reverse:
  

    flex-direction: row-reverse;

• column:
  

    flex-direction: column;

• column-reverse:
  

    flex-direction: column-reverse;

flex-wrap

-nowrap:

不存在折行

.son:nth-of-type(5){
    height: 60px;
    background-color: #654543;
}
.son:nth-of-type(6){
    height: 55px;
    background-color: #678674;
}
.son:nth-of-type(7){
    height: 50px;
    background-color: #890344;
}
.parent{
    width: 300px;
    height: 100px;
    background-color: #111111;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

• wrap
  
  多余内容折行显示

    flex-wrap: wrap;

• wrap-reverse
  
  折行为反向

    flex-wrap: wrap-reverse;

flex-flow

	flex-flow: <flex-direction> || <flex-wrap>

flex-direction和flex-wrap的组合使用，以上情况组合即可

justify-content

• flex-start:
  
  以主轴（这里是水平方向）测试，此时为左对齐

    justify-content: flex-start;

• flex-end:
  

    justify-content: flex-end;

-center:

    justify-content: center;