[css] 手写一个满屏品字布局的方案
<!DOCTYPE html>
<html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta charset="UTF-8"><link rel="stylesheet" href="style.css"></head><body><article class="container"><div class="firstRow"><div class="item"></div></div><div class="secondRow"><div class="item"></div><div class="item"></div></div></article></body>
</html>//style.css
html, body{height: 100%;margin: 0;padding: 0;
}.container {display: flex;flex-direction: column;flex-wrap: wrap;width: 100%;height: 100%;
}.firstRow, .secondRow {width: 100%;height: 30%;display: flex;flex-direction: row;justify-content: center;margin: 10px 0;
}.item {background-color: red;width: 40%;height: 100%;margin: 0 auto;border-radius: 10%;
}
个人简介
我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论
主目录
与歌谣一起通关前端面试题
![Spring Boot 2.3 版本变化[翻译]](http://pic.xiahunao.cn/Spring Boot 2.3 版本变化[翻译])
![[css] span与span之间有看不见的空白间隔是什么原因引起的？有什么解决办法？](http://pic.xiahunao.cn/[css] span与span之间有看不见的空白间隔是什么原因引起的？有什么解决办法？)
![[css] 重置（初始化）css的作用是什么？](http://pic.xiahunao.cn/[css] 重置（初始化）css的作用是什么？)
![[css] 怎么让英文单词的首字母大写？](http://pic.xiahunao.cn/[css] 怎么让英文单词的首字母大写？)
![[css] 怎么才能让图文不可复制？](http://pic.xiahunao.cn/[css] 怎么才能让图文不可复制？)
![[css] 写出你知道的CSS水平和垂直居中的方法](http://pic.xiahunao.cn/[css] 写出你知道的CSS水平和垂直居中的方法)
![[css] 实现单行文本居中和多行文本左对齐并超出显示“...“](http://pic.xiahunao.cn/[css] 实现单行文本居中和多行文本左对齐并超出显示“...“)
![[css] 不使用border画出1px高的线，在不同浏览器的标准和怪异模式下都能保持效果一样](http://pic.xiahunao.cn/[css] 不使用border画出1px高的线，在不同浏览器的标准和怪异模式下都能保持效果一样)
