flex的6个常用属性

1. flex-flow属性

flex效果

HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
</body>
</html>
test.css代码
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.container{
    /* 将元素转为flex属性 */
    display: flex;
    height: 20em;
    border: 1px solid #000;
}
.container > .item{
    width: 10em;
    padding: 2em;
    background-color: lightblue;
    border: 1px solid #000;
}

效果：

flex-direction属性

项目在主轴上的排列方式
行排列flex-direction: row，与上面效果相同。
列排列flex-direction: column，效果如下：

flew-wrap属性

项目在主轴上是否换行
flex-wrap: nowrap表示不换行。
wrap表示换行，未压缩宽度时，

压缩宽度，产生换行，效果如下：

flex-flow属性

一步实现flex-direction和flex-wrap的功能
flex-flow: row nowrap;
实现与前述同样的功能。

2. place-content属性

内容位置，表现为内容对齐，利用剩余空间的分配完成内容的对齐。
place-content: start

place-content: end

place-content: center

place-content: space-between

place-content: space-around（中间空间是两边的两倍）

place-content: space-evenly（所有间距相等）

纵向排列一样，就不列举了。

3. place-item属性

place-items: stretch

place-items: start

place-items: end

4. flex属性

flex:放大缩小宽度
flex：0 1 auto，0不允许放大，1，允许缩小，auto宽度自动计算（宽度默认是根据内容变化，如果设置了宽度按设置算，如果设置了min-width则按此计算，即min-width > flex：width > element：width）。
flex：0 1 auto，即flex的默认值，也可以写作flex：initial。

注：flex：0，由于只写了第一个参数，系统默认为flex 0,1，auto，与上述效果一样。
效果查看，浏览器当前大小：

缩小浏览器视窗，阴影消失，元素也被压缩：

放大浏览器视窗，阴影扩大，元素不能被放大：

flex：1 1 auto，允许放大，允许缩小，宽度自动计算，可以简写为flex：auto。
flex：0 0 auto，禁止放大缩小，简写为flex：none。

5. order属性
上代码：
.container .item:nth-of-type(1){
    background-color: coral;
    order:2;
}
改变第一个项目的背景色，调整他的顺序为2：

把项目3排在项目2之前，
.container .item:last-of-type{
    background-color: green;
    /* 项目2原来在最前顺序值为0，要排在项目2前，值应该小于0。 */
    order:-2;
}
6. place-self属性
控制某一个属性的对齐方式
例如：place-self: start
```
.container .item:last-of-type{
background-color: green;
/ 项目2原来在最前顺序值为0，要排在项目2前，值应该小于0。 /
order:-2;
place-self: start;
}