兩種布局都可以極大簡化排版布局的步驟，都是直接作用於自己的排版（比如：現在 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";
}

flex布局 、grid布局 （入門初體驗）