时间戳

首页 > 解决方案 > 具有 flex-direction 列的父容器和具有 flex-direction 行的子容器

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

问题描述

我有一个标题元素，我想显示 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

解决方案

是的，这绝对是可能的，我认为 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 中来解决问题！

推荐阅读