相关疑难解决方法(0)

我真的很困惑.在查找在线资源和文档时,这些属性的大多数文档似乎都引用了Flex-box,而不是grid.我不知道Flex-box中等效属性的文档对网格的适用性如何.

所以,我尝试引用https://css-tricks.com/snippets/css/complete-guide-grid/,它定义如下:

justify-items - 沿着行轴对齐网格项内的内容

justify-content - 此属性沿着行轴对齐网格

justify-self - 沿着行轴对齐网格项内的内容

但我仍然不明白它们之间的区别是什么.所以,我有3个问题要澄清.

1. 是justify-items在Flex的框属性相同 justify-items的网格属性？或者它们有什么不同？(换句话说,我可以重用Grid的Flex-box文档)
2. (证明 - )内容,自我和项目有什么作用？
3. 如何(证明 - )内容,自我和项目有何不同？

任何澄清将不胜感激.

编辑:由于每个人都不断给我Flex-box资源,我问的是css-grid,而不是flex-box.

据我了解，flexbox可以做的任何事情，css-grid也应该可以做（通常更为冗长）。

但是我不知道如何用一个项目将其他项目推到 margin: auto

ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  outline: 1px solid red;
  height: 200px;
  background-color: lime;
}

li {
  background-color: cornsilk;
}

li:last-of-type {
  margin-top: auto;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

看看所有单元格如何调整大小以适应其内容，最后一个单元格li将其他单元格推开以显示在最后吗？

我如何在不修改我的HTML来添加元素的情况下使用CSS网格呢？

ul {
  list-style-type: none;
  padding: 0;
  display: grid;
  outline: 1px solid red;
  height: 200px;
  background-color: lime;
}

li {
  background-color: cornsilk;
}

li:last-of-type {
  margin-top: auto;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

这很接近，但是所有行的大小都不是min-content-我不知道它们的大小是多少，但大小不是min-content …