Проблема с гибким дисплеем

Мне не удается что-то сделать со свойством flex. По сути, я хочу, чтобы мой логотип располагался по центру слева, а ссылки - справа. Однако я не могу этого добиться, потому что они не разделятся.

Заранее спасибо, если кто знает, как это решить.

Имейте в виду, что моя цель - выровнять по вертикали все мои элементы в середине навигационной панели и сделать так, чтобы логотип находился слева, а ссылки - справа.

* {
  margin: 0px;
  padding: 0px;
  font-family: Consolas;
}

/* NOTE: NAVBAR */

.main-navbar {
  height: 60px;
  box-shadow: 0px 7px 22px 0px rgba(50, 50, 49, 0.1);
  width: 100%;
  display: inline-flex;
}

.logo-image {
  height: 50px;
  width: 50px;
  margin-left: 5px;
}

.logo-image-warp {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}

.nav-link-warp {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end !important;
  float: right;
}

.nav-link {
  font-size: 18px;
  margin: 0px 10px;
}

<!DOCTYPE html>
<html lang = "fr" dir = "ltr">
  <head>
    <meta charset = "utf-8">
    <link rel = "stylesheet" href = "./data/css/master.css">
    <title>CulturesCITY</title>
  </head>
  <body>
    <nav class = "main-navbar">
      <div class = "logo-image-warp">
        <img src = "./data/ressources/final-logo.png" alt = "LOGO" class = "logo-image">
      </div>
      <div class = "nav-link-warp">
        <a class = "nav-link">Accueil</a>
        <a class = "nav-link">À propos</a>
        <a class = "nav-link">Faire un don</a>
      </div>
    </nav>
  </body>
</html>

Мне просто любопытно, что означает "по центру слева"

— 17.04.2018 10:31

html css flexbox

17.04.2018 10:27

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

181

Перейти к ответу Данный вопрос помечен как решенный

Ответы 7

Для вертикальное центрирование используйте align-items: center, а для горизонтальный интервал - justify-content: space-between, чтобы разделить их, насколько это возможно.

Я также изменил значение свойства display на flex, потому что оно больше соответствующий поведению, и закомментировал ненужный:

* {
  margin: 0px;
  padding: 0px;
  font-family: Consolas;
}

/* NOTE: NAVBAR */

.main-navbar {
  height: 60px;
  box-shadow: 0px 7px 22px 0px rgba(50, 50, 49, 0.1);
  /*width: 100%; not necessary*/
  display: flex; /* modified */
  justify-content: space-between; /* added */
  align-items: center; /* added */
}

.logo-image {
  height: 50px;
  width: 50px;
  margin-left: 5px;
}

/*  not necessary
.logo-image-warp {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}
*/

/* instead use */

.logo-image {display: block} /* or better for images in general (img {display: block}) which removes the default bottom whitespace/margin */

.nav-link-warp {
  display: inline-flex; /* only this has the effect, with this example */
  /*align-items: center;*/
  /*justify-content: flex-end !important;*/
  /*float: right;*/
}

.nav-link {
  font-size: 18px;
  margin: 0px 10px;
}

<nav class = "main-navbar">
  <div class = "logo-image-warp">
    <img src = "http://placehold.it/100x100" alt = "LOGO" class = "logo-image">
  </div>
  <div class = "nav-link-warp">
    <a class = "nav-link">Accueil</a>
    <a class = "nav-link">À propos</a>
    <a class = "nav-link">Faire un don</a>
  </div>
</nav>

17.04.2018 10:31

Ответ принят как подходящий

Вы можете полностью удалить .logo-image-wrap и добавить align-items:center; и justify-content:space-between; в .main-navbar:

* {
  margin: 0px;
  padding: 0px;
  font-family: Consolas;
}

/* NOTE: NAVBAR */

.main-navbar {
  height: 60px;
  box-shadow: 0px 7px 22px 0px rgba(50, 50, 49, 0.1);
  width: 100%;
  display: inline-flex;
  align-items:center;
justify-content:space-between;
}

