如何确定行的高度？ [英] How do I determine the height of a row?

查看：104 发布时间：2020/10/12 2:14:22 html css flexbox

本文介绍了如何确定行的高度？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

具体地说，我想知道在下面的示例中，为什么将 height 值设置为第一个flex-item会更改（实际上增加）第一行的高度

通常，我希望能够确定行的高度（我想将flex容器的高度设置为自动或显式值）。

 。 flex-container {display：flex; flex-wrap：包装;宽度：400px；高度：200px；边框：1px纯黑色； align-items：Stretch;}。flex-container> ：nth-child（1）{background-color：darkorchid; height：60px;}。flex-container> ：nth-child（2）{background-color：darkkhaki;}。flex-container> ：nth-child（3）{background-color：dodgerblue;}。flex-container> ：nth-child（4）{background-color：darkgoldenrod;}。flex-container> ：nth-child（5）{background-color：darkcyan;}

 < div class = flex-container> < span>我是数字1< / span> < div>我是2< / div> < div>我是3< / div> < div>我是4< / div> < span>我是5号< / span>< / div>

解决方案

flex容器的初始设置为 align-content：Stretch 。这意味着弯曲线（即行或列）将相等地扩展容器的横轴。这就是当您不对商品设置任何高度时得到的：

  .flex-container {display：flex; flex-wrap：包装;宽度：400px；高度：200px；边框：1px纯黑色； align-items：Stretch;}。flex-container> ：nth-child（1）{background-color：darkorchid; / *高度：60像素； * /}。flex-container> ：nth-child（2）{background-color：darkkhaki;}。flex-container> ：nth-child（3）{background-color：dodgerblue;}。flex-container> ：nth-child（4）{background-color：darkgoldenrod;}。flex-container> ：nth-child（5）{background-color：darkcyan;}

 < div class = flex-container> < span>我是数字1< / span> < div>我是2< / div> < div>我是3< / div> < div>我是4< / div> < span>我是5号< / span>< / div>

在高度为$code> 200px 和 align-items为拉伸的容器中，两行上的弹性项目均具有高度为100px。

在flex项目上设置高度时，会占用可用空间。只有剩余的空间被分解为 align-content：Stretch 。

所以在问题中给出了第一项高度：60px 。这样在十字轴上会留下140px的可用空间，对吗？好吧，让我们开始吧。该空间在两行之间平均分配。

 。 flex-container {display：flex; flex-wrap：包装;宽度：400px；高度：200px；边框：1px纯黑色； align-items：Stretch;}。flex-container> ：nth-child（1）{background-color：darkorchid; height：60px;}。flex-container> ：nth-child（2）{background-color：darkkhaki;}。flex-container> ：nth-child（3）{background-color：dodgerblue;}。flex-container> ：nth-child（4）{background-color：darkgoldenrod;}。flex-container> ：nth-child（5）{background-color：darkcyan;}

 < div class = flex-container> < span>我是数字1< / span> < div>我是2< / div> < div>我是3< / div> < div>我是4< / div> < span>我是5号< / span>< / div>

在这一点上，我们应该看到项目2、3和4的高度为130px，项目5的高度为70px。（第1项不参与，因为 align-items：Stretch 不再适用。它已被高度声明所覆盖（

为什么？因为那里的可用空间比原先想象的要少。内容本身（文本）具有高度，并且占用空间。一旦考虑了文本的高度（无论如何，我都不知道），这些数字就会加起来。

实际上，伸缩行的唯一原因在第一个示例中高度相等（在第一个示例中没有定义高度的高度）是所有文本具有相同的字体大小。如果要更改项目＃5的字体大小，则弯曲线的高度将再次不相等。

  .flex-container {display：flex; flex-wrap：包装;宽度：400px；高度：200px；边框：1px纯黑色； align-items：Stretch;}。flex-container> ：nth-child（1）{background-color：darkorchid; / *高度：60像素； * /}。flex-container> ：nth-child（2）{background-color：darkkhaki;}。flex-container> ：nth-child（3）{background-color：dodgerblue;}。flex-container> ：nth-child（4）{background-color：darkgoldenrod;}。flex-container> ：nth-child（5）{background-color：darkcyan;字号：2em； / *演示* /}

 < div class =弹性容器 < span>我是数字1< / span> < div>我是2< / div> < div>我是3< / div> < div>我是4< / div> < span>我是5号< / span>< / div>

更多详细信息：

在多行柔性商品包装后，请消除它们之间的空间（间隙）

弹性项目的宽度和高度为什么会影响弹性项目的呈现方式？

