Question

是否可以在我的flexbox布局的侧边栏上设置最大宽度而不影响内容区域（文章）？现在更改最大宽度也会影响内容区域。我想要当前的功能，布局响应，但也在侧栏上设置最大宽度。

HTML：

<!DOCTYPE html>
<html>
<head>
</head>
<body>

    <div class="flex-container">

        <nav class="nav">
            <ul>
                <li><a href="#">Menu1</a></li>
                <li><a href="#">Menu2</a></li>
                <li><a href="#">Menu3</a></li>
            </ul>
        </nav>

        <article class="article">
            <h1>Lorem ipsum</h1>
            <p>Lorem ipsum dolor ....</p>
        </article>

    </div>

</body>
</html>

CSS：

.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  text-align: center;
}

.flex-container > * {
  padding: 15px;
  -webkit-flex: 1 100%;
  flex: 1 100%;
}

.article {
  text-align: left;
}

.nav {
  background:#eee;
}

.nav ul {
  list-style-type: none;
  padding: 0;
}

.nav ul a {
  text-decoration: none;
}

@media all and (min-width: 768px) {
  .nav {
    text-align:left;
    -webkit-flex: 1 auto;
    flex:1 auto;
    -webkit-order:1;
    order:1;
  }

  .article {
    -webkit-flex:5 0px;
    flex:5 0px;
    -webkit-order:2;
    order:2;
  }
}

Answer 1

现在，您已经通过此声明告诉您的<nav>和<article>尽可能多地增长：

.flex-container > * {
    flex: 1 100%;
}

在使用<nav>而不是auto分配剩余空间之前，您应该定义100%元素的默认大小。 auto关键字表示＆＃34;查看我的宽度或高度属性＆＃34;。

.flex-container > .nav {
    flex: 1 1 auto;
    max-width: 300px;
}

就在那里，你告诉你的<nav>增长和缩小，并且永远不会超过300px（它实际上是330px，因为在进行此计算时没有考虑填充）

修改

因此，为了解决您的问题，我必须重写一些代码，这里是一个有效的fiddle

Flexbox侧边栏，最大宽度

1 个答案: