flex弹性布局

• flex（flexible box）弹性盒子
• 任何一个盒子都可以指定为flex布局
  • 父级设置flex 布局以后，子元素的float、clear和vertical-align属性将失效。

display：flex的元素，称为flex容器（flex container）；

它的所有子元素称为容器的项目（flex item）

<!--父元素-->
<ul>
    <!--子元素-->
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
</ul>

正常不加display:flex

现在我们给ul加上display:flex

ul{
    display:flex;
}

元素挤在一行；平分父盒子的宽度

flex容器（flex container）

容器默认存在两根轴：

• 水平的主轴（main axis）
• 垂直的交叉轴（cross axis）

主轴的开 始位置（与边框的交叉点）叫做main start，结束位置叫做main end；

项目默认沿主轴排列。

单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

flex-direction

排列盒子的方向

• row（默认）：横向从左到右排列

  flex-direction:row;

  

• column：纵向从上到下排列

  flex-direction:column;

  

• row-reverse：对齐方式与row相反

  flex-direction: row-reverse;

  

• column-reverse：对齐方式与column相反

  flex-direction:column-reverse;

  

flex-wrap

换行方式

• nowrap（默认值）单行显示不换行

  flex-wrap:nowrap

  

• wrap：多行显示（超出会换行）

  flex-wrap:wrap

  

• wrap-reverse：反转wrap排列

  flex-wrap:wrap-reverse

  

flex-flow

flex-direction flex-wrap两个样式的简写

• 默认值flex-flow:row nowrap

justify-content

定义项目在主轴上的对齐方式

• flex-start：右对齐（默认值）

  justify-content:flex-start;

  

• flex-end：左对齐

  justify-content:flex-end

  

• center：居中对齐

  justify-content:center

  

• space-between：两端对齐，项目之间的间隔都相等。

  justify-content:space-between

  

• space-around：每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍。

  justify-content:space-around

  

align-items（单行）

具体的对齐方式与交叉轴的方向有关；

假设交叉轴从上到下：

• flex-start：交叉轴的起点对齐

  align-items:flex-start

  

• flex-end：交叉轴的终点对齐

  align-items:flex-end

  

• center：交叉轴的中点对齐

  align-items:center

  

• baseline：项目的第一行文字的基线对齐

  align-items:baseline

  

• stretch：如果项目未设置宽高或设置auto，将沿交叉轴占满整个容器其的高度或宽度（默认值）

  align-items:stretch

  （不设置子项的高度时）

  

align-content（多行）

属性定义了交叉多跟（行）轴线的对齐方式；

如果项目只有一根轴线，则该属性不起作用；

• flex-start：交叉轴的起点对齐

  align-content:flex-start;

  

• flex-end：交叉轴的终点对齐

  align-content:flex-end

  
  

• center：交叉轴的中点对齐

  align-content:center

  

• space-between：与交叉轴两端对齐，轴线之间的间隔都相等。

  align-content:space-between

  

• space-around：每个轴线两侧的间隔相等。轴线之间的间隔比轴线与边框的间隔大一倍。

  align-content:space-around

  

• stretch：轴线沾满整个交叉轴。在设置了align-items后无效（默认值）

  align-content:stretch

item项目属性

order

定义项目的排列顺序。

数值越小，排列越靠前，默认值为0

 		ul li:nth-child(1) {
            order: 4;
        }

        ul li:nth-child(2) {
            order: 2;
        }

        ul li:nth-child(3) {
            order: 3;
        }

        ul li:nth-child(4) {
            order: 43;
        }

flex-grow

当父元素的宽度大于所有子元素的宽度的和时,子元素如何分配父元素的剩余空间。

• flex-grow默认值为0
• 若flex-grow值为0，则表示该元素不索取父元素的剩余空间；
• 若flex-grow值不为0，值越大，索取父元素的剩余空间占比越大；

		ul li:nth-child(1) {
            flex-grow: 1;
        }

        ul li:nth-child(2) {
            flex-grow: 0;
        }

        ul li:nth-child(3) {
            flex-grow: 0;
        }

        ul li:nth-child(4) {
            flex-grow: 2;
        }

flex-shrink

当父元素的宽度小于所有子元素的宽度的和时,子元素如何缩小自己宽度。

• flex-shrink默认值为1
• 若flex-grow值为0，则表示该元素不缩小自己宽度；
• 若flex-grow值不为0，值越大，缩小自己宽度越大；

		ul{
            /*将父级的宽度减少一半*/
    		width: 150px;
		}
		ul li:nth-child(1) {
            flex-shrink: 0;
        }

        ul li:nth-child(2) {
            flex-shrink: 0;
        }

        ul li:nth-child(3) {
            flex-shrink: 1;
        }

        ul li:nth-child(4) {
            flex-shrink: 2;
        }

flex-basis

属性用来设置元素的宽度;

flex-basis的值回覆盖width的值（若两者同时设置）

flex

flex-grow flex-shrink flex-basis的简写

align-self

允许flex item重载flex container里定义的align-items的值。

---

END