flex全部的布局属性

弹性盒布局最突出的特点，能让元素对不同的屏幕尺寸和不同的显示设备做好适应的准备，内容可以根据可用空间的大小增减尺寸。

弹性盒依赖父子关系，在元素声明display：flex或者inline-flex就可以激活，这个元素也就称为（flex container），子元素就称为（flex item）

div#one{display: flex;}
        div#two{display: inline-flex;}
        div{
            background: #ccc;
        }
        /* 大于号加*表示div下的所有子元素 */
        div >*{
            border:1px solid ;
            background: green;
        }
        div p {
            margin:0;
        }

 <div id="one">
        <p>flex item with<br>two longer lines</p>
        <span>flex item</span>
        <p>flex item</p>
    </div>
    <div id="two">
        <span>flex item with<br>two longer lines</span>
        <span>flex item</span>
        <p>flex item</p>
    </div>

上面的例子，两个div分别加上flex和inline-flex
显示的是块级框和行内块级框，结果如下

实现弹性布局后，后代的子元素有影响变为弹性元素，孙元素不受影响

---

下面我们可以做一个简单的导航栏，显示一组链接：

nav{
            display: flex;
            border-bottom: tan;
        }
        a{
            margin:5px;
            padding:5px 15px;
            border-radius: 3px 3px 0 0;
            background-color: turquoise;
            color:black;
            text-decoration: none;
        }
        a:hover,a:focus,a:active{
            background-color: wheat;
            color:chartreuse;
        }

 <nav>
        <a href="">Home</a>
        <a href="">about</a>
        <a href="">blog</a>
        <a href="">careers</a>
        <a href="">contact</a>
 </nav>

下面是未加样式的a标签：

由于nav变成了一个弹性元素，那么子元素a链接就变成了弹性元素，链接不再是行内框，重要的是a标签之间的空白将被完全忽略

---

如果你想布局是从上到下，从左到右，从右至左，或者从下到上，可以使用flex-direction:
取值：row / row-reverse / column / column-reverse
表达效果：从左到右 / 从右到左 / 从上到下 / 从下到上




第二个属性
flex-wrap
取值：nowrap / wap / wrap-reverse
表达效果为限制弹性容器只能显示一行
设置为nowarp时——元素全部在一行
设置为wrap时——显示不下的元素会自动换行
设置为wrap-reverse时——显示的内容会与wrap垂直取反



第三个属性
flex-flow
取值：flex-direction / flex-wrap
flex-flow是用于定义弹性容器的换行方式及主轴和垂轴的方向
简单说就是使用这个属性，可以定义flex-direction和flex-wrap的任意值

第四个属性
justify-content
取值：flex-start / flex-end / center / space-between / space-around / space-evenly
表达效果：靠左 / 靠右 / 居中 / 头尾各放一个，剩下的平均分布 / 把空间拆开，把各部分的一半分给每个元素 / 和上一个一样，不过是平均分配，各个元素相等






第五个属性–垂直效果
align-items
取值：flex-start / flex-end / center / baseline / stretch
表达效果：靠上 / 靠下 / 居中 / 一行中的弹性元素向第一条基线对齐 / 所有可拉伸的弹性元素将与所在行中最高或者最宽的弹性元素一样高或者一样宽

第六个属性–垂直效果
align-self
取值：auto / flex-start / flex-end / center / baseline / stretch
align-self属性定义弹性容器中所有弹性元素的对齐方式，这个属性在单个属性上的效果覆盖align-items的值
表达效果：
auto和stretch是表示拉伸效果，和上面第5个特性效果一样
flex-start ----把弹性元素放在垂轴的起边
flex-end ----把弹性元素放在垂轴的终边
center ----把元素与垂轴的中点对齐
baseline ----把弹性元素的基线与素在行中最低的基线对齐

第七个属性—垂直效果
align-content
取值：flex-start / flex-end / centent / space-between / space-around / space-evenly / stretch
align-content 属性指定弹性容器中垂轴方向上的额外空间如何分配到弹性元素行之间和周围

垂直效果比较复杂，建议通过实际去理解会比较好，这里就不做图解了