相关疑难解决方法(0)

考虑flex容器的主轴和横轴:

                                                                                                                       ^{资料来源:W3C}

要沿主轴对齐flex项,有一个属性:

• justify-content

要沿横轴对齐flex项,有三个属性:

• align-content
• align-items
• align-self

在上图中,主轴是水平的,横轴是垂直的.这些是Flex容器的默认方向.

但是,这些方向可以很容易地与flex-direction财产互换.

/* main axis is horizontal, cross axis is vertical */
flex-direction: row;
flex-direction: row-reverse;

/* main axis is vertical, cross axis is horizontal */    
flex-direction: column;
flex-direction: column-reverse;

(横轴始终垂直于主轴.)

我在描述轴的工作方式时的观点是,任何一个方向似乎都没有什么特别之处.主轴,横轴,它们在重要性方面都是相同的,并且flex-direction可以方便地来回切换.

那么为什么横轴有两个额外的对齐属性呢？

为什么align-content并且align-items合并为主轴的一个属性？

为什么主轴没有justify-self属性？

这些属性有用的场景:

• 将flex项放在flex容器的角落
  #box3 { align-self: flex-end; justify-self: flex-end; }

• 制作一组flex项目align-right(justify-content: flex-end)但是让第一个项目对齐left(justify-self: flex-start)

  考虑带有一组导航项和徽标的标题部分.随着justify-self徽标可以左对齐,而导航项目保持最右边,整个事物平滑地调整("弯曲")到不同的屏幕尺寸.

• 在一排三个柔性物品中,将中间物品粘贴到容器的中心(justify-content: center)并将相邻的物品对齐到容器边缘(justify-self: flex-start …

我正在尝试使用CSS Grid创建一个简单的页面.

我没有做的是将文本从HTML中心放到相应的网格单元格中.

我已经尝试在内容和选择器的div内部和外部放置内容,并且使用某些CSS属性无济于事.left_bgright_bg

我该怎么做呢？

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  display: subgrid;
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
}

.right_bg {
  display: subgrid;
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
}

.left_text {
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  position: relative;
  z-index: 1;
  justify-self: center; …

我有一个CSS网格,我正在尝试将justify-items属性设置为start.

这个(或与之相关的任何其他属性)都不起作用,在我的文本编辑器(atom)中,它显示为灰色,通常表示错误.

我看过规范,这个属性肯定是规范的一部分,甚至找到了它的视频教程.

当我使用它虽然它不起作用,我无法理解为什么.

当我将代码复制到codepen时,它仍然无法正常工作.

这里的代码:https://codepen.io/emilychews/pen/EvLPgJ

.gridwrapper {
  background: #e6e6e6;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: 100px;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  justify-items: start; /* THIS LINE ISN'T WORKING */
  align-items: stretch;
}

.gridwrapper div:nth-child(1) {
  grid-column: 1 / 4;
}

.gridwrapper div:nth-child(6) {
  grid-column: 1 / 3;
}

.gridwrapper div {
  padding: 1em;
  background: red;
  border: white;
  width: 100%;
  color: white;
  box-sizing: border-box;
}

.gridwrapper div:nth-child(odd) {
  background: blue;
}

<div class="gridwrapper">
  <div class="grid …

我注意到带有边距自动（显示网格的子项）的元素的位置有些闪烁。

我已经隔离了这个问题，请看下面的代码。

我知道我可以用不同的方法将元素居中，但这个方法应该有效。我到处搜索，但找不到任何有同样问题的人，但我在另一台计算机上尝试过，它具有相同的行为。

我希望红色框只是居中在父元素的中间，而不是在调整大小时闪烁

section {
  display: grid;
}

div {
  width: 200px;
  height: 200px;
  background: red;
  margin: auto;
}

<section>
  <div></div>
</section>

我通读了Grid的完整指南，但仍然对两组容器属性（即“ justify/align-items“ vs.”）之间的差异感到困惑justify/align-content。

我的困惑是围绕作者的说法，即“ -content”集在那里，因为

有时，网格的总大小可能小于其网格容器的大小

我认为这不仅适用于“ -content”集，还适用于两者。

有人可以帮忙解释一下吗？优选地，使用一些图示说明作为示例。