.logo-image {
  height: 50px;
  width: 50px;
  margin-left: 5px;
}

.nav-link-warp {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end !important;
  float: right;
}

.nav-link {
  font-size: 18px;
  margin: 0px 10px;
}

<nav class = "main-navbar">
      <div class = "logo-image-warp">
        <img src = "./data/ressources/final-logo.png" alt = "LOGO" class = "logo-image">
      </div>
      <div class = "nav-link-warp">
        <a class = "nav-link">Accueil</a>
        <a class = "nav-link">À propos</a>
        <a class = "nav-link">Faire un don</a>
      </div>
    </nav>

17.04.2018 10:31

Обновите свой код следующим фрагментом ...

* {
  margin: 0px;
  padding: 0px;
  font-family: Consolas;
}

/* NOTE: NAVBAR */

.main-navbar {
  height: 60px;
  box-shadow: 0px 7px 22px 0px rgba(50, 50, 49, 0.1);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-image {
  height: 50px;
  width: 50px;
  margin-left: 5px;
}

.logo-image-warp { 
  
}

.nav-link-warp {
   
  float: right;
}

.nav-link {
  font-size: 18px;
  margin: 0px 10px;
}

<!DOCTYPE html>
<html lang = "fr" dir = "ltr">
  <head>
    <meta charset = "utf-8">
    <link rel = "stylesheet" href = "./data/css/master.css">
    <title>CulturesCITY</title>
  </head>
  <body>
    <nav class = "main-navbar">
      <div class = "logo-image-warp">
        <img src = "./data/ressources/final-logo.png" alt = "LOGO" class = "logo-image">
      </div>
      <div class = "nav-link-warp">
        <a class = "nav-link">Accueil</a>
        <a class = "nav-link">À propos</a>
        <a class = "nav-link">Faire un don</a>
      </div>
    </nav>
  </body>
</html>

17.04.2018 10:32

Измените .main-navbar на display: flex вместо display: inline-flex. В противном случае он будет рассматриваться как встроенный элемент, который по умолчанию не будет охватывать всю ширину своего контейнера.

Тогда вам нужно будет установить justify-content: space-between на тот же элемент. Нет необходимости настраивать display: inline-flex на отдельные элементы. И не смешивайте float с flexbox.

.main-navbar {
  height: 60px;
  box-shadow: 0px 7px 22px 0px rgba(50, 50, 49, 0.1);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-image {
  height: 50px;
  width: 50px;
  margin-left: 5px;
}

.logo-image-warp { }

.nav-link-warp { }

.nav-link {
  font-size: 18px;
  margin: 0px 10px;
}

    <nav class = "main-navbar">
      <div class = "logo-image-warp">
        <img src = "http://via.placeholder.com/350x150" class = "logo-image">
      </div>
      <div class = "nav-link-warp">
        <a class = "nav-link">Accueil</a>
        <a class = "nav-link">À propos</a>
        <a class = "nav-link">Faire un don</a>
      </div>
    </nav>

17.04.2018 10:35

Используйте следующий CSS для контейнера:

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: stretch;
  align-items: center;

Затем добавьте пустой разделитель с flex-grow = 1, чтобы создать пространство между вашими элементами и логотипом.

* {
  margin: 0px;
  padding: 0px;
  font-family: Consolas;
}

/* NOTE: NAVBAR */

.main-navbar {
  height: 60px;
  box-shadow: 0px 7px 22px 0px rgba(50, 50, 49, 0.1);
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: stretch;
  align-items: center;
}

.separator {
  order: 0;
  flex: 1 1 auto;
  align-self: auto;
}

.logo-image {
  height: 50px;
  width: 50px;
  margin-left: 5px;
}

.logo-image-warp {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}

.nav-link-warp {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end !important;
  float: right;
}

.nav-link {
  font-size: 18px;
  margin: 0px 10px;
}

<!DOCTYPE html>
<html lang = "fr" dir = "ltr">
  <head>
    <meta charset = "utf-8">
    <link rel = "stylesheet" href = "./data/css/master.css">
    <title>CulturesCITY</title>
  </head>
  <body>
    <nav class = "main-navbar">
      <div class = "logo-image-warp">
        <img src = "./data/ressources/final-logo.png" alt = "LOGO" class = "logo-image">
      </div>
      <div class = "separator"></div>
      <div class = "nav-link-warp">
        <a class = "nav-link">Accueil</a>
        <a class = "nav-link">À propos</a>
        <a class = "nav-link">Faire un don</a>
      </div>
    </nav>
  </body>
</html>

17.04.2018 10:35

Я упростил ваш CSS и использовал flex вместо inline-flex. Дополнительный комментарий в источнике.

* {
  margin: 0px;
  padding: 0px;
  font-family: Consolas;
}
/* NOTE: NAVBAR */

.main-navbar {
  height: 60px;
  box-shadow: 0px 7px 22px 0px rgba(50, 50, 49, 0.1);
  width: 100%;
  display: flex;
  align-items: center; /* Vertical alignment in the middle */
}

.logo-image {
  height: 50px;
  width: 50px;
  margin-left: 5px;
}

.nav-link-warp {
  display: flex;
  justify-content: flex-end; /* Aligns flex items at the right */
  margin-left: auto; /* Pushes this class to the right side */
}

.nav-link {
  font-size: 18px;
  margin: 0px 10px;
}

<nav class = "main-navbar">
  <div class = "logo-image-warp">
    <img src = "http://via.placeholder.com/50x50" alt = "LOGO" class = "logo-image">
  </div>
  <div class = "nav-link-warp">
    <a class = "nav-link">Accueil</a>
    <a class = "nav-link">À propos</a>
    <a class = "nav-link">Faire un don</a>
  </div>
</nav>

17.04.2018 10:40

Вот и все, попробуйте этот код :)

* {
  margin: 0px;
  padding: 0px;
  font-family: Consolas;
}

/* NOTE: NAVBAR */

.main-navbar {
  height: 60px;
  box-shadow: 0px 7px 22px 0px rgba(50, 50, 49, 0.1);
  width: 100%;
  display: inline-flex;
}

.logo-image {
  height: 50px;
  width: 50px;
  margin-left: 5px;
}

.logo-image-warp {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  max-width: 40%;
  margin-left: 20%;
  margin-right: 20%;
}

.nav-link-warp {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end !important;
  float: right;
}

.nav-link {
  font-size: 18px;
  margin: 0px 10px;
  max-width: 60%;
}

<!DOCTYPE html>
<html lang = "fr" dir = "ltr">
  <head>
    <meta charset = "utf-8">
    <link rel = "stylesheet" href = "./data/css/master.css">
    <title>CulturesCITY</title>
  </head>
  <body>
    <nav class = "main-navbar">
      <div class = "logo-image-warp">
        <img src = "./data/ressources/final-logo.png" alt = "LOGO" class = "logo-image">
      </div>
      <div class = "nav-link-warp">
        <a class = "nav-link">Accueil</a>
        <a class = "nav-link">À propos</a>
        <a class = "nav-link">Faire un don</a>
      </div>
    </nav>
  </body>
</html>

17.04.2018 10:45

Другие вопросы по теме

Django: использовать несколько файлов CSS в одном HTML

Тонирование и эффекты затенения в CSS

Почему многоугольник неправильный?

Сделайте ссылку видимой

Выберите только определенные элементы в таблице с помощью css

Display: inline-block и display: flex одновременно

Скрыть полосу прокрутки, но с возможностью прокрутки в css

Обложка соответствует внутреннему изображению наклонного div

Как заставить это работать с кнопкой показать все / ничего?

Выравнивание поля ввода по левому краю

Проблема с гибким дисплеем

Ответы 7

Другие вопросы по теме

Похожие вопросы