Question

我正在练习弹性盒并陷入特定的练习。首先，我有一个来自bootstrap的导航栏和一个来自bootstrap的cdn。在导航栏下面是完全空的，它是我试图在窗口和导航栏下均匀分配4个不同列的地方。这是因某种原因无法做到的。我尝试了所有的flexbox命令，但没有。谁能解释我为什么我的CSS不起作用的原因？ https://jsfiddle.net/3k2xvt1k/#&togetherjs=FARNdVGlUO

HTML CODE

<!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;
}

Answer 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>

Answer 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混乱

2 个答案: