flex布局 grid布局 (入门初体验)

Posted mrzhujl

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了flex布局 grid布局 (入门初体验)相关的知识,希望对你有一定的参考价值。

两种布局都可以极大简化排版布局的步骤,都是直接作用于自己的排版(比如:现在 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布局 (入门初体验)的主要内容,如果未能解决你的问题,请参考以下文章

Flex布局详解

移动WEB开发之flex布局附携程网首页案例制作

Grid布局和flex布局的区别

你不知道的CSS布局之 grid & flex

grid布局

Grid 布局