27
4
最近，我使用 CSS grid 创建了一个布局.虽然这很好用，但我对它的工作原理感到困惑。具体来说，我对 grid-template-rows: auto auto 1fr auto; 这一行感到困惑。
这里最终发生的是页眉和页脚的大小根据内容而定，这是有道理的，因为它们跨越了页面的宽度。文章本身根据其内容调整大小。但是，“title”和“nav”被分开了，这样 title 的大小根据内容和 nav 占据了剩余的空间。
如果我使用 grid-template-rows: auto auto auto auto;，标题和导航将共享相等的间距，这不是我想要的。
auto auto 1fr auto 是如何解释的，以便它给我调整大小，使 title 占据所需的最小空间，而 nav 占据其余空间？在这种情况下，“fr”和“auto”如何交互？
Trung tâm cá nhân
Điều phát hành
từ bỏchủ yếu {
display: grid;
grid-template-columns: 10rem auto;
grid-template-rows: auto auto 1fr auto;
grid-template-areas: "header header" "title article" "nav article" "footer footer";
}
tiêu đề {
grid-area: header;
background: lightblue;
}
div {
grid-area: title;
background: orange;
}
không {
grid-area: nav;
background: pink;
}
article {
grid-area: article;
background: yellow;
}
chân trang {
grid-area: footer;
background: lightblue;
}
This is the header
This is the title
This is the article. This is the article. This is the article. This is the article.
This is the article. This is the article. This is the article. This is the article.
This is the article. This is the article. This is the article. This is the article.
This is the article. This is the article. This is the article. This is the article.
This is the article. This is the article. This is the article. This is the article.
This is the article. This is the article. This is the article. This is the article.
câu trả lời hay nhất
fr 是贪心的，tự động 很害羞。当浏览器呈现您的网格时，Đầu tiên它会计算 tự động 元素的必要大小 - 它们都会得到它们可以接受的最小值 - 然后 ，在所有其他大小已知之后，它将剩余空间分配给 fr 单元格。分配的工作方式很明显:对数字求和，切饼，给每个人要求的数量。比如，您在定义中有 1fr、1fr、3fr Và 2fr - 这些数字加起来为 7，因此剩余的空间将被切割成 7 等份，然后每个人都有自己的份额。
记住这一点，网格将是你最好的 friend :
1fr 1fr 1fr --------> 3 个相等的列，auto auto auto ----> 3 个自适应宽度列
关于css - "grid-template-rows: auto auto 1fr auto"是如何解释的？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49145552/
27
4
0
我想为不同的本地化使用不同的图像。但是，我有所有分辨率和所有语言的图像。有没有办法做到这一点？ 最佳答案 是的，有可能。可绘制-de-rDE-ldpi，可绘制-de-rDE-mdpi。检查一下。 关于
在我添加 fr-Fr 区域设置的 angular.json 中，我看到一条消息 找不到“fr-FR”的区域设置数据。在运行命令 npm run build 时使用“fr”的语言环境数据。 但是，我在生
我正在尝试为我的其中一个站点创建法语版本。我在页面顶部设置了 setlocale(LC_ALL, 'fr_FR');，并使用 strftime 我以法式风格正确显示日期。 但是我在处理数字时遇到了一些
我们有一个读卡器验证(在 php/javascript 中)，可以正常工作。但是，当我们尝试在使用 azerty 键盘的网站上实现此功能时，滑动数据会被错误解释，因此无法识别该用户。 例如:在 en-
我有一个 shell 脚本在 cygwin 环境中的 windows 环境中运行。该脚本有一个清除功能，可以根据特定条件删除系统中的特定文件夹。 我准备好要删除的所有文件夹的列表，然后使用以下命令:
我目前正在本地化我的 iOS 应用程序。当我转到我的项目时，在本地化菜单下单击 + 按钮时，我会得到一个可供选择的语言列表，例如法语 (fr)。此外，在该菜单的底部有一个名为“其他”的子菜单，该菜单加
我围绕字符串转换和货币编写了一些单元测试。 我正在测试字符串是否以我期望的格式返回，给定 CultureInfo 方法已通过。 public string GetOverspendAmount(do
我有一个jsfiddle . 我拥有的: 我想要什么: 问题: 希望相关的部分是: grid-template-columns: repeat(auto-fit, 1fr); 我的部分中的两个元素
本文整理了Java中fr.bmartel.youtubetv.YoutubeTvView类的一些代码示例，展示了YoutubeTvView类的具体用法。这些代码示例主要来源于Github/Stacko
我正在寻找一个可以将用户的输入转换为具有特定规则的新输出的函数。 这条规则是: 第一个字母大写(例如:Paris) 如果字符串的每个单词之间包含两个破折号 (-)，则对第二个单词的第一个字母应用大写(
我想将我的应用程序本地化为法语和其他语言，因此我创建了上述文件夹并在将它们翻译成法语后填充了所有字符串。我收到编译时错误“撇号前面没有\”。根据报错和this SO question我在所有撇号前添加
rm -fr * 不会删除.files 另一方面， rm -fr * .* 会删太多! 在 Bash 中是否有可靠的方法递归删除目录的所有内容？ 我能想到的一种方法是: rm -fr $PWD mkd
我问这里是因为我数学很烂。 假设网格大小为 1920 像素，并且我没有使用显式大小调整。 即有多少 fr。 1200 像素？我如何计算它？ .grid { display: grid; gri
我的网格代码遇到问题。我想互相显示两个字段。我创建了两个 1fr 1fr，每个字段应该占用一个 fr。我什至尝试了网格区域，但不知何故它不起作用，但字段仍然不会与网格对齐。非常感谢。我很感谢你可能有的
在 Css 网格中我可以: .grid { display: grid; grid-template-columns: 1fr 2fr 1fr; } 有什么方法可以设置特定元素的宽度。
本文整理了Java中fr.opensagres.xdocreport.converter.XDocConverterException类的一些代码示例，展示了XDocConverterExceptio
我在Firefox 扩展的环境中工作。 问题 我正在尝试创建一个具有特定 lang 属性的新元素。我尝试了 How to create HTML element with lang attribute
Đã đóng cửa. Sự cố này không thể tái tạo được hoặc do lỗi chính tả. Câu trả lời không được chấp nhận vào thời điểm này. Sự cố này xảy ra do lỗi đánh máy hoặc sự cố không thể sao chép được nữa. Mặc dù một câu hỏi tương tự có thể được đặt lên hàng đầu
我想解析脚本中的日期，我想知道是否有等效的: relativedelta(days=1, weekday=MO) 但是几个月了？ 现在，我提取文本中的月份数字，并将其与文档的创建日期(和月份)进行比较
我正在使用 ul li 为网站创建导航。目前有7个链接。我已将 ul 的显示设置为带有 repeat(7,1fr) 的网格。但是我希望第一个和第二个 li 为 .5fr 和 1.5fr。我该怎么做？
Tôi là một lập trình viên xuất sắc, rất giỏi!