如何用一行 CSS 实现 10 种现代布局

原文来自： 作者：懵懵懂懂学前端 blog.csdn.net/qq_56966124…

如何用一行 CSS 完成 10 种现代布局

现代 CSS 布局使开发人员只需按几下键就能够编写十分有意义且强壮的款式规矩。上面的讨论和接下来的帖文研究了 几 种强壮的 CSS 布局，它们完成了一些非凡的作业。

01. 超级居中：place-items: center

关于榜首个“单行”布局，让咱们处理一切 CSS 范畴中最大的谜团：居中。我想让您知道，运用 place-items: center 会让此操作比您想象的容易。

首先指定 grid 作为 display 方法，然后在同一个元素上写入 place-items: center。place-items 是一起设置 align-items 和 justify-items 的快速方法。经过将其设置为 center ， align-items 和 justify-items 都将设置为 center。

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

这使得内容能够在父级内完美居中，而不管内部巨细。

02. 解构煎饼式布局：flex: <grow> <shrink> <baseWidth>

接下来咱们讲解构的煎饼！这是营销网站的常见布局，例如，可能有一行 3 个项目，一般带有图像、标题，然后是一些描述产品某些功用的文本。在移动设备上，咱们期望它们能够很好地堆叠，并跟着咱们添加屏幕尺度而扩展。

经过运用 Flexbox 完成此效果，您不需要在屏幕尺度发生变化时经过媒体查询来调整这些元素的方位。

flex 简写代表：flex: <flex-grow> <flex-shrink> <flex-basis> 。

正因为如此，假如您想让您的框填充到它们的 <flex-basis> 巨细，缩小到更小的尺度，但不拉伸以填充任何额外的空间，请写入：flex: 0 1 <flex-basis> 。在这种情况下，您的 <flex-basis> 是 150px，所以应该是这样：

.parent{
/* width: 600px; */
  height: 500px;
  border: 1px solid blue;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}  
.child{  
flex: 0 1 150px;
  border: 1px solid green;
  margin: 5px;
}

假如您确实期望框在换到下一行时拉伸并填充空间，请将 <flex-grow> 设置为 1 ，所以应该是这样：

.child{
flex: 1 1 150px;
}

现在，当您添加或减少屏幕尺度时，这些 flex 项目会缩小和添加。

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

此演示对网格布局利用了 minmax 函数。咱们在这儿做的是将最小侧边栏巨细设置为 150px ，但在更大的屏幕上，让它伸展出 25% 。侧边栏将始终占有其父级水平空间的 25%，直到 25% 变得小于 150px 。

将以下值添加为 grid-template-columns 的值：minmax(150px, 25%) 1fr 。在榜首列（在这种情况下，侧边栏）的项目其 minmax 为 150px（在25% ），第二列项目（这儿指 main 部分）占有其余的空间作为单一的 1fr 轨迹。

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

04. 煎饼堆栈布局：grid-template-rows: auto 1fr auto

与 Deconstructed Pancake 不同，当屏幕尺度改变时，本例不会包括它的子元素。一般称为粘性页脚，这种布局一般用于网站和应用程序，跨多个移动应用程序（页脚一般是工具栏）和网站（单页应用程序一般运用这种大局布局）。

向组件添加 display: grid 将为您供给一个单列网格，可是主区域的高度将仅与页脚下方的内容相同高。

要使页脚粘在底部，请添加：

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

1fr页眉和页脚内容设置为主动选用其子项的巨细，并将剩下空间 ( 1fr ) 应用于主区域，而auto调整巨细的即将选用其子项的最小内容的巨细，以便该内容巨细添加，行自身将添加以进行调整。

05. 经典圣杯布局：grid-template: auto 1fr auto / auto 1fr auto

关于经典的圣杯布局，有页眉、页脚、左边边栏、右侧边栏和主要内容。类似于以前的布局，但现在有侧边栏！

要运用一行代码编写整个网格，请运用 grid-template 特点。这使您能够一起设置行和列。

