flex实现水平居中和两栏布局

Posted 2021-01-23 qingshanyici

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了flex实现水平居中和两栏布局相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>水平垂直的实现</title>
    <style>
        .wrapper{
            width:250px;
            height:250px;
            border:1px red solid;
        }
        .div1{
            width:50px;
            height:50px;
            border:1px blue solid;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="div1">
        </div>
    </div>
</body>
</html>

上述编码的结果示意图如下所示：

技术分享图片

采用弹性布局，flex，也就是flexible-box的简称，弹性布局只要在父元素上设置display：flex；align-items:center;justify-content:center即可。这也是最简单的方法了。代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>水平垂直的实现</title>
    <style>
        .wrapper{
            width:250px;
            height:250px;
            border:1px red solid;
            display:flex;
            align-items:center;
            justify-content:center;
        }
        .div1{
            width:50px;
            height:50px;
            border:1px blue solid;            
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="div1">
        </div>
    </div>
</body>
</html>

效果图：

技术分享图片

flex还有一个常用的功能，就是实现两栏布局，左边为固定宽度，右边自适应。代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>前端开发面试题</title>
    <link href="StyleSheet1.css" rel="stylesheet" />
</head>
<body>
    <div class="wrapper wrapper-flex">
        <div class="left">左侧栏，固定宽度200px</div>
        <div class="right">右侧栏，宽度自适应,自适应的意思是加几个字就有多少的宽度</div>
    </div>
</body>
</html>

.wrapper{
    border:1px solid red;
    padding:10px 20px;
}

.left{
    width:300px;
    border:1px solid blue;
}
.right{
    border:1px solid blue;
    margin-left:300px;
    }

.wrapper-flex{
    display:flex;
    align-items:flex-start;
}
.wrapper-flex .left{
    flex:0 0 auto;
}
.wrapper-right .right{
    flex:1 1 auto;
}

效果如下：

技术分享图片

以上是关于flex实现水平居中和两栏布局的主要内容，如果未能解决你的问题，请参考以下文章

Flex实现水平竖直居中布局

前端面试题前端布局问题

flex布局

React Native 中的 Flex Box 的用法（水平布局垂直布局水平居中垂直居中居中布局）

七种实现左侧固定，右侧自适应两栏布局的方法

flex 常见属相及实现垂直水平居中