Почему не работает «justify-content: center»?

Question

[leviathan]

Всем привет! Практикуюсь в разработке темы для Wordpress, цель сделать вывод контента колонками через flex. Получилось сделать колоночный вид но не получается центрировать через "justify-content: center"

Контент выводится так

<div class="content">
			<article class="box" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
				<div class="thumbnail">
					<?php if ( has_post_thumbnail()) { ?>
						<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
							<?php the_post_thumbnail('thumbnail'); ?>
						</a>
						<?php } ?>
					</div>
					<header class="post_header">
						<?php get_categories( $id ) ?>
						<?php
						if ( is_single() ) {
							the_title( '<h1 class="title_posts">', '</h1>' );
						} else {
							the_title( '<h2 class="title_posts"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
						}

						if ( 'post' === get_post_type() ) : ?>
						<?php if ( has_post_thumbnail()) { ?>
							<?php } ?>
							<?php
							endif; ?>
							<p>Категории: <?php the_category(', '); ?></p>
						</header><!-- .entry-header -->
						<footer class="entry-footer">
							<?php avey_design_entry_footer(); ?>
							<div class="entry-meta">
								<?php the_time('F, d, y') ?>
							</div><!-- .entry-meta -->
						</footer><!-- .entry-footer -->
					</article><!-- #post-## -->
				</div>

И css

.content{
  margin: 0 auto;
  align-content: flex-start;
  justify-content: center;
  display: inline-flex;
  flex-wrap: wrap;
}
.box{
  width: 200px;
  height: 200px;
  background: tomato;
  margin: 5px;
}

Но контент всё равно прижат к левому краю... Вообще не понимаю, т.к на html всё работает =(
Я даже попробовал удалить весь css оставив только flex, но всё равно контент прижат...

Тему начинал делать с заготовки "underscores", сейчас попробовал скачать чистую "underscores" и опять тоже самое! ( ппц, я уже вскипаю...

Comments

[Danila]

в чем лежит .content и какая ширина у его контейнера?

[Danila]

возможно из-за display: inline-flex контент не центрируется, пробуйте изменить на display: flex;

[leviathan]

Данила: Сдвигаются в центр, но превращаются в одну колонку...

[Danila]

The_Lars: ну так пропишите марджины боксам, или justfiy-content измените на space-around/space-between как вам нужно

[leviathan]

Данила: Увы, вообще 0 реакции

[Danila]

The_Lars: значит что-то неправильно делаете
вот рабочий пример с вашим кодом, что там может не работать - не ясно
codepen.io/DNLHC/pen/ZOWpjw

[leviathan]

Данила: Угу, всё отлично работает в html, но стоит только перейти в php и всё рушится... Ладно, буду как-то разбираться. Спасибо за подсказки.

Answer 1

[Михаил Золотарёв]

Попробуй:

.parent {
  display: flex;
}

.child {
  margin: auto;
]