Как я могу создать границы между элементами в контейнере Flexbox?

Question

Я пытаюсь повторить это

Я выровнял все гибкие элементы друг к другу, но независимо от того, что я делаю, я просто не могу получить короткая граница da sh между элементами и большим белым фоном под ним. Это мой код:

.flex-container {
  border: 5px solid white;
  position: relative;
  z-index: 1;
}

.flex {
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
}

.flex-item {
  flex-grow: -0.5;
  padding: 10px;
}

<div class="flex-container">
  <form class="flex">
    <input class="flex-item" type="date" name="" id="">
    <input class="flex-item" type="text" placeholder="1 NIGHT">
    <input class="flex-item" type="date" name="" id="">
    <input class="flex-item" type="text" placeholder="ALL HOTELS">
    <input class="flex-item" type="text" name="" placeholder="PROMO CODE">
    <input class="flex-item" type="submit" value="CHECK AVAILABILITY">
  </form>
</div>

Answer 1

Chinomso! Ниже приведены ПРОСТО изменения, которые я внес в таблицу стилей, и я закомментировал границу, которую вы использовали для .flex-container ... Я добавил для удобства комментарии рядом с каждой строкой. Посмотрите, работает ли это!

* {
    box-sizing: border-box; /* See the Mozilla Developer Network on the box-sizing CSS property,
                               could help here...styling below for margins/border
                               is dependent on this */
}

.flex-container {
    /* border: 5px solid white; */
    padding: 1.5em; /* OPTIONAL - gives the whole container spacing for visual appeal */
  }

  .flex-item {
    border: none; /* Removes the default CSS styling for the <input> HTML tag in browsers */
    border-right: 2px solid black; /* Creates border to right of each .flex-item class */
    text-align: center; /* OPTIONAL - styling to center input text */
    margin: 0 5px; /* OPTIONAL - gives you spacing for visual appeal */
  }

  .flex-item:last-child {
      border: none; /* Remove border from the last .flex-item child in the form */
  }

MDN ссылка на статью о свойстве CSS box-sizing, много раз спасла мои плюшки: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

...

... И вот результат, который я получил от добавления вышеуказанных стилей к существующим: