弹性盒混乱答案

【问题标题】：Flexbox confusion弹性盒混乱
【发布时间】：2018-05-13 23:29:56
【问题描述】：

我正在练习 flexbox，但被困在了一个特定的练习上。首先，我有一个来自引导程序的导航栏和一个来自引导程序的 CDN。在导航栏下是完全空的，它是我试图将 4 个不同的列均匀分布在窗口和导航栏下的地方。那是由于某种原因不能做的事情。我尝试了所有的 flexbox 命令，但没有。谁能解释我的css无法工作的原因？ https://jsfiddle.net/3k2xvt1k/#&togetherjs=FARNdVGlUO

HTML 代码

<!DOCTYPE html>
<html>

<head>


    <title>Hover</title>
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="hover.css">



</head>

<body>

<nav class="navbar navbar-light bg-light">
  <span class="brand">YORGOS LAFAZANIDIS</span>
  <ul class="nav justify-content-end">
  <li class="nav-item">
   <a href="#">Home</a>
  </li>
  <li class="nav-item">
    <a href="#">Culture</a>
  </li>
  <li class="nav-item">
    <a href="#">Bundles</a>
  </li>
  <li class="nav-item">
    <a href="#">Contact</a>
  </li>
</ul>
</nav>

<section class="b">
    <h1>Hero text</h1>
  <p><h5>Text text text</h5></p>
</section>

<section class="b2">
    <h1>Hero text</h1>
  <p><h5>Text text text</h5></p>
</section>

<!-- <section class="b3">
    <h1>Hero text</h1>
  <p><h5>Text text text</h5></p>
</section>

<section class="b4">
    <h1>Hero text</h1>
  <p><h5>Text text text</h5></p>
</section>
 -->




</body>

</html>

CSS 代码

.brand {
    color: #706965;
    font-weight: bold;
    font-size: 21px;
    letter-spacing: 1px;
}

.nav-item {
    margin: 15px;
    letter-spacing: 1px;
    text-decoration: none;
}

a {
    color: #706965;
}

a:hover {
    text-decoration: none;
}

.b {
    display: flex;
    flex-direction: column;
    background-color: #ccc1c1;
    max-width: 25%;
    min-height: 100vh;
    align-items: center;
}

.b2 {
    display: flex;
    flex-direction: column;
    background-color: #ccc1c1;
    max-width: 25%;
    min-height: 100vh;


}

.b3 {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    background-color: #ccc1c1;
    max-width: 25%;
    min-height: 100vh;
    align-items: center;
    justify-content: space-around;
}

.b4 {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    background-color: #ccc1c1;
    max-width: 25%;
    min-height: 100vh;
    align-items: center;
    justify-content: space-around;
}

【问题讨论】：

问题不在于 CSS 不起作用。就是它不像你期望的那样工作。我们无法从上面的代码中知道您的期望是什么，除非您明确指定它们：“我希望 a 按照链接的官方文档执行 b c”。请指定您对什么属性的值的期望，我们可以将您指向说明为什么它不会发生的文档，并且最有可能的是，我们可能会为您提供获得所需行为的替代方法。

标签： html css flexbox

【解决方案1】：

这是你想要的吗？

链接到小提琴JS fiddle

所以基本上我将你的 4 个部分排成一行，并给它们每个部分一个 col 类。

这将在 4 列之间平均分配空间

<div class="row m-0">
  <section class="col b">
    <h1>Hero text</h1>
    <p>
      <h5>Text text text</h5>
    </p>
  </section>

  <section class="col b2">
    <h1>Hero text</h1>
    <p>
      <h5>Text text text</h5>
    </p>
  </section>
  <section class="col b3">
    <h1>Hero text</h1>
    <p>
      <h5>Text text text</h5>
    </p>
  </section>

  <section class="col b4">
    <h1>Hero text</h1>
    <p>
      <h5>Text text text</h5>
    </p>
  </section>
</div>

【讨论】：

非常感谢这就是我想要的！ “行”是一个引导类？和m-0？
@GiwrgosLaphazanidhs ，两者都是引导类，row 用于对齐子行，m-0 用于边距 0

【解决方案2】：

flex 是您必须赋予parent element 的属性，子级附加flex-grow:1;。所以解决方案是将列包装在 display:flex div 中，并给每一列 flex-grow:1; 像这样：

    <!DOCTYPE html>
    <html>

    <head>


        <title>Hover</title>
        <link rel="stylesheet" type="text/css"
              href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="hover.css">
        <style>
            .brand {
                color: #706965;
                font-weight: bold;
                font-size: 21px;
                letter-spacing: 1px;
            }

            .nav-item {
                margin: 15px;
                letter-spacing: 1px;
                text-decoration: none;
            }

            a {
                color: #706965;
            }

            a:hover {
                text-decoration: none;
            }

            .col-container{
                display: flex;
            }
            .col{
                flex-grow: 1;
                background-color: #ccc1c1;
            }
        </style>


    </head>

    <body>

    <nav class="navbar navbar-light bg-light">
        <span class="brand">YORGOS LAFAZANIDIS</span>
        <ul class="nav justify-content-end">
            <li class="nav-item">
                <a href="#">Home</a>
            </li>
            <li class="nav-item">
                <a href="#">Culture</a>
            </li>
            <li class="nav-item">
                <a href="#">Bundles</a>
            </li>
            <li class="nav-item">
                <a href="#">Contact</a>
            </li>
        </ul>
    </nav>
    <div class="col-container">
        <section class="col">
            <h1>Hero text</h1>
            <p><h5>Text text text</h5></p>
        </section>

        <section class="col">
            <h1>Hero text</h1>
            <p><h5>Text text text</h5></p>
        </section>

        <section class="col">
            <h1>Hero text</h1>
            <p><h5>Text text text</h5></p>
        </section>

        <section class="col">
            <h1>Hero text</h1>
            <p><h5>Text text text</h5></p>
        </section>
    </div>


    </body>

    </html>

希望这是你想要的..

【讨论】：

非常感谢你们俩的帮助！两人都做对了。所以无论我用 flexbox 做什么，我都需要用一个 div 和一个不与 bootstrap cdn 混合的名称来包装它，并且在类内部只需要 display: flex inside ？然后我要用任何名称为每个部分提供一个类，并放置 flex-grow 1 以便它们平等地占据窗口的所有宽度？我们不应该放一个 flex-direction :column 以便它们垂直吗？
请看答案中的例子。我在<head/> 中添加样式。通常 - 是的，包装器只需 display:flex 并且列只需要 flex-grow:1。和垂直..你的意思是什么？ “英雄文本”无论如何都在“文本文本文本”之上，因为 div 的默认值为 100% 宽度，因此下一个 div 将出现在下方