Flexbox путаница - PullRequest
Новая
       5

Flexbox путаница

0 голосов
/ 13 мая 2018

Я практиковал flexbox и застрял на определенной практике. Во-первых, у меня есть navbar от начальной загрузки и 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;
}

Ответы [ 2 ]

0 голосов
/ 13 мая 2018

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>

надеюсь, что это то, что вы хотите ..

0 голосов
/ 13 мая 2018

Это ты хочешь?

ссылка на скрипку JS скрипка

Итак, я обернул ваши 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...