css实现十种现代布局

1.超级居中

place-items是同时设置align-items和justify-items的快速方法

2.解构煎饼式布局 flex 简写代表：flex: <flex-grow> <flex-shrink> <flex-basis>

3.侧边栏布局：grid-template-columns: minmax(<min>, <max>) …)

网格布局利用了 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(<base>, 1fr))

以上方法的结合使用

8.排列布局：justify-content: space-between

将第一个和最后一个子元素放置在其边界框的边缘，其余空间均匀分布在元素之间

9.clamp(<min>, <actual>, <max>)

 

仅有少数浏览器支持的技术即设置绝对最小和最大尺寸以及实际尺寸

10.保持宽高比：aspect-ratio: <width> / <height>