flex格局实例(二)

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布局时用到的两个比较常见又好用的例子

 

 

 

 

 

.

相关内容推荐