具有 flex-direction 列的父容器和具有 flex-direction 行的子容器答案

【问题标题】：Parent container with flex-direction column and child container with flex-direction row具有 flex-direction 列的父容器和具有 flex-direction 行的子容器
【发布时间】：2020-06-26 00:30:39
【问题描述】：

我有一个标题元素，我想显示 flex 列，这样我就可以将 .container div 垂直居中。这工作正常。然后我需要 .container 中的项目在 1200 像素上以均匀的间距连续弯曲。你不能在不同方向的弹性容器中做弹性容器吗？请在下面查看我的 css：

header {
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

【问题讨论】：

标签： css

【解决方案1】：

是的，这绝对是可能的，我认为 flex 属性只会影响父元素的直接子元素。

<div style="display: flex">
  Anything in here effected by flex
  <div>I'm effected by flex but my children aren't</div>
</div>

这并不意味着您不能将 flex 放在该子项上并设置不同的属性（例如 flex-direction 列等）。

如果不看更多代码就很难解决，但我会尝试删除 max-width，因为这通常会以奇怪的方式影响事情。

我会尝试的另一件事是使用更多容器。您通常可以通过简单地将另一个 div 包裹在 CSS 中来解决问题！

【讨论】：

【解决方案2】：

是的，Flexbox 非常适合嵌套容器。为了说明我的观点，这里是一个使用嵌套 Flexbox 的基本标头示例。

header {
    width: 100vw;
    top: 0;
    left: 0;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

header .image--container {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
    flex: 1 1 20%;
}

header .image--container img {
    width: 100%;
    display: block;
    height: auto;
}

header .menu--container  {
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    flex: 1 1 70%;
}

header .menu--container .parent--items {
    display: flex;
    flex-direction: column;
    width: calc(100% / 4);
}

header .avatar--container {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
    flex: 1 1 10%;
}

【讨论】：