Flexbox参数详解

　　flexbox经过了坎坷的发展道路终于有了初步的使用雏形，通过flexbox可以控制未知容器元素的对齐方式，排列方向，排列顺序，甚至是未知大小的容器。Flex容器的主要特点是能够修改其子元素（Flex item）的宽度或高度，使其在不同的屏幕尺寸中填补可用的空间。

两张图看一下flexbox的一些基本参数：

基础知识

兼容性：

重点：使用方法(示例代码中不写个浏览器兼容的前缀代码)

一、父级属性：

<!-- 基本DOM结构：-->
<body>
    <div class="flex-container">
        <div class="items">1</div>
        <div class="items">2</div>
        <div class="items">3</div>
    　　<!-- 此处省略若干div -->
    </div>
</body>

display: flex | inline-flex

/* 给父级添加display属性： */
.flex-container{
    display: flex;
}
.item {
　　margin: 5px;
　　background-color: orange;
　　width: 100px;
　　height: 100px;
}

flex-direction: row | row-reverse | column | column-reverse

/* 这里只展示row-reverse属性，其他自行脑补 */
.flex-container{
    border: 2px solid red;
    display: flex;
    flex-direction: row-reverse;
}

flex-wrap: wrap | nowrap | wrap-reverse 默认nowrap

.flex-container{
    border: 2px solid red;
    display: flex;
    flex-wrap: wrap-reverse;
}

.flex-container{
    border: 2px solid red;
    display: flex;
    flex-wrap: wrap;
}

/* 这种情况下子元素宽度会被重置 */
.flex-container{
    border: 2px solid red;
    display: flex;
    flex-wrap: nowrap;
}

flex-flow: flex-direction flex-wrap;结合了上面两个属性

下面说justify-content: flex-start | flex-end | center | space-between | space-around;

强调下space-around属性值：

justify-content

align-items: stretch | flex-start | flex-end | center | baseline;

flex-end属性值也可以这个样子：这是在父级高度固定，而且子元素高度比父级小

align-items

强调下flex-end属性值：这是填不满一整行的情况

align-items

还有stretch属性，当子元素高度不固定时才会出现上图中的情况，固定的时候不会重置子元素高度。

.flex-container{
    border: 2px solid red;
    display: flex;
    align-content: stretch;
    height: 300px;
}
.items{
    margin: 5px;
    background-color: orange;
    width: 100px;
    /* height: 100px; */
}

.flex-container{
    border: 2px solid red;
    display: flex;
    align-content: stretch;
    height: 300px;
}
.items{
    margin: 5px;
    background-color: orange;
    width: 100px;
    height: 100px;
}