Question

例如，如果.nav-flex是父母，为什么我的弹性样式不会出现在我的子锚元素中。我必须在子锚元素上显示：FLEX以使其显示为flex。

（父母）

SELECT cast(AES_ENCRYPT('text', SHA1('My secret passphrase')) as char(100)) as enc, 
cast(AES_DECRYPT(AES_ENCRYPT('text', SHA1('My secret passphrase')), SHA1('My secret passphrase')) as char(100)) as denc

（孩子）/ 我必须插入display：flex down to flex for flex /

.nav-flex  {
  display: flex;
  flex-direction: row;
}

Answer 1

flex layout box model有两个概念：

Flex containers

flex container是由带有a的元素生成的框计算display或flex的inline-flex。
Flex items

Flex容器的流入子容器称为flex items 并使用flex布局模型进行布局。

因此，.nav-flex { display: flex }使.nav-flex成为灵活容器，并在弹性项目中生成a。

由于a是弹性项目，flex-grow: 1会使它们增长以填充所有.nav-flex。

但是，justify-content仅适用于Flex容器，因此无效。

相反，我认为你想要其中一个（它们是等效的）：

由于a flex项为其内容建立了新的块格式化上下文，因此您可以使用text-align将其内联级别的内容居中：

.nav-flex  {
  display: flex;
}
a {
  flex-grow: 1;
  text-align: center;
}

<nav class="nav-flex"><a>Home</a><a>About</a><a>Contact</a></nav>

移除flex-grow: 1以阻止a增长，并使用justify-content: space-around .nav-flex正确对齐它们：

.nav-flex  {
  display: flex;
  justify-content: space-around;
}

<nav class="nav-flex"><a>Home</a><a>About</a><a>Contact</a></nav>

制作a个展示素品，使其文字内容包含在展示素品中，并与justify-content对齐：

.nav-flex  {
  display: flex;
}
a {
  flex-grow: 1;
  display: flex;
  justify-content: center; /* Or space-around */
}

<nav class="nav-flex"><a>Home</a><a>About</a><a>Contact</a></nav>

当我已将父设置为flex时，为什么我必须告诉孩子显示flex？

1 个答案: