проблема с использованием flexbox для пробела между элементами - PullRequest
Новая
       1

проблема с использованием flexbox для пробела между элементами

0 голосов
/ 07 октября 2019 

.flexbox {
  display: flex;
}

.nav {
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  max-height: 100px;
  margin-top: 15px;
}

.logo {
  height: 100px;
}

img {
  height: 100%;
}

.container {
  flex-direction: row;
}

ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

ul a {
  color: gray;
  text-decoration: none;
}
<header>
  <nav class="nav flexbox">
    <div class="logo">
      <img src="./images/logo.png" alt="Logo">
    </div>
    <div class="container flexbox">
      <ul class="items">
        <li class="item">
          <a href="http://" target="_blank" rel="noopener noreferrer">
                    Home
                    </a>
        </li>
        <li class="item">
          <a href="http://" target="_blank" rel="noopener noreferrer">
                    About
                    </a>
        </li>
        <li class="item">
          <a href="http://" target="_blank" rel="noopener noreferrer">
                    Services
                    </a>
        </li>
        <li class="item">
          <a href="http://" target="_blank" rel="noopener noreferrer">
                    Team
                    </a>
        </li>
        <li class="item">
          <a href="http://" target="_blank" rel="noopener noreferrer">
                    Blog
                    </a>
        </li>
        <li class="item">
          <a href="http://" target="_blank" rel="noopener noreferrer">
                    Contact
                    </a>
        </li>
      </ul>
    </div>

  </nav>
</header>

Мне нужно разделить содержимое списка с помощью justify-content. Я использую пробел между значениями, но не работает. С какой проблемой я сталкиваюсь? Это связано с элементом, имеющим значение по умолчанию для встроенного отображения? Извините за вопросы, я новичок в flexbox.

С другой стороны, код студии визуального редактора по умолчанию помещает их в элемент a. Для чего это?

Ответы [ 3 ]

0 голосов
/ 07 октября 2019 

.flexbox {
  display: flex;
}

.nav {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  max-height: 100px;
  margin-top: 15px;
}

.logo {
  align-items: center;
  width: 50%;
}

img {
  height: 100%;
}

.container {
  flex-direction: row;
  width: 50%;
}

ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

ul a {
  color: gray;
  text-decoration: none;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <body>
    <header>
      <nav class="nav flexbox">
        <div class="logo">
          <img src="./images/logo.png" alt="Logo">
        </div>
        <div class="container flexbox">
          <ul class="items">
            <li class="item">
              <a href="http://" target="_blank" rel="noopener noreferrer">
                Home
              </a>
            </li>
            <li class="item">
              <a href="http://" target="_blank" rel="noopener noreferrer">
                About
              </a>
            </li>
            <li class="item">
              <a href="http://" target="_blank" rel="noopener noreferrer">
                Services
              </a>
            </li>
            <li class="item">
              <a href="http://" target="_blank" rel="noopener noreferrer">
                Team
              </a>
            </li>
            <li class="item">
              <a href="http://" target="_blank" rel="noopener noreferrer">
                Blog
              </a>
            </li>
            <li class="item">
              <a href="http://" target="_blank" rel="noopener noreferrer">
                Contact
              </a>
            </li>
          </ul>
        </div>

      </nav>
    </header>

  </body>
</html>

Ваш код в порядке, проблема в том, что ul получает 100%, и не было места! Я установил .container ширина 50% и .logo ширина 50%.

Вы можете перейти по ссылкам ниже для справки https://yoksel.github.io/flex-cheatsheet/ https://css -tricks.com / snippets / css / a-guide-to-flexbox /

0 голосов
/ 07 октября 2019

Вы можете использовать этот код 

body {
            margin: 0;
            padding: 0;
        }        
        .flexbox {
            display: flex;
        }
        .nav {
            flex-direction: row;
            justify-content: space-between;
            align-items: stretch;
            max-height: 50px;
            margin-top: 0;
            background-color: gray;
            margin: 0;
            padding: 10px;
        }
        .logo {
            margin: 0;
            padding: 0;
        }
        img {
            margin: 0;
            padding: 0;
        }
        .container {
            flex-direction: row;
        }
        ul {
            list-style: none;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin: 0;
            padding: 0;
        }
        ul a {
            color: #ffffff;
            text-decoration: none;
            font-size: 16px;
            font-weight: 400;
            padding: 15px;
        }
<header>
        <nav class="nav flexbox">
            <div class="logo">
                <img src="./images/logo.png" alt="Logo">
            </div>
            <div class="container flexbox">
                <ul class="items">
                    <li class="item">
                        <a href="http://" target="_blank" rel="noopener noreferrer">Home</a>
                    </li>
                    <li class="item">
                        <a href="http://" target="_blank" rel="noopener noreferrer">About</a>
                    </li>
                    <li class="item">
                        <a href="http://" target="_blank" rel="noopener noreferrer">Services</a>
                    </li>
                    <li class="item">
                        <a href="http://" target="_blank" rel="noopener noreferrer">Team</a>
                    </li>
                    <li class="item">
                        <a href="http://" target="_blank" rel="noopener noreferrer">Blog</a>
                    </li>
                    <li class="item">
                        <a href="http://" target="_blank" rel="noopener noreferrer">Contact</a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
0 голосов
/ 07 октября 2019

пробел не хороший выбор. попробуйте flex-end и не будете думать о меню позиции. Используйте отступы для пространства 

.flexbox {
  display: flex;
}

.nav {
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  max-height: 100px;
  margin-top: 15px;
}

.logo {
  height: 100px;
}

img {
  height: 100%;
}

.container {
  flex-direction: row;
}

ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

ul a {
  color: gray;
  text-decoration: none;
  display: inline-block;
  padding: 5px 10px;
  margin: 0 2px;
}
<header>
  <nav class="nav flexbox">
    <div class="logo">
      <img src="./images/logo.png" alt="Logo">
    </div>
    <div class="container flexbox">
      <ul class="items">
        <li class="item">
          <a href="http://" target="_blank" rel="noopener noreferrer">
                    Home
                    </a>
        </li>
        <li class="item">
          <a href="http://" target="_blank" rel="noopener noreferrer">
                    About
                    </a>
        </li>
        <li class="item">
          <a href="http://" target="_blank" rel="noopener noreferrer">
                    Services
                    </a>
        </li>
        <li class="item">
          <a href="http://" target="_blank" rel="noopener noreferrer">
                    Team
                    </a>
        </li>
        <li class="item">
          <a href="http://" target="_blank" rel="noopener noreferrer">
                    Blog
                    </a>
        </li>
        <li class="item">
          <a href="http://" target="_blank" rel="noopener noreferrer">
                    Contact
                    </a>
        </li>
      </ul>
    </div>

  </nav>
</header>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...