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

Posted 2021-02-08 mrzhujl

两种布局都可以极大简化排版布局的步骤，都是直接作用于自己的排版（比如：现在 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";
}