flex弹性盒

        flex弹性盒是一种新的布局手段，常用于移动端的布局。常规布局如浮动布局，定位布局都不是完美的，都带有缺点。而flex盒模型布局会自动进行排版，主要用于代替浮动布局。

        弹性指的是：在弹性容器里面的弹性元素会随着容器的大小变化而自动的进行布局。

        弹性元素指的是弹性容器的直接子元素，而弹性元素又可以作为子子元素的弹性容器。

        弹性的另外一点理解就是平均分配，即在x轴和y轴上按比例平分父容器剩余距离进行布局。

目录

一，弹性容器container

二，弹性元素

三，弹性容器的css属性

3.1 区分弹性盒子的坐标轴

3.2 flex-direction

3.3 flex-wrap

3.4 flex-flow

3.5 justify-content

3.6 align-items

3.7 align-content

四，弹性元素的css属性

4.1 flex-grow

4.2 flex-shrink

4.3 align-self

4.4 flex-basis

4.5 flex属性决定如何放大缩小

4.6 order

---

一，弹性容器container

        给容器，如div、ul等添加css属性display: flex则可将该容器设置为弹性容器。设置之后容器里面的子容器就变为弹性元素。

.container{
display: flex;
/*or*/
display: inline-flex;
}

        flex将容器变为块级弹性容器；inline-flex将容器变为行内弹性容器。

二，弹性元素

        弹性容器里面的直接子容器叫做弹性元素，一般子元素为div或者li。

 <!-- li就是弹性元素,li中的子子元素div不是弹性元素 -->   
<ul>
    <li><div></div></li>
    <li>2</li>
    <li>3</li>
</ul>

<style>   
    ul {
    width: 420px;
    border: 1px solid red;
    display: flex;
    flex-direction: column;} 
</style>

三，弹性容器的css属性

3.1 区分弹性盒子的坐标轴

        水平向右为主轴，main axis；竖直向下为侧轴，cross axis。主轴的起始点角main start，结束点为main end；侧轴类似。row-reverse指的是把main end当作main start。

        main start在css属性值中写做flex-start。

3.2 flex-direction

        用于决定弹性元素沿着x轴还是y轴进行布局，以及决定起始点。

3.3 flex-wrap

        用于确定弹性元素是否自动换行。默认值为no-wrap表示不换行。当设置为wrap时，当父容器一行内(或者一列)无法容纳时，向另一个轴进行换行。

3.4 flex-flow

        是direction和wrap的简写，如：flex-flow：row wrap；，表示水平排列可以换行。

3.5 justify-content

        决定了水平方向上的弹性元素的排列方式。即：弹性元素在x轴的那几个位置点进行放置，实际上是对水平方向空白空间的分配。

3.6 align-items

        决定了元素在辅轴上的对齐方式。即竖直方向上子元素的对齐方式。当出现换行的时候就会出现多行，从而产生竖直方式上的对齐方式。

        stretch将每一个弹性元素拉到最大，这里的最大是指本行中被内容撑开最高的哪个元素的height。

3.7 align-content

        align-items决定了竖直方向上最上边的停靠边。align-content决定竖直方向上空白空间的分配问题。与justify-content类似。注：align一般指竖直方向，justify一般在水平方向。

四，弹性元素的css属性

4.1 flex-grow

        用于设置在一条轴上每个弹性元素对父容器剩余空间的占比，举例：假设父容器水平方向仍然剩余600px的剩余空间，如果main轴存在3个弹性元素，他们的flex-grow依次取值为1，2，3，那么他们所占600px比例依次为1/6,2/6,3/6。即：原来的width+1/6*600px。

        类似与弹簧的拉伸系数。

4.2 flex-shrink

        当父容器无法容纳子弹性元素时，必须使用flex-shrink对子弹性元素进行缩小。默认值为1。当flex-shrink为0则表示不收缩。类似于弹簧被压缩。

4.3 align-self

        用于覆盖弹性父容器的的align-items样式，优先级更高。

4.4 flex-basis

        用于决定弹性元素在主轴的初始长度，优先级比width高。默认值为auto，由内容撑开。

4.5 flex属性决定如何放大缩小

        他是一个复合属性。

4.6 order

        用于指定某个弹性元素在水平或者竖直方向的排列序号。