CSS之(移动端)flex布局

了解视口

meta视口标签：

<meta name="viewport" content="width=device-width, 
                                    initial-scale=1.0,
                                    maximum-scale=1.0,
                                    minimum-sclae=1.0,
                                    user-scalable=no" >

属性	解释说明
width	宽度设置的是viewport宽度，可以设置device-width特殊值
initial-scale	初始缩放比，大于0的数字
maximum-scale	最大缩放比，大于0的数字
minimum-scale	最小缩放比，大于0的数字

---

弹性布局

      对于flex，PC端浏览器支持情况较差。IE11或更低版本，不支持或部分支持，不考虑兼容性问题的pc端页面布局可以使用flex

      任何一个容器都能指定为flex布局

      父盒子设置flex布局后，子元素的 float、clear、vertical-align 属性将失效

flex布局常见的属性

• flex-direction —— 设置主轴方向
• justify-content —— 设置主轴上的子元素排列方式
• flex-wrap —— 设置子元素是否换行
• align-content —— 设置侧轴上的子元素的排列方式（多行，有换行情况）
• align-items —— 设置侧轴上的子元素的排列方式（单行）
• flex-flow —— 复合属性，对于同时设置flex-direction和flex-wrap

flex-direction

设置主轴方向
默认主轴是x轴，水平向右。默认侧轴是y轴，垂直向下

flex-direction: row —— 设置主轴x轴，水平向右，子元素从左到右排列

flex-direction: row-reserve —— 设置主轴x轴的反向，水平向左，子元素从右到左排列

flex-direction: column—— 设置主轴y轴，垂直向下，子元素从上到下排列

flex-direction: column-reserve —— 设置主轴y轴，垂直向上，子元素从下到上排列

确定主轴之后，侧轴就是另一个轴，子元素跟随主轴排列

<style>
		div{
            display: flex;
            width: 60%;
            height: 400px;
            background-color: pink;
            flex-direction: column;	/* 设置主轴为y轴，方向垂直向下 */
        }
        span{
            width: 30%;
            height: 50%;		/* 就算3个子元素加起来的高度超了父盒子，也不会溢出父容器！ */
            background-color: skyblue;
        }
    </style>
<div>
    <span>a</span>
    <span>b</span>
    <span>c</span>
</div>

---

justify-content

使用前提： 主轴先确定好

justify-content 是定义主轴上子元素的 排列/对齐 方式的

属性值	说明
flex-start	默认值 从头部开始向右排，主轴若是x轴，则从左到右
flex-end	从尾部开始向左排，主轴若是x轴，则从右到左
center	在主轴上居中对齐（x轴：水平居中并靠上；y轴：垂直居中并靠左）
space-around	平分剩余空间
space-between	最外部的先两边贴边，剩下的子元素再平分剩余空间

下列截图的例子以x轴为主轴
第一个 靠左 从左到右排

第二个 靠右从右到左排

第三个 靠上居中排

第四个 外边距margin-left和margin-right都一样

第五个 第一个和最后一个贴边，剩下的分配中间的空间

---

flex-wrap

flex布局默认子元素都排在一条主轴线上，如果装不开，会缩小子元素的宽度，放到父元素里面，是不换行的。

默认值是不换行 flex-wrap: nowrap

flex-wrap: wrap是会自动换行，但是如果有太多个子项目，会超出到父容器的外面

---

align-items

适用于单行情况！！！

管的是侧轴的对齐方式

属性值	说明
flex-start	侧轴是y轴，则靠上；侧轴是x轴，则靠左
flex-end	侧轴是y轴，则靠下；侧轴是x轴，则靠右
center	侧轴是y轴，则垂直居；侧轴是x轴，则水平居中
stretch	拉伸（默认值），侧轴是y轴，则子元素高度撑满父容器高度；侧轴是x轴，则子元素宽度撑满父容器宽度

下面例子为了更好看到效果，我给每个子元素都加了一点点外边距隔开

第一个flex-start
如果主轴是x，flex-start则是按y轴这个侧轴，从上到下，靠上，下面左图。
如果主轴是y，flex-start则是按x轴这个侧轴，从左到右，靠左，下面右图。

第二个flex-end
如果主轴是x，flex-end则是按y轴这个侧轴，从下到上，靠下，下面左图。
如果主轴是y，flex-end则是按x轴这个侧轴，从右到左，靠右，下面右图。

第三个center，
如果主轴是x，子元素横向排列，根据侧轴y轴居中，下面左图。
如果主轴是y，子元素纵向排列，根据侧轴x轴居中，下面右图。

第四个stretch
如果子项目主轴为x轴，侧轴为y轴， 且子项目不给高度，则子项目的高度会撑满父容器的高度
如果子项目主轴为y轴，侧轴为x轴， 且子项目不给宽度，则子项目的宽度会撑满父容器的宽度

<style>
        div {
            display: flex;
            width: 350px;
            height: 300px;
            background-color: pink;
            flex-direction: row;  /* 主轴方向 */
            /*  justify-content: center;   对于主轴的排列方式,默认左上 */
            flex-wrap: nowrap; /*  是否换行 */
            align-items: stretch;  /*   适用于单行， 对于侧轴的排列方式 */
        }
        span {
            width: 60px;
            /* height: 60px; */
            margin: 1px;
            background-color: skyblue;
        }
    </style>
    <div>
        <span>a</span>
        <span>b</span>
        <span>c</span>
        <span>d</span>
    </div>

---

align-content

适用于多行的情况！！！

设置侧轴上的子元素的排列方式（多行）

设置子项在侧轴上的排列方式并且只能用于子项出现 换行 的情况（多行），在单行下是没有效果的。

属性值	说明
flex-start	侧轴是y轴，则靠上；侧轴是x轴，则靠左
flex-end	侧轴是y轴，则靠下；侧轴是x轴，则靠右
center	侧轴是y轴，则垂直居；侧轴是x轴，则水平居中
space-around	子项在侧轴平分剩余空间
space-between	最外部的先贴侧轴两边，剩下的子元素再平分剩余空间
stretch	拉伸（默认值），侧轴是y轴，则子元素高度平分父容器高度；侧轴是x轴，则子元素宽度平分父容器宽度

第一个
如果主轴是x，flex-start则是按y轴这个侧轴，从上到下，靠上，第二行紧接着第一行后面
如果主轴是y，flex-start则是按x轴这个侧轴，从左到右，靠左，第二列紧接着第一列后面

第二个
如果主轴是x，flex-end则是按y轴这个侧轴，靠下，第二行紧接着第一行后面
如果主轴是y，flex-end则是按x轴这个侧轴，靠右，第二列紧接着第一列后面

第三个
如果主轴是x，center则是按y轴这个侧轴，居中
如果主轴是y，center则是按x轴这个侧轴，居中

第四个 space-around

第五个 space-between

第六个
stretch 默认,第一行/列 贴边（贴上或贴左），剩下的其他行或列平分剩余空间

小总结：
单行找 align-items
多行找 align-content

---

flex-flow

合写flex-direction 和 flex-wrap

如flex-direction: row; flex-wrap: wrap 可以写成 flex-flow: row wrap;

如flex-direction: column; flex-wrap: nowrap 可以写成 flex-flow: column nowrap;

align-self、order

了解即可

    <span>
        <div>1-1</div>
        <div style="align-self: flex-end;">1-2</div>
        <div style="order:-1">1-3</div>	<!-- 数值小越靠前，默认是0 -->
    </span>