【无标题】

移动端开发之flex布局

相比于传统布局中布局繁琐，不能在移动端合适布局的限制下，flex弹性布局操作方便，布局简单，因此在移动端上的应用很广泛.但两者都仅在一种端口上好用

建议

pc端使用传统布局

移动端或者不考虑兼容性问题的pc端页面布局时使用flex弹性布局

1.flex效果体验

        div {
            /* 让span获得大小 */
            display: flex;
            /* 水平布局 */
            justify-content: space-between;
            width: 80%;
            height: 200px;
            background-color: pink;
        }
        div span {
            /* width: 150px; */
            /* 实现的效果  平均分成三等分  */
            flex: 1;
            height: 100px;
            background-color: white;
            margin-right: 5px;
        }
    </style>

<div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
   </div>

2.flex布局原理

2.1 布局原理

flexible Box “弹性布局” 任何一个容器都可以制定为flex布局

• 给父盒子设为flex布局后 子元素的float、clear、vertical-align属性将失效
• 伸缩=弹性=伸缩盒=弹性盒=flex

采用flex布局的元素 成为flex容器 flex container 简称容器，

其下所有子元素自动成为容器成员 ，成为flex项目 flex item 简称 项目

注意：子容器可以横线排列也可以纵向排列

简单来说就是给父盒子添加flex属性来控制子元素的位置以及排列方式

3.flex布局父项常见属性

3.1 常见父项属性

有以下留个属性

• flex-direction：设置主轴方向
• justify-content : 设置主轴上的子元素排列方式
• flex-wrap : 设置子元素是否换行
• align-content : 设置侧轴上的子元素的排列方式（多行）
• align-items : 设置侧轴上的子元素排列方式(单行)
• flex-flow : 复合属性，相当于同时设置了flex-direction和flex-wrap

3.2 flex-direction 设置主轴方向 .

3.2.1主轴与侧轴

在flex布局中氛围主轴和侧轴两个方向 默认

3.2.2属性值

flex-direction属性决定主轴的方向

当flex-direction 设置谁为主轴，剩下的就是侧轴 子元素跟着主轴来排列

div {
            /* 给父亲添加flex属性 */
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 默认主轴是x轴 row      y轴就是侧轴*/
            /* flex-direction: row; */
            /* row-reverse 翻转 */
            /* 将主轴设置为y轴   x轴就是侧轴 */
            flex-direction: column;
        }
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }

3.3 justify- content 设置主轴上子元素排列方式 .

justify-content 属性定义项目在主轴上的对齐方式

在使用前要确定主轴

        div {
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 默认主轴为x轴 row */
            /* justify-content: 设置主轴上子元素排列方式; */
            /* justify-content:star;  靠左*/
            /* justify-content:end; 靠右*/
            /* justify-content:center; 居中对齐*/
            /* justify-content:space-around; 平均分配  每个元素都有padding*/
            /* justify-content:space-between; 先贴两边 再分配剩余空间*/
        }

around 与 between的区别

可以将y轴设置为主轴 在给justify-content : center; 实现垂直居中

3.4flex-wrap 设置子元素是否换行

当子元素宽度超出父元素宽度是 flex布局会自动改变子元素宽度 使其显示在一行

flex-wrap : nowrap; flex布局中默认子元素不换行 装不下时缩小子元素宽度

flex-wrap : wrap; 换行

    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>

flex-wrap: wrap;

3.5align-items 设置侧轴上的子元素排列方式(单行)

当只给justify-content居中时 无法实现既在水平居中也垂直居中

要想实现这种效果就需要用到align-items

控制子项在侧轴上的排列方式 子项为单项的时候使用

            /* 默认主轴为x轴 */
            justify-content: center;
            /* 设置侧轴居中 */
            align-items: center;

align-items:stretch;

3.6align-content 设置侧轴上的子元素排列方式(多行)

当元素为多行 也就是内容出现换行的时候 align-items 就失去作用

3.7 flex-flow

			/* flex-direction: column;
            flex-wrap: wrap; */
            /* 和写为一句 */
            flex-flow: row wrap;

4.flex布局子项常见属性

• flex子项目占的份数
• align-self控制子项自己在侧轴的排列方式
• order属性定义子项的排列顺序(前后顺序)

4.1 flex属性

flex属性定义子项目分配剩余空间，用flex来表示占多少份数

.item{
    flex:<number>;   默认不为零
}

将宽度分成份数 子元素占几份来分配宽度

    <style>
        section {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: blue;
            margin: 0 auto;
        }
        
        section div:nth-child(1) {
            width: 100px;
            height: 150px;
            background-color: red;
        }
        
        section div:nth-child(2) {
            /* 单独铺满剩余空间 */
            flex: 1;
        }
        
        section div:nth-child(3) {
            width: 100px;
            height: 150px;
            background-color: pink;
        }
        
        p {
            display: flex;
            width: 60%;
            height: 100px;
            background-color: blue;
            margin: 0 auto;
        }
        
        p span {
            flex: 1;
        }
        
        p span:nth-child(2) {
            flex: 2;
        }
    </style>

4.2 align-self控制子项自己在侧轴上的排列方式

div span:nth-child(2){
    align-self:flex-end;
}

4.3 order属性定义子项的排列顺序(前后顺序)

数值越小越靠前

与z-index不一样

div span:nth-child(2){
    /* 默认是0 -1比0小所以在前面*/
    order:-1;
}