flex布局、grid布局（入门初体验）

最新推荐文章于 2023-05-26 16:59:31 发布

banbiante5717

最新推荐文章于 2023-05-26 16:59:31 发布

阅读量177

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/MrZhujl/p/10355697.html

本文深入探讨了Flex与Grid两种CSS布局方式的特点与应用场景。Flex适用于单行排版，通过display:flex及justify-content等属性实现元素均匀分布；Grid则擅长多行与复杂页面排版，利用display:grid及grid-template-columns等属性定义网格结构。文章提供了具体实例，帮助读者理解并灵活运用这两种布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

两种布局都可以极大简化排版布局的步骤，都是直接作用于自己的排版（比如：现在 ul 上，ul>li 就会自动进行排版）

flex布局：一般用于单行排版

display: flex;
justify-content: space-evenly;//属性值可以在打印窗口调试，选择合适的。
flex-flow: wrap-reverse;//属性值可以在打印窗口调试，选择合适的。

grid布局：一般用于多行排版、单页排版、......

.news>ul{
    /*grid 布局*/
    display: grid;
    grid-template-columns: repeat(2, 1fr);
　　 /*几个值代表几行，对应值的大小代表对应行的行高*/
    grid-template-rows: 16.5rem 16.5rem; 
     /* 网格项之间添加一个间隙 */
    grid-gap: 10px;
    grid-template-areas:
            "h h"
            "h h";
}