【无标题】

将父级设置为flex容器

.box{
	display: flex:
}

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

.box{
	 flex-direction:row;  /*主轴方向*/
	 flex-wrap        /*主轴一行满了换行*/
	 flex-flow        /*flex-direction 和flex-wrap 的组合*/
	 justify-content  /*主轴元素对齐方式*/
	 align-items      /*交叉轴元素对齐方式//单行*/
	 align-content    /*交叉轴行对齐方式//多行*/
}

容器container的属性

flex-direction:row; 主轴方向*
flex-wrap /主轴一行满了换行/
flex-flow /flex-direction 和flex-wrap 的组合/
justify-content 主轴元素对齐方式/
align-items /交叉轴元素对齐方式//单行/
align-content 交叉轴行对齐方式//多行*/

flex-direction 属性值

row（默认值）：主轴为水平方向，起点在左,从左往右。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
.container{
	display:flex;
    flex-direction: row;
    /* flex-direction: row-reverse; */
    /* flex-direction: column; */
    /* flex-direction: column-reverse; */
}

flex-wrap 属性值

nowrap (默认值) 不换行压缩宽度
wrap 换行
wrap-reverses 反向换行
.container{
	display:flex;
    flex-wrap: nowrap; 
    /*flex-wrap: wrap;*/
    /* flex-wrap: wrap-reverse; */
}

flex-flow 复合写法
写法: flex-flow [flex-direction] [flex-wrap] ;

justify-content 主轴元素对齐方式
flex-start (默认)靠左t对齐
flex-end 靠右对齐
center 靠着主轴居中对齐
space-between 两端对齐，靠着容器壁，剩余空间平分
space-around 分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
space-evenly 平均对齐，不靠着容器壁，剩余空间平分
.container{
     justify-content: flex-start; 
    /* justify-content: flex-end; */
    /* justify-content: center; */
    /* justify-content: space-between; */
    /* justify-content: space-around; */
    /*justify-content: space-evenly;*/
}

align-items 交叉轴(Y轴)元素对齐方式(单行)
stretch（默认值）伸展：如果项目未设置高度或设为auto，将占满整个容器的高度
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。

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

align-content 交叉轴行对齐方式 (多行)
flex-start (每一行)(默认)靠左对齐
flex-end （每一行)靠右对齐
center (每一行)居中对齐
space-between (每一行)两端对齐，靠着容器上下壁，剩余空间平分
space-around (每一行)分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
strentch (每一行)伸缩，占满整个高度

项目元素 item 的属性
flex-grow：长大
flex-shrinik: 缩小
align-self: 覆盖
container align-items 属性
order 排序
flex-basis: 有效宽度

align-self 覆盖

该属性可覆盖容器的align-items, 用以自定义某个项目单独的对齐方式
1 auto默认值 继承 align-items 属性值
2 flex-start 与交叉轴起始线对齐
3 flex-end 与交叉轴终止线对齐
4 center 与交叉轴中间线对齐: 居中对齐
5 stretch 在交叉轴方向上拉伸
6 baseline 与基线对齐(与内容相关用得极少)

order 排序
将元素排序
.container{
    display: flex;
}
.item{
    order: 1;
}
.item1{
    order: 1;
}