Я довольно новичок в проблемах с ОТОБРАЖЕНИЕМ css:FLEX

ProgramBox

Я довольно новичок в проблемах с ОТОБРАЖЕНИЕМ css:FLEX

Post author:admin
Запись опубликована:10 января, 2022
Post category:Вопросы по программированию

#html #css

Вопрос:

Я довольно новичок в CSS. Я следую руководству на YouTube, и код, похоже, работает в видео, но, как я ни стараюсь, я не могу отобразить:функция flex в моем контейнере, чтобы выровнять мои элементы по горизонтали. Как бы я ни старался, они расположены горизонтально, любая помощь приветствуется.

Вот мой HTML и CSS код:

 Here is my CSS:

    @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300amp;display=swap');
    
    
    
    
    /*Global configuration. Setting box sizing border-box to included padding and margin in the element size.*/
    
    * {
        box-sizing: border-box; 
        padding: 0;
        margin: 0;
    }
    
    body {
        font-family: 'Lato', sans-serif;
        color: #333;
        line-height: 1.6;
    }
    
    ul {
        list-style-type: none;
    }
    
    a {
        text-decoration: none;
        color: #333;
    }
    
    h1, h2 {
        font-weight: 300;
        line-height: 1.2;
        margin:  10px 0;
    }
    
    p {
        margin: 10px 0;
    }
    
    img {
        width: 100%; /*Restrain image size to be equal to container size*/
        
    }
    
    .navbar {
        background-color: #047aed;
        color: #fff;
        height: 70px;
    
    }
    
    .container {
        max-width: 1100px;
        margin: 0 auto; /* 0 top and bottom and auto on left and right*/
        overflow: auto; /* sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.*/
        padding: 0 40px;
         }
    
    .flex {
        flex-direction: row;       
        }

  <body>
            <!-- Navbar-->
            <div class="navbar">
                <div class="container flex">
                    <h1 class="logo">Charles
                        <nav>
                            <ul>
                                <li> <a href="index.html">Home</a></li>
                                <li> <a href="projects.html">Projects</a></li>
                                <li> <a href="hobbies.html">Hobbies</a></li>
                            </ul>
                        </nav>
                    </h1>
                </div>
            </div>
        </body>

Ответ №1:

Есть пара вещей, которые нужно исправить:

Вы используете класс .flex , но он не определен как flexbox в CSS. Измените определение на

 .flex {
  display:flex;
  flex-direction: row;
}

У вашего гибкого контейнера div есть только один дочерний элемент, который является <h1> . С этим одним ребенком ваш div отображается, как и ожидалось. Предполагая, что вы хотите, чтобы логотип и навигация находились в одной строке, вам нужно изменить свой HTML. Вам также нужно сделать список в <nav> виде гибкого поля, чтобы его дочерние элементы отображались в строке.

 
<body>
  <!-- Navbar-->
  <div class="navbar">
    <div class="container flex">
      <h1 class="logo">Charles</h1>
      <nav>
        <ul class="flex">
          <li> <a href="index.html">Home</a></li>
          <li> <a href="projects.html">Projects</a></li>
          <li> <a href="hobbies.html">Hobbies</a></li>
        </ul>
      </nav>        
    </div>
  </div>
</body>

Ответ №2:

flex-direction не влияет на этот элемент, поскольку он не является контейнером Flex.

Попробуйте добавить display: flex или display: inline-flex .

Ответ №3:

 * {
        box-sizing: border-box; 
        padding: 0;
        margin: 0;
    }
    
    body {
        font-family: 'Lato', sans-serif;
        color: #333;
        line-height: 1.6;
    }
    
    ul {
        list-style-type: none;
    }
    
    a {
        text-decoration: none;
        color: #333;
    }
    
    h1, h2 {
        font-weight: 300;
        line-height: 1.2;
        margin:  10px 0;
    }
    
    p {
        margin: 10px 0;
    }
    
    img {
        width: 100%; /*Restrain image size to be equal to container size*/
        
    }
    
    .navbar {
        background-color: #047aed;
        color: #fff;
        height: 70px;
    
    }
    
    .container {
        max-width: 1100px;
        margin: 0 auto; /* 0 top and bottom and auto on left and right*/
        overflow: auto; /* sets the desired behavior for an element's overflow — i.e. when an element's                         content is too big to fit in its block formatting context — in both         directions.*/
        padding: 0 40px;
         }
    
    nav ul{
        margin-top:20px;
        display:flex;
        justify-content:space-between;
        }

 <body>
            <!-- Navbar-->
            <div class="navbar">
                <div class="container flex">
                    <h1 class="logo">Charles
                        <nav>
                            <ul>
                                <li> <a href="index.html">Home</a></li>
                                <li> <a href="projects.html">Projects</a></li>
                                <li> <a href="hobbies.html">Hobbies</a></li>
                            </ul>
                        </nav>
                    </h1>
                </div>
            </div>
</body>

Просто добавьте свойство display:flex в свой элемент «ul» внутри навигационного элемента. Нет необходимости добавлять дополнительный класс. Затем вы можете поиграть со свойством обоснования содержимого для того, как вы хотите, чтобы они отображались горизонтально.
Примечание: Мы всегда применяем display flex к оболочке/контейнеру/ или родительскому элементу, дочерние элементы которого мы хотим рассматривать как «гибкие элементы».

Метки: Я довольно новичок в проблемах с ОТОБРАЖЕНИЕМ css:FLEX