五分钟学会flex布局

作者: kiaizi | 来源:发表于2017-05-09 15:48 被阅读54次

很长一段时间没有更新我的技术贴了
因为前阵子要准备一些教学资料，耽误了很长时间
本文是给不了解flex布局的小伙伴学习，大神可以绕道

flex布局是什么？

一种CSS3的布局模式，也叫做弹性盒子模型，用来为盒装模型提供最大的灵活性。非常灵活的处理布局，但是也有一个致命的问题，兼容性，各位做开发之前一定要了解兼容性的问题才好选择是否用flex布局

小Demo看出flex布局的强大

<style type="text/css">
            body{
                padding: 0;
                margin: 0;
            }
            .box{
                width: 200px;
                height: 200px;
                background-color: red;
                border: 3px solid #000;
                font-size: 30px;
                text-align: center;
                line-height: 200px;
            }
            .warp{
        
                height: 1100px;
   /*一句话就能让warp下面三个盒子进行类似于浮动的效果，还不用清除浮动*/
                display: flex;
                flex-direction: row;
                
            }
            
            
            .box1{
                background-color: skyblue;
            }
            .box2{
                background-color: yellow;
            }
            .box3{
                background-color: green;
            }
            .box4{
                background-color: gray;
            }
        </style>
    </head>
    <body>
        <div class="warp">
            <div class="box box1">第一个</div>
            <div class="box box2">第二个</div>
            <div class="box box3">第三个</div>
            <div class="box box4">第四个</div>
        </div>
    </body>```


###什么是主轴
>其实flex布局主要是由主轴和侧主轴来进行配合，从而实现搭配的
![主轴的方向](http:https://img.haomeiwen.com/i4298342/924005070be0da10.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

/*html文件一样，直接将这个css中的warp进行替换

         * flex-direction定义主轴的方向
         * row从左往右，默认
         * row-reverse从右往左
         * column从上往下
         * column-reverse从下往上
         * 
         * */

.warp{
height: 1100px;
display: flex;
flex-direction: row;
}


###主轴的对齐方式
>以前写盒子的外边距的时候经常使用margin，这时候只要我们使用主轴的对齐方式，就能轻松实现，多个盒子的整齐排列

![加上主轴的对齐方式](http:https://img.haomeiwen.com/i4298342/d3ac67d4018c50ff.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

.warp{
margin: 0 auto;
width: 1100px;
height: 500px;
border: 1px solid #000;
display: flex;
flex-direction: row;
justify-content: space-between;
}


----
#####换行

**Demo**

<title></title>
<style type="text/css">
/*flex布局的兼容性稍微差点
* 移动端好朋友flex布局
* 因为移动端的手机，一般浏览器会比较高级
* pc兼容性差点
*
* */
body{
padding: 0;
margin: 0;
}
.box{
width: 200px;
height: 200px;
background-color: red;
border: 3px solid #000;
font-size: 30px;
text-align: center;
line-height: 200px;
}

        .warp{
            /*父盒子采用flex布局，就能轻松实现汇聚在一行*/
            /*默认情况下，我们是不换行*/
            /*flex-wrap设置换行
             * nowrap不换行，默认
             * wrap换行
             * wrap-reverse另起一行在上方
             * */
            display: flex;
            flex-direction: row;

/不换行的设置/
flex-wrap: nowrap;
/换行的设置/
flex-wrap: wrap;
}

        .box1{
            background-color: skyblue;
        }
        .box2{
            background-color: yellow;
        }
        .box3{
            background-color: green;
        }
        .box4{
            background-color: gray;
        }
    </style>
</head>
<body>
    <div class="warp">
        <div class="box box1">第一个</div>
        <div class="box box2">第二个</div>
        <div class="box box3">第三个</div>
        <div class="box box4">第四个</div>
        <div class="box box1">第五个</div>
        <div class="box box2">第六个</div>
        <div class="box box3">第七个</div>
        <div class="box box4">第八个</div>
        <div class="box box1">第九个</div>
        <div class="box box2">第十个</div>
        <div class="box box3">第十一个</div>
        <div class="box box4">第十二个</div>
    </div>
</body>

#####设置不换行的情况下

![不换行的情况下.png](http:https://img.haomeiwen.com/i4298342/26c83c7cea5b2e3a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

####设置换行

![换行后的情况.png](http:https://img.haomeiwen.com/i4298342/b00068c6a3095a7f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


---
###侧轴

>和主轴垂直方向的就是侧轴

        /*父盒子采用flex布局，就能轻松实现汇聚在一行*/
        /*align-items设置侧轴的方向
         * 
         * 侧轴的方向，
         * 如果主轴是竖着的，那么侧轴就是横着的，并且是从左往右
         * 主轴如果横着的，那么侧轴就是从上到下
         * 
         * stretch子元素没有高度或者宽度的情况下，然后进行拉伸，铺满
         * flex-start侧轴开始的位置
         * flex-end侧轴结束位置
         * center中心，能实现居中
         * baseline侧轴以文字的基准线为对齐
         * */
        .warp{
            margin: 0 auto;
            width: 1100px;
            height: 500px;
            border: 1px solid #000;
            
            display: flex;
            flex-direction: row;
            align-items: flex-end;
        }
        
        
        .box1{
            background-color: skyblue;
        }
        .box2{
            background-color: yellow;
        }
        .box3{
            background-color: green;
        }
        .box4{
            background-color: gray;
        }
    </style>
</head>
<body>
    <div class="warp">
        <div class="box box1">第一个</div>
        <div class="box box2">第二个</div>
        <div class="box box3">第三个</div>
        <div class="box box4">第四个</div>
    </div>
</body>


![主轴从左往右，侧轴从上到下](http:https://img.haomeiwen.com/i4298342/0219322c9779ea62.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


>侧轴的对齐方式
规定我们内容的侧轴排列

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*flex布局的兼容性稍微差点
* 移动端好朋友flex布局
* 因为移动端的手机，一般浏览器会比较高级
* pc兼容性差点
*
* */
body{
padding: 0;
margin: 0;
}
.box{
width: 200px;
height: 200px;
background-color: red;
border: 3px solid #000;
font-size: 20px;
text-align: center;
line-height: 200px;
}

        /*父盒子采用flex布局，就能轻松实现汇聚在一行*/
        /*align-content侧轴的对齐方式
         * center侧轴中心对齐，无间隙
         * flex-end侧轴底部对齐
         * flex-start侧轴顶部对齐
         * space-around是环绕对齐，侧轴开始与结束之间和父盒子有相同间隙，然后内容之间也有相同间隙
         * space-between侧轴开头和结束无间隙对齐，然后中间内容间隙一样
         * */
        .warp{
            margin: 0 auto;
            width: 800px;
            height: 900px;
            border: 1px solid #000;
            
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: flex-end;
            align-content: space-between;
            
        }
        .box1{
            background-color: skyblue;
        }
        .box2{
            background-color: yellow;
        }
        .box3{
            background-color: green;
        }
        .box4{
            background-color: gray;
        }
    </style>
</head>
<body>
    <div class="warp">
        <div class="box box1">第一个</div>
        <div class="box box2">第二个</div>
        <div class="box box3">第三个</div>
        <div class="box box4">第四个</div>
        <div class="box box1">第五个</div>
        <div class="box box2">第六个</div>
        <div class="box box3">第七个</div>
        <div class="box box4">第八个</div>
        <div class="box box1">第九个</div>
    </div>
</body>

</html>



![侧轴的对齐方式](http:https://img.haomeiwen.com/i4298342/72a419107a858d72.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)



>当然分清楚主轴和侧轴对我们理解flex布局有着非常重要的意义，上面的图片仅为小部分例子，当中有很多参数已经是写在代码内的注释，各位小伙伴有空多研究，我也会继续更新flex布局详细的内容，包括兼容性的问题

网友评论

本文标题：五分钟学会flex布局

本文链接：https://www.haomeiwen.com/subject/xcobtxtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

五分钟学会flex布局

flex布局是什么？

小Demo看出flex布局的强大

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端基础

Web前端之路

让前端飞