Justify-content для центрирования с помощью Flex Box

Я пытаюсь выровнять свой div по центру страницы, но не могу понять, как это сделать, используя параметр выравнивания.

вот как это выглядит сейчас: Justify-content для центрирования с помощью Flex Box

html:

<div class = "flex-container">

  <div class = "box" *ngFor='let movie of moviesArray;let i=index'>
    ....
  </div>

</div>

css:

.flex-container{
    display: flex;
    background-color: white;
    flex-flow: column;
    flex-wrap: wrap;
    margin:0 auto;

}

.box{
    width:80%;
    flex: 0 0 100px;
    background-color:#f4f4f4;
    margin:10px 0;
    padding:20px;

}



....

Ценю любую помощь :)

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
0
56
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

Когда вы находитесь в flex-direction: column, основная ось переключается на вертикальное выравнивание, а justify-content работает вверх / вниз, а не влево / вправо.

Используйте align-items для центрирования по горизонтали в flex-direction: column.

Подробнее здесь: Почему в CSS Flexbox нет свойств «justify-items» и «justify-self»?

.flex-container{
    display: flex;
    background-color: white;
    flex-flow: column;
    flex-wrap: wrap;
    margin:0 auto;

}

.box{
    display: flex;
    align-items: center;
    justify-content: center;
    width:80%;
    flex: 0 0 100px;
    background-color:#f4f4f4;
    margin:10px 0;
    padding:20px;

}
<div class = "flex-container">

  <div class = "box" *ngFor='let movie of moviesArray;let i=index'>
    ..................
  </div>

</div>

добавить класс бокса для отображения: flex, justify-content для центрирования по горизонтали и align-items для центрирования по вертикали

Asiya Fatima 07.10.2018 18:21

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