flex-wrap如何与align-self，align-items和align-content一起使用？

Specifically, I want to know, in the example below, why setting a height value to the first flex-item changes (actually increases) the height of the first row.

Generally, I want to be able to determine the height of a row (I suppose when the height of the flex-container is set to auto or an explicit value).

.flex-container {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
  height: 200px;
  border: 1px solid black;
  align-items: stretch;
}

.flex-container> :nth-child(1) {
  background-color: darkorchid;
  height: 60px;
}

.flex-container> :nth-child(2) {
  background-color: darkkhaki;
}

.flex-container> :nth-child(3) {
  background-color: dodgerblue;
}

.flex-container> :nth-child(4) {
  background-color: darkgoldenrod;
}

.flex-container> :nth-child(5) {
  background-color: darkcyan;
}

<div class="flex-container">
  <span>I am number 1</span>
  <div>I am number 2</div>
  <div>I am number 3</div>
  <div>I am number 4</div>
  <span>I am number 5</span>
</div>

解决方案

An initial setting of a flex container is align-content: stretch. This means that flex lines (i.e., "rows" or "columns") will expand the cross axis of the container equally. And that's what you get when you don't set any heights on the items:

.flex-container {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
  height: 200px;
  border: 1px solid black;
  align-items: stretch;
}

.flex-container> :nth-child(1) {
  background-color: darkorchid;
  /* height: 60px; */
}

.flex-container > :nth-child(2) {
  background-color: darkkhaki;
}

.flex-container > :nth-child(3) {
  background-color: dodgerblue;
}

.flex-container > :nth-child(4) {
  background-color: darkgoldenrod;
}

.flex-container > :nth-child(5) {
  background-color: darkcyan;
}

<div class="flex-container">
  <span>I am number 1</span>
  <div>I am number 2</div>
  <div>I am number 3</div>
  <div>I am number 4</div>
  <span>I am number 5</span>
</div>

In a container with height: 200px and align-items: stretch, flex items on both lines have heights of 100px.

When you set a height on a flex item you are consuming free space. Only the remaining space gets factored into align-content: stretch.

So in the question the first item is given height: 60px. That leaves 140px of free space remaining in the cross axis, right? Okay, let's go with that. That space is distributed equally among both lines.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
  height: 200px;
  border: 1px solid black;
  align-items: stretch;
}

.flex-container> :nth-child(1) {
  background-color: darkorchid;
  height: 60px;
}

.flex-container > :nth-child(2) {
  background-color: darkkhaki;
}

.flex-container > :nth-child(3) {
  background-color: dodgerblue;
}

.flex-container > :nth-child(4) {
  background-color: darkgoldenrod;
}

.flex-container > :nth-child(5) {
  background-color: darkcyan;
}

<div class="flex-container">
  <span>I am number 1</span>
  <div>I am number 2</div>
  <div>I am number 3</div>
  <div>I am number 4</div>
  <span>I am number 5</span>
</div>

At this point we should see items 2, 3 and 4 with heights of 130px, and item 5 with a height of 70px. (Item 1 doesn't participate because align-items: stretch no longer applies. It's been overridden with a height declaration (full explanation).)

But that's not what happens. Participating items on the first row have a height of 121px, and on the second row 79px.

Why? Because there was less free space than originally thought. The content itself (the text) has height and consumes space. Once you factor in the height of the text (whatever it may be, I don't know), those numbers add up.

In fact, the only reason flex lines were equal height in the first example (the one with no height defined on the first item) was that all text had the same font size. If you were to change the font size of, let's say, item #5, flex lines would again have unequal heights.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
  height: 200px;
  border: 1px solid black;
  align-items: stretch;
}

.flex-container> :nth-child(1) {
  background-color: darkorchid;
  /* height: 60px; */
}

.flex-container > :nth-child(2) {
  background-color: darkkhaki;
}

.flex-container > :nth-child(3) {
  background-color: dodgerblue;
}

.flex-container > :nth-child(4) {
  background-color: darkgoldenrod;
}

.flex-container > :nth-child(5) {
  background-color: darkcyan;
  font-size: 2em; /* demo */
}

<div class="flex-container">
  <span>I am number 1</span>
  <div>I am number 2</div>
  <div>I am number 3</div>
  <div>I am number 4</div>
  <span>I am number 5</span>
</div>

More details:

这篇关于如何确定行的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

如何确定行的高度？ [英] How do I determine the height of a row?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

如何确定行的高度？ [英] How do I determine the height of a row?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