[ HTML5 ] WEB 常用页面布局梳理和分析

.wrapper-2{ position: relative; display: flex; width: 100%; height: 200px; background-color : antiquewhite; } .wrapper-2 .left-2{ width: 200px; height: 100%; background-color: aqua; } .wrapper-2 .right-2{ width: 200px; height: 100%; background-color: aqua; } .wrapper-2 .center-2{ flex: 1; height: 100%; background-color: blueviolet; } <article class="<em>wrapper</em>

最强大的 CSS 布局 —— Grid 布局

grid-template-columns: repeat(auto-fill, 200px) 表示列宽是 200 px，但列的数量是不固定的，只要浏览器能够容纳得下，就可以放置元素，代码以及效果如下图所示： .wrapper image .wrapper-2 { display: grid; grid-template-columns: 100px 200px 100px; grid-auto-flow: row center | stretch; align-items: start | end | center | stretch; } 其代码实现以及效果如下： .wrapper, .wrapper-1, .wrapper grid-gap: 5px; grid-auto-rows: 50px; justify-items: start; } .wrapper-1 { justify-items: end; } .wrapper align-content 属性同理，只是方向为垂直方向 start - 对齐容器的起始边框 end - 对齐容器的结束边框 center - 容器内部居中 .wrapper, .wrapper-1, .wrapper

那些与 IE 相伴的日子

CSS 变量由浅入深，提升效率必备知识！

; grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr)); grid-gap: 1rem; } .wrapper