标签：template splay pac font div color 排版 display gap
两种布局都可以极大简化排版布局的步骤，都是直接作用于自己的排版（比如：现在 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";
}
标签：template splay pac font div color 排版 display gap
原文地址：https://www.cnblogs.com/MrZhujl/p/10355697.html
