【css实现十种现代布局】1.超级居中
文章图片
place-items是同时设置align-items和justify-items的快速方法
2.解构煎饼式布局 flex 简写代表：flex:
文章图片
3.侧边栏布局：grid-template-columns: minmax(
网格布局利用了 minmax 函数。我们在这里做的是将最小侧边栏大小设置为 150px ，但在更大的屏幕上，让它伸展出 25% 。侧边栏将始终占据其父级水平空间的 25%，直到 25% 变得小于 150px 。第二列项目占据其余的空间作为单一的 1fr 轨道。
4.煎饼堆栈布局：grid-template-rows: auto 1fr auto
文章图片
页眉和页脚内容设置为自动采用其子项的大小，并将剩余空间 ( 1fr ) 应用于主区域，而auto调整大小的行将采用其子项的最小内容的大小，以便该内容大小增加，行本身将增长以进行调整。
5.经典圣杯布局：grid-template: auto 1fr auto / auto 1fr auto
属性和值对为：grid-template: auto 1fr auto / auto 1fr auto 。第一个和第二个以空格分隔的列表之间的斜线是行和列之间的分隔符。
页眉和页脚具有自动调整大小的内容，这里的左侧和右侧边栏会根据其子项的固有大小自动调整大小。但是，这次是水平尺寸（宽度）而不是垂直尺寸（高度）。
6. 12 跨网格：grid-template-columns: repeat(12, 1fr)
a. 现在您有一个 12 列的轨道网格，我们可以将子项放在网格上。一种方法是使用网格线放置它们。例如， grid-column: 1 / 13 将跨越从第一到最后一行（第 13 行）并跨越 12 列。grid-column: 1 / 5;
将跨越前四个列。
文章图片
b.使用 span 关键字。使用 span ，您可以设置起始线，然后设置从该起点跨越的列数。在这种情况下，grid-column: 1 / span 12 将等效于 grid-column: 1 / 13 ，而 grid-column: 2 / span 6 将等效于 grid-column: 2 / 8 。
文章图片
7. RAM (Repeat, Auto, MinMax): grid-template-columns(auto-fit, minmax(
以上方法的结合使用
8.排列布局：justify-content: space-between
将第一个和最后一个子元素放置在其边界框的边缘，其余空间均匀分布在元素之间
9.clamp(,
仅有少数浏览器支持的技术即设置绝对最小和最大尺寸以及实际尺寸
10.保持宽高比：aspect-ratio:
推荐阅读
- 前端|如何用一行 CSS 实现 10 种现代布局
- Notes|html文字一行时靠右，多行时靠左
- 前端|Github搭建个人网站（学习前端，记录个人博客）
- css|【玩转CSS】一文带你了解浮动
- html|学成在线官网首页完整版（含psd源文件）
- 前端|刷题，巩固基础的好方法
- 前端|flex布局
- CSS
- 前端|瞎几把总结一波