特点和值对为：grid-template: auto 1fr auto / auto 1fr auto 。榜首个和第二个以空格分隔的列表之间的斜线是行和列之间的分隔符。

<div class="parent">
    <header>Header</header>
    <div class="left-side" contenteditable>Left Sidebar</div>
    <main> Main Content</main>
    <div class="right-side" contenteditable>Right Sidebar</div>
    <footer>Footer</footer>
  </div>

.parent {
    display: grid;
    grid-template: auto 1fr auto / auto 1fr auto;
  }
  header {
    /*1开端，跨过2个网格*/
    /* 等同于 grid-column: 1 / span 2; */
    grid-column: 1 / 4;
    height: 100px;
    background: #f0d7e5;
  }
  .left-side {
    grid-column: 1 / 2;
    background: #a4e3e5;
    height: 100px;
  }
  main {
    grid-column: 2 / 3;
    background: #efbca2;
  }
  .right-side {
    grid-column: 3 / 4;
    background: #fae5ad;
  }
  footer {
    /* 高度自适应 */
    height: 100px;
    grid-column: 1 / 4;
    background: #d0f6be;
  }

与上一个示例相同，页眉和页脚具有主动调整巨细的内容，这儿的左边和右侧边栏会根据其子项的固有巨细主动调整巨细。可是，这次是水平尺度（宽度）而不是笔直尺度（高度）。

06. 12 跨网格：grid-template-columns: repeat(12, 1fr)

接下来咱们有另一个经典布局：12 跨网格。您能够运用 repeat() 函数在 CSS 中快速编写网格。对网格模板列运用 repeat(12, 1fr); 将为每个 1fr 供给 12 列。

  <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>

.parent{
  display: grid;
  /* 均分为12格 */
  grid-template-column: repeat(12,1fr);
  /* border:1px solid red; */
}
.parent >div {
  height: 50px;
}
.span-12 {
  /* grid-column CSS 特点是 grid-column-start (en-US) 和 grid-column-end (en-US) 的简写特点，用于指定网格项目的巨细和方位{ 经过为它的网格方位奉献线条，跨度或不添加任何内容（主动） */
  /* 铺满 等价于 grid-column: 1/ span 12;  */
  grid-column: 1 / 13;
  background: #d0f6be;
}
.span-6 {
  grid-column: 1/6;
  background: #efbca2;
}
.span-4 {
  grid-column: 4/8;
  background: #a4e2e5;
}

现在您有一个 12 列(13条网格线)的轨迹网格，咱们能够将子项放在网格上。一种方法是运用网格线放置它们。例如， grid-column: 1 / 13 将跨过从榜首到最后一行（第 13 行）并跨过 12 列。grid-column: 1 / 5; 将跨过前四个列。

另一种方法是运用 span 关键字。运用 span ，您能够设置开端线，然后设置从该起点跨过的列数。在这种情况下，grid-column: 1 / span 12 将等效于 grid-column: 1 / 13 ，而 grid-column: 2 / span 6 将等效于 grid-column: 2 / 8 。

.child-span-12{
grid-column:1/span 12;  
}

07. RAM (Repeat, Auto, MinMax): grid-template-columns(auto-fit, minmax(<base>, 1fr))

关于这第七个示例，结合您已经了解的一些概念来创立具有主动放置且灵敏的子项的响应式布局。美丽规整。这儿要记住的关键点是 repeat 、 auto-(fit|fill) 和 minmax() ，能够记住它们的首字母缩写词 RAM。

总之，应是这样：

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

再次运用 repeat ，但这次运用 auto-fit 关键字而不是显式数值。这能够主动放置这些子元素。这些子元素的根本最小值为 150px ，最大值为 1fr ，这意味着在较小的屏幕上，它们将占有整个 1fr 宽度，当它们达到 150px 宽度时，它们将开端流到同一条线上。

运用 auto-fit ，当它们的水平尺度超过 150px 时，框将拉伸以填充整个剩下空间。可是，假如您将其更改为 auto-fill ，则当超出 minmax 函数中的根本巨细时，它们将不会拉伸：

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