Как выровнять flex-элементы тремя разными способами?

Итак, я хочу выровнять элементы внутри flex-box, как на картинке выше.

У меня есть html следующим образом:

<div class = "flex-row">
  <div class = "flex-item">
    <img src = "/default.png">
  </div>
  <div class = "flex-item">
    <img src = "/default.png">
  </div>
  <div class = "flex-item">
    <img src = "/default.png">
  </div>
</div>

css как

   .flex-row {
      min-height: 400px;
      display: flex;
      align-items: flex-start;
   }

   .flex-item:nth-child(2) {
     align-items: center;
   }

   .flex-item:last-child {
      align-items: flex-end;
   }

вы можете перейти по этой ссылке: css-tricks.com/snippets/css/a-guide-to-flexbox

— 27.05.2019 10:48

Ваше редактирование с новым изображением теперь показывает, чего вы действительно хотите достичь. У Paulie_D есть правильный ответ на этот вопрос.

— 27.05.2019 10:51

html css flexbox

27.05.2019 10:29

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

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

Ответы 4

ПРИМЕЧАНИЕ!

чтобы установить высоту столбца, измените px здесь: flex: 0 1 50px; или удалите его!

Использование margin-right/left:auto как:

.flex-row {
  min-height: 400px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.flex-item {
  flex: 0 1 50px;

}

.flex-item:nth-child(2) {
  margin-right: auto;
  margin-left: auto;
}
.flex-item:last-child {
  margin-left: auto;
}

<div class = "flex-row">
  <div class = "flex-item">
    <img src = "/default.png">
  </div>
  <div class = "flex-item">
    <img src = "/default.png">
  </div>
  <div class = "flex-item">
    <img src = "/default.png">
  </div>
</div>

2. используя align-self

.flex-row {
  min-height: 400px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.flex-item {
  flex: 0 1 50px;
  align-self: flex-start;
}

.flex-item:nth-child(2) {
  align-self: center;
}

.flex-item:last-child {
  align-self: flex-end;
}

<div class = "flex-row">
  <div class = "flex-item">
    <img src = "/default.png">
  </div>
  <div class = "flex-item">
    <img src = "/default.png">
  </div>
  <div class = "flex-item">
    <img src = "/default.png">
  </div>
</div>

скажите мне для получения дополнительной помощи

— 27.05.2019 10:39

Спасибо за ответ, но произошло недопонимание, я изменил картинку своего вопроса. Пожалуйста, вы можете помочь.

— 27.05.2019 10:48

Все, что вам нужно сделать, это изменить px здесь :flex: 0 1 100px; или удалить его.

— 27.05.2019 10:57

27.05.2019 10:39

Вот так? Вам нужно flex-wrap: wrap; Для того, чтобы обернуть предметы должны быть достаточно широкими (100%). Поскольку элемент 100% flex всегда выравнивается по всей ширине, вам нужно text-align, а не align-items, что в первую очередь является неправильным свойством.

align-items - это выравнивание по поперечной оси, а не по главной оси, которая была бы justify-content

.flex-row {
  min-height: 400px;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

.flex-item {
  flex-basis: 100%;
}
.flex-item:nth-child(2) {
  text-align: center;
}

.flex-item:last-child {
  text-align: right;
}

<div class = "flex-row">
  <div class = "flex-item">
    <img src = "/default.png" width = "100" height = "50">
  </div>
  <div class = "flex-item">
    <img src = "/default.png" width = "100" height = "50">
  </div>
  <div class = "flex-item">
    <img src = "/default.png" width = "100" height = "50">
  </div>
</div>

27.05.2019 10:39

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

Используйте align-self, а не align-items

.flex-row {
  min-height: 300px;
  display: flex;
  width: 90%;
  margin: 1em auto;
  border: 1px solid red;
  justify-content: space-between;
}

.flex-item {
  height: 50px;
  background: lightblue;
  width: 100px;
}

.flex-item:nth-child(2) {
  align-self: center;
}

.flex-item:last-child {
  align-self: flex-end;
}

<div class = "container flex-row">
  <div class = "flex-item"></div>
  <div class = "flex-item"></div>
  <div class = "flex-item"></div>
</div>

Не забыть justify-content: space-between;

— 27.05.2019 10:50

27.05.2019 10:40

Посмотрите на этот код

display:flex;
flex-direction: row;
justify-content: flex-start; 
align-items: centre;

С помощью flex-direction вы указываете основное выравнивание (по горизонтали с помощью row, по вертикали с помощью column). В зависимости от того, что вы выберете здесь, следующие свойства будут иметь различный эффект.

Затем с помощью justify-content вы указываете, как ваши элементы внутри ваших элементов должны выровнять на главной оси, которую вы только что определили (вертикально или горизонтально). В данном случае flex-start означает начало моей оси.

А с align-items вы указываете выравнивание вторичной оси. Вертикальный, потому что мы выбираем flex-direction: row;, а не flex-direction: column;. Таким образом, элементы по вертикальной оси будут выровнены по centre

И не забудьте взглянуть на доступные свойства, такие как space-between или flex-end

27.05.2019 10:51