flex布局实例（二）

青春..荒唐

浏览: 984471 次
性别:

最近访客更多访客>>

lliiqiang

nbczw8750

kingkongzmc

lokily

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS
常见特效

CSS 常见特效

【前言】

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

分享到：

display的flex和inline-flex属性区别 | flex布局实例（一）

2018-03-10 12:21
浏览 1078
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论