十个现代布局ð[第3部分]-DEV365 开发者社区

这是“十个现代布局”的第三部分和决赛
If you aren't read the part 1, here you can read it.
If you aren't read the part 2, here you can read it.

＃7 RAM（重复，自动，Minmax）：网格 - 板块柱（自动拟合，Minmax（，1FR））

在这个第七个示例中，我们将采用有关创建灵活布局并添加儿童元素的自动放置的知识。结果将是适应不同屏幕尺寸和设备方向的响应迅速布局。

为了实现这一目标，我们将使用CSS网格属性（例如“重复”，“自动拟合”或“自动填充”和“ minmax（）”等CSS网格属性的组合。这些属性将使我们能够定义一个灵活的网格，该网格会自动调整到可用的空间并均匀分配子元素。我们可以使用首字母缩写式RAM记住这些属性，该RAM代表重复，自动拟合/填充和Minmax。

这种方法的关键优点是，它使我们不必手动计算和设置每个子元素的大小和位置。相反，我们让网格处理布局，这使得将来更容易维护和更新。

html

<div class="parent">
      <div class="child-1">My div 1</div>
      <div class="child-2">My div 2</div>
      <div class="child-3">My div 3</div>
      <div class="child-4">My div 4</div>
</div>

CSS

 .parent {
  display: grid;
  height: 100vh;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.child-1 {
  display: grid;
  place-items: center;
  background: papayawhip;
}

.child-2 {
  display: grid;
  place-items: center;
  background: blueviolet;
}

.child-3 {
  display: grid;
  place-items: center;
  background: greenyellow;
}

.child-4 {
  display: grid;
  place-items: center;
  background: whitesmoke;
}

＃8 排队：正当：中间空间

在下一个布局示例中，我们将使用CSS属性合理性：中间：空间中心将子元素放置在Flexbox容器中。该属性在容器的第一个和最后一个元素之间分布剩余的空间，同时将它们固定在盒子的边缘上。然后，中间元素在端点之间均匀间隔。

我们将使用此技术将此技术应用于包含标题，描述和图像块的一组卡片，该卡使用flex方向排列在垂直列中：列属性。这将创建一个视觉上令人愉悦的布局，其中标题和图像块与卡的顶部和底部对齐，并且描述介于两者之间。

。

通过掌握此技术，您可以创建适应不同屏幕尺寸和方向的优雅而动态的布局。尝试尝试不同的值和设置，以了解它们如何影响子元素的定位和间距。

html

<div class="parent">
      <div class="card">
        <h1>Card 1</h1>
        <p>This is a medium description.Share it.</p>
        <div class="visual"></div>
      </div>
      <div class="card">
        <h1>Card 2</h1>
        <p>
          This is a long description, thanks for read this post.
        </p>
        <div class="visual"></div>
      </div>
      <div class="card">
        <h1>Card 3</h1>
        <p>This is a short description</p>
        <div class="visual"></div>
      </div>
    </div>

CSS

 .parent {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
}
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: papayawhip;
  padding: 1rem;
}

.visual {
  height: 100px;
  width: 100%;
  background: paleturquoise;
  margin: 0.5rem 0;
}

＃9 夹紧我的风格：夹具（，，）

在此示例中，我们将使用CSS函数夹具（）为元素设置尺寸范围，包括最小值和最大值以及实际尺寸。这种技术使我们能够创建更灵活和可读的布局，以适应不同的屏幕尺寸和设备分辨率。

例如，我们可以使用clamp（）函数将元素的宽度设置为其父母的50％，最少为23个字符单元，最大为46个字符单元。这意味着该元素将保持在其父母的中心，并且无论视口大小如何，都不会变得太狭窄或太宽。

我们还可以使用clamp（）将文本元素（例如标题）的字体大小设置为随着视口宽度扩展的一系列值。这样，无论是小手机屏幕还是大型桌面显示器，文本都可以在所有设备上读取。

值得注意的是，在所有现代浏览器中不支持Clamp（）功能，因此具有后备选项并在不同的设备和浏览器上测试布局很重要。尽管如此，它是一种功能强大且多才多艺的工具，可以帮助您创建更敏感和清晰的设计。

html

 <div class="parent">
      <div class="card">
        <h1>Card</h1>
        <div class="visual"></div>
        <p>
          This is a description.
        </p>
        <br />
        <p>
          This is the content of the card. Here you can write a lot of text as
          you want.
        </p>
      </div>
    </div>

CSS

 .parent {
  display: grid;
  place-items: center;
  height: 100vh;
}
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: papayawhip;
  padding: 1rem;
  width: clamp(23ch, 50%, 46ch);
}

.visual {
  height: 100px;
  width: 100%;
  background: paleturquoise;
  margin: 0.5rem 0;
}

＃10 尊重方面：< / strong>方面比例： /

保持图像和视频的长宽比可能是网络开发中的挑战，尤其是在处理响应式布局时。但是，有一个名为Axtif-Ratio的新CSS属性，可以通过指定元素的所需长宽比（例如16：9或1：1）来简化此任务，并允许浏览器自动调整其大小和形状。<<<<<<<<<<<<<<<<<<<<<<<< /p>
此属性对于视频和iframe特别有用，在该视频和iframe中，保留原始纵横比至关重要。以前，开发人员不得不诉诸填充骇客和复杂的计算，以达到相同的效果。但是，使用方面比例，您可以在较少的代码和麻烦的情况下获得类似的结果。

html

<div class="parent"> <div class="card"> <h1>Card</h1> <div class="visual"></div> <p> This is the description </p> </div> </div>

CSS

.parent { display: grid; place-items: center; height: 100vh; } .card { width: 80%; display: flex; flex-direction: column; background: lightblue; padding: 1rem; } .visual { aspect-ratio: 16/9; background: lightcoral; margin: 0.5rem 0; }