flex布局实例（二）

【前言】

首先flex的出现是为了解决常见哪些问题呢？

一、页面行排列布局

二、div上下左右居中

【详解】

一、页面行排列布局

常见的为左右两个div并排显示，可以用浮动布局来处理

<style type="text/css">
.main{
     height: 300px;
     width: 600px;
}
.left,.right{
     border: 1px solid red;
     height: 200px;
     text-align: center;
     line-height: 200px;
}
.left{
       width: 48%;
       float: left;
}
.right{
       width: 48%;
       float: right;
}
 .clear{
       clear: both;
}
</style>
<body>
    <div class="main">
            <div class="left">左侧区域</div>
            <div class="right">右侧区域</div>
            <div class="clear"></div>
    </div>
</body>

这种布局有两个缺点

1.需要一个空div来清除浮动，当然也可以选用其他清除浮动的方法，但此处需要清除浮动才能不影响下面的布局。

2.当.left,.right 的宽度是固定的，浏览器宽度变的过窄时，.right会被挤到下面

解决方案：用display:flex布局，可以解决这两个缺点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex布局实例</title>
    <style type="text/css">
        *{margin: 0;padding: 0}
        .main{
            width: 600px;
            height: 300px;
            border: 1px solid rebeccapurple;
            margin: 10px auto;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 20px;
            box-sizing: border-box;
        }
        .left,.right{
            width: 48%;
            height: 200px;
            border: 1px solid red;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }
    </style>
</head>
<body>
    <div class="main">
            <div class="left">左侧区域</div>
            <div class="right">右侧区域</div>
    </div>
</body>
</html>

父级元素定义display:flex,子元素宽度用flex来定义,flex:1 是均分父级元素。占的比例相同

同样，二等分时，平分两个；三等分时，按照flex多少进行分布

flex是所占的比例，这样布局也就方便很多

（二）div上下左右居中

除了对父级元素进行display:flex;属性设置，可以使得子元素居中定位外。

若要对子元素里内容进行相关居中定位，任可以对子元素进行display:flex;属性设置

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex布局实例</title>
    <style type="text/css">
        *{margin: 0;padding: 0}
        .main{
            width: 600px;
            height: 300px;
            border: 1px solid rebeccapurple;
            margin: 10px auto;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 20px;
            box-sizing: border-box;
        }
        .left{
            width: 48%;
            height: 200px;
            border: 1px solid red;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }
    </style>
</head>
<body>
    <div class="main">
            <div class="left">居中区域</div>
    </div>
</body>
</html>

在未知div宽高时，用这种方法比较方便

这是我在使用flex布局时用到的两个比较常见又好用的例子

flex布局实例（二）

猜你喜欢