网页布局——Flex布局

Posted 2021-12-24 jing-tian

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网页布局——Flex布局相关的知识，希望对你有一定的参考价值。

早期时候我们左网站布局的使用表格(table)，然后使用浮动(float)、定位(position)和内联块(inline-block)，但所有这些方法本质上来讲都是hacks，存留了很多需要实现的重要功能问题(例如，垂直居中)。

display:flex和display:box都可用于弹性布局，不同的是display:box是2009年的命名，已经过时，用的时候需要加上前缀；display:flex是2012年之后的命名。在实际的测试中display:flex不能完全的替代display:box。display:flex的浏览器兼容性比较麻烦。

此外我还写了一个Flex布局的属性详解的文章详细的介绍了各种属性。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>登陆</title>
 6     <style type="text/css">
 7         htmlwidth: 100%;height: 100%;  /*整个页面的居中*/
 8         body
 9             width: 100%;
10             height: 100%;
11             display: flex;             /*flex弹性布局*/
12             justify-content: center;
13             align-items: center;
14         
15         #login
16             width: 300px;
17             height: 300px;
18             border: 1px black solid; 
19             display: flex;
20             flex-direction: column;        /*元素的排列方向为垂直*/
21             justify-content: center;    /*水平居中对齐*/
22             align-items: center;        /*垂直居中对齐*/
23         
24     </style>
25 </head>
26 <body>
27     <div id="login">
28         <h1>登陆</h1>
29         <input type="text"><br>
30         <input type="password"><br>
31         <button>确定</button>
32     </div>
33 </body>
34 </html>

输出结果:

技术图片

以上是关于网页布局——Flex布局的主要内容，如果未能解决你的问题，请参考以下文章

Flex布局怎么用？常用的有哪些属性？

在flex视图面版里布局网页，网页要做得很长，那个视图不够长怎么办呀？又拉不下去。

CSS弹性布局

移动端Web开发流式布局flex布局rem布局

移动端弹性布局--flex

网页布局汇总