1行CSS实现10种经典布局

[natee]

1行CSS实现9种时髦的布局

这篇文章将教你使用如何用一行魔法般的 CSS 来实现 9 种时髦的布局。

• 1行CSS实现9种时髦的布局
  • 1. 居中对齐
  • 2. 布局解构
  • 3. 侧边栏宽度自适应
  • 4. footer 紧贴页面底部
  • 5. 经典的圣杯布局
  • 6. span grid自适应布局
  • 7. RAM 布局
  • 8. clamp() 实现响应式布局
  • 9. 固定长宽比缩放

你将学会如下 CSS 的用法：

• place-items: center
• flex: 0 1 <baseWidth>
• grid-template-columns: minmax(<min>, <max>) ...
• grid-template-rows: auto 1fr auto
• grid-template-columns: repeat(auto-fit, minmax(<base>, 1fr))
• clamp(MIN, VAL, MAX)
• aspect-ratio: <width> / <height>

1. 居中对齐

实现居中对齐你也许有很多种方法，但你试过下面这种方法吗？

<div class="parent">
  <div class="child" contenteditable>
    我是居中的盒子
  </div>
</div>

.parent {
  display: grid;
  place-items: center;
}

place-items 为 align-items 和 justify-content 的简写形式，可以有两个值 place-items: center center。

Online 示例

2. 布局解构

一个三列布局在 web 端并排显示，但是在移动端需要堆叠显示，这是一个很常见的需求。你可以很容易使用 @media 来实现，但你试过下面这种方法吗？

<div class="parent">
  <div class="child">
    box1
  </div>
  <div class="child">
    box2
  </div>
  <div class="child">
    box3
  </div>
</div>

.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.child{
  flex: 1 1 100px; /*  Stretching: */
  /* flex: 0 1 100px; */ /*  No stretching: */
}

flex 属性是 [<flex-grow>, <flex-shrink>, <flex-basis>] 的简写，默认值为 0 1 auto。

当 flex 取三值语法时：

• <flex-grow>：增长系数，无单位数，它指定了 flex 容器中剩余空间的多少应该分配给项目，如果所有的兄弟项目都有相同的 flex-grow 系数，那么所有的项目将获得相同的剩余空间，否则将根据不同的 flex-grow 系数定义的比例进行分配。。
• <flex-shrink>：收缩系数，无单位数，当默认宽度之和大于容器的时候才会发生收缩。
• <flex-basis>：必须为一个有效的宽度值，可以是百分比，它指定了 flex 元素在主轴方向上的初始大小。

flex: 1 1 100px; 表示：

• 初始状态每个 .child 宽 100px，
• 浏览器宽度超过 300px 时，每一个 .child 将按同等比例分配多出来的宽度
• 浏览器宽度小于 300px 时，.child 将进行收缩，由于父元素设置了 flex-wrap: wrap，所以这里的 .child 不会在同一行一直收缩，而是会出现换行情况
  • 浏览器宽度大于 200px 时，一行只能放下两个 .child ，所以第三个元素换行，前两个元素继续按照 <flex-shrink> 进行收缩
  • 浏览器宽度小于 200px 时，一行只能放下一个 .child ，即实现了窄屏堆叠样式效果

注：示例中有 padding 和 margin 暂且忽略。

Online 示例

3. 侧边栏宽度自适应

侧边栏限制一个最大宽度和最小宽度，然后根据容器宽度动态调整侧边栏宽度如何实现？你可以很轻松的用 min-width 实现，但你试过下面这种方法吗？

<div class="parent">
  <div class="sidebar">
    我是侧边栏，最小150px,最大20%
  </div>
  <div class="content">
    我是文本
  </div>
</div>

.parent {
  display: grid;
  grid-template-columns: minmax(80px, 30%) 1fr;
}

Online 示例

4. footer 紧贴页面底部

一个非常常见的需求，内容少时 footer 在浏览器底部，内容多时 footer 在 body 底部，现在已经有很成熟的方案实现该功能，但你试过下面这种方法吗？

<div class="parent">
  <div class="sidebar">
    我是侧边栏，最小150px,最大20%
  </div>
  <div class="content">
    我是文本
  </div>
</div>

.parent {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

Online 示例

5. 经典的圣杯布局

圣杯布局

• header和footer各自占领屏幕所有宽度，高度固定。
• 中间的container是一个三栏布局。
• 三栏布局两侧宽度固定不变，中间部分自动填充整个区域。
• 中间部分的高度是三栏中最高的区域的高度。

你试过下面这种方法吗？

<div class="parent">
  <div class="header" contenteditable>
    header
  </div>
  <div class="sidebar" contenteditable>Left Sidebar</div>
  <main class="content" contenteditable> Main Content</main>
  <div class="sidebar-right" contenteditable>Right Sidebar</div>
  <div class="footer" contenteditable>
    footer
  </div>
</div>

.parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}
.header{ grid-column: 1 / 4; }
.sidebar{ grid-column: 1 / 2; }
.content{ grid-column: 2 / 3; }
.sidebar-right{ grid-column: 3 / 4; }
.footer{ grid-column: 1 / 4; }

该方法主要是在 grid 圣杯基础上，增加了横向自适应，使得左右侧边栏更加灵活。

Online 示例

6. span grid自适应布局

自适应布局很容易用百分比形式实现，但你试过下面这种方法吗？

<div class="parent">
  <div class="span-12">Span 12</div>
  <div class="span-6">Span 6</div>
  <div class="span-4">Span 4</div>
  <div class="span-2">Span 2</div>
</div>

.parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}
.span-12 { grid-column: 1 / span 12; }
.span-6 { grid-column: 1 / span 6; }
.span-4 { grid-column: 4 / span 4; }
.span-2 { grid-column: 3 / span 2; }

span 表示“跨越”，即左右边框（上下边框）之间跨越多少个网格。

Online 示例

7. RAM 布局

实现和2. 布局解构相同的效果，但我们尝试用下面这种方法：

<div class="parent">
  <div class="child">box1</div>
  <div class="child">box2</div>
  <div class="child">box3</div>
  <div class="child">box4</div>
</div>

.parent {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

这里的 RAM 表示 repeat、auto、minmax。

Online 示例

8. clamp() 实现响应式布局

你可以很容易用 min-width 和 max-width 结合 width: 50% 的方式实现一个响应式布局，但你试过下面这种方法吗？

<div class="parent">
  <div class="child">
    <p id="w"></p>
    我预期是50%宽度，但是最小只能是150px，最大只能是250px
  </div>
</div>

.child {
  width: clamp(150px, 50vw, 250px);
}

clamp(<min>, <preferred>, <max>) 表示取三个参数中的中间值作为值。

Online 示例

9. 固定长宽比缩放

这样的需求很常见，一张图片内容随着浏览器的宽高响应式变化，但要保证图片的宽高比不变。实现方法可能让你感到头疼，可以参看css等比例缩放盒子，也许你还有其它方式实现，但你试过下面这种方法吗？

<div class="parent">
  <div class="child">
    我是固定长宽比的 box
  </div>
</div>

.child {
  aspect-ratio: 16/9;
}

注：aspect-ratio 只支持 chrome 84+ 。

Online 示例