flex布局是啥

Flex是Flexible Box的缩写,意为"弹性布局",任何一个容器都可以指定为Flex布局,移动端用的较多

行内元素

display:inline-flex;

块级元素

display:flex;

属性

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

flex-direction

flex-direction属性决定主轴的方向（即子元素摆放的方向，水平或者垂直）有这么几个选项：row | row-reverse | column | column-reverse
flex-direction: row（默认值）;水平一列放置 自左向右，起点在左侧；
flex-direction:row-reverse;水平逆序放置 自右向左，起点在右侧，右侧左侧可能空；
代码案例1：
.con{
        display: flex;
        flex-direction: row;
    }
.item{
    list-style: none;
    width: 100px;
    height: 100px;
    margin-right:10px; 
    background: #FFFAE8;
}
<ul class="con">
    <li class="item">item1</li>
    <li class="item">item2</li>
    <li class="item">item3</li>
    <li class="item">item4</li>
    <li class="item">item5</li>
    <li class="item">item6</li>
    <li class="item">item7</li>
</ul>

flex-direction: column;垂直放置，正常顺序
flex-direction:column;垂直放置，逆序

flex-wrap

flex-wrap在轴线上排不下是否换行，有这么几个选项：nowrap | wrap | wrap-reverse;
flex-wrap: nowrap;默认的选择 表示这一行排不下时，不转行，子元素宽度被压缩
flex-wrap: nowrap;当子元素排不下时，选择排到第二行
flex-wrap: wrap-reverse:当子元素排不下时,被挤到另一方，与上诉的区别在于，顺序换了;
代码案例2：
.con2{
    display: flex;
    flex-direction:column-reverse
}
.item{
    list-style: none;
    width: 100px;
    height: 100px;
    margin-top:10px; 
    background: #FFFAE8;
}
<ul class="con2">
    <li class="item">item1</li>
    <li class="item">item2</li>
    <li class="item">item3</li>
    <li class="item">item4</li>
    <li class="item">item5</li>
    <li class="item">item6</li>
</ul>

flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
flex-flow:flex-direction||flex-wrap
例flex-flow: row nowrap;

justify-content

justify-content定义了在主轴上的对齐方式，有这么几个选项flex-start | flex-end | center | space-between | space-around
justify-content:flex-start 左对齐 排序方式有flex-direction决定
justify-content:flex-end 右对齐
代码案例3：
.con4 {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.item {
    list-style: none;
    width: 100px;
    height: 100px;
    margin: 10px;
    background: #FFFAE8;
}
<ul class="con4">
    <li class="item">item1</li>
    <li class="item">item2</li>
    <li class="item">item3</li>
    <li class="item">item4</li>
    <li class="item">item5</li>
    <li class="item">item6</li>
</ul>

justify-content：center  所有元素中间对齐，两边空着
justify-content:space-between 两端对齐 则是页面两边靠边对其，中间元素间距相等
justify-content:space-around	所有元素间距相等，两端不靠边

align-items

align-items属性定义项目在交叉轴上的对齐情况，有这么几个选项flex-start | flex-end | center | baseline | stretch
align-items：flex-start	子元素底部对齐
align-items:flex-end	子元素头顶对齐
align-items:center		子元素中心对齐

align-items:baseline 子元素以文字的基线对齐
align-items:stretch	默认如果项目未设置高度或设为auto，将占满整个容器的高度

align-content

align-content该属性定义了多根轴线(有多行)的对齐方式，如果项目只有一根轴线，该属性是不起作用的
多行解释html部分：(效果有点类似justify-content,只是垂直的效果)
<ul class="con">
    <li class="item">item1</li>
    <li class="item">item2</li>
    <li class="item">item3</li>
</ul>
css部分：
.con {
    width: 320px;
    height: 400px;
    padding: 0;
    display: flex;
    flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-content: space-between;
	background: #F9CC9D;
}
.item {
    list-style: none;
    width: 300px;
    height: 100px;
    background: #FFFAE8;
}
有这几项选择flex-start | flex-end | center | space-between | space-around | stretch
align-content: flex-start	从顶部开始
align-content: flex-end	从底部开始
align-content: center	上下空余，从中间开始
align-content: space-between 上下两端对齐
align-content: space-around	各轴之间间距相等
align-content: stretch 默认

项目的属性

order

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0
代码案例：
.con{
    display: flex;
    flex-direction: row;
}       
.item{
    list-style: none;
    width: 100px;
    height: 100px;
    margin-right:10px; 
    background: #FFFAE8;
}
.order1{
    order: 1;
}
.order2{
    order: 2;
}
.order3{
    order: 3;
}
.order4{
    order: 4;
}

<ul class="con">
    <li class="item order1">1</li>
    <li class="item order3">3</li>
    <li class="item order2">2</li>
    <li class="item order4">4</li>
</ul>