如何通过flex进行网页布局

通过Flex可以简便、完整、响应式地实现各种页面布局。随着浏览器的发展，目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。接下来将和大家分享如何通过flex进行网页布局

* {
            margin: 0;
            padding: 0;
        }

html {
            width: 100%;
            height: 100%;
        }
 body {
            display: flex;
            width: 100%;
            height: 100%;
            background: #eee;
            justify-content: center;
            align-items: center;
        }
 .box {
            width: 200px;
            height: 200px;
            background:pink;
        }

效果图：

两列等高布局：

左边固定宽度，右边占据剩余宽度：

效果图：

总结：以上就是有关flex布局的有关内容了，希望对大家有所帮助。

以上就是如何通过flex进行网页布局的详细内容，更多请关注 第一PHP社区 其它相关文章！