Align-items, justify-content

Question

Всем привет, ситуацию следующая. Пытаюсь расположить в меню logo и остальную информацию по разным сторонам блока

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 1440px;
  overflow-x: hidden;
  background-position: 50% 5%;
  margin: 0 auto;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 10px;
  margin-top: 32px;
  margin-left: 56px;
  margin-right: 56px;
  animation: up 2s ease-in-out;
}

<div class="header">

  <div class="header__logo">
    <a href="/" class="header__logo-link">
      <img src="img/svg/Vector.svg" alt=""></a>
  </div>

  <div class="phone">
    <p id="phone_number">999999999999999</p>
    <p id="free">Бесплатно для Марса</p>
  </div>

</div>

Как указала в коде боди флексовое с выравниванием элементов по центру, а вот хедер вертикально стоит по центру, а по горизонтали элементы должны быть расположены у краев блока, но они все равно находятся в центре. Если в боди поменять значение display на block, то элементы в header расположатся по краям, как и надо. Вопрос почему так? Перечитала на несколько раз значения у свойства display так и не поняла своей ошибки.

Answer 1

У хедера не задана ширина, а т.к. он является флекс элементом для body у которого прописано свойство align-items: center, то его ширина становится равной его содержимому, следовательно получаем такое отображение. Элементы располагаются по краям, просто ширина блока ограничена шириной этих самых элементов.
Старайся сначала открывать инспектор, если что-то непонятно, думаю твоя проблема сразу решилась бы)

body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      max-width: 1440px;
      overflow-x: hidden;
      background-position: 50% 5%;
      margin: 0 auto;
  }

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    padding: 10px;
    margin-top: 32px;
    margin-left: 56px;
    margin-right: 56px;
    animation: up 2s ease-in-out;
  }

<body>  
   <div class="header" >
       
       <div class="header__logo">
           <a href="/" class="header__logo-link">
            <img src="img/svg/Vector.svg" alt="logo"></a>
       </div>

       <div class="phone">
           <p id="phone_number">999999999999999</p>
           <p id="free">Бесплатно для Марса</p>
       </div>
    
   </div>
</body>

Answer 2

Вы ограничиваете ширину контента для всего body - это плохо. Если у вас на странице нужно будет сделать будет какой-то блок на всю ширину сайта, то это не получится сделать нормально. Используйте отдельный класс, чтобы выравнивать контент по центру. Я такой блок называю .container. И также не выравнивайте body по оси X, это плохая идея

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  display: block;
  max-width: 100%;
}

.container {
  display: block;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 0 10px;
}


.header {
  display: flex;
  justify-content: space-between;
}

<div class="intro">
  <div class="container">
    <div class="header">

      <div class="header__logo">
        <a href="/" class="header__logo-link">
          <img src="https://picsum.photos/50" alt=""></a>
      </div>

      <div class="phone">
        <p id="phone_number">999999999999999</p>
        <p id="free">Бесплатно для Марса</p>
      </div>

    </div>
  </div>
</div>

Почему выравнивать body по оси X не очень:
Я сейчас не знаю как это сказать точно, но на основе моего опыта - это накладывает некоторые ограничения на вёрстку

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

img {
  display: block;
  max-width: 100%;
}

.container {
  display: block;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 0 10px;
}

.header {
  display: flex;
  justify-content: space-between;
}

<div class="intro">
  <div class="container">
    <div class="header">

      <div class="header__logo">
        <a href="/" class="header__logo-link">
          <img src="https://picsum.photos/50" alt=""></a>
      </div>

      <div class="phone">
        <p id="phone_number">999999999999999</p>
        <p id="free">Бесплатно для Марса</p>
      </div>

    </div>
  </div>
</div>

БЛОГ НА HUSL

Align-items, justify-content

Ответы (2 шт):