Почему не заводится Flexbox?

Question

[Александр Вертело]

Цель: блок из 5 карточек (div.block), 2 из которых сверху (по 50% ширины контейнера div.two) и 3 снизу (по 33% ширины контейнера div.three). С gap в 12 пикселей.
Что не получается: карточки ведут себя как column, т. е. становятся не в один ряд, а друг под другом. Не могу найти причину. В другом аналогичном случае (все блоки равной ширины) всё как надо. Заранее спасибо)).

HTML:

<div class="wrap">
			<div class="two">
				<a class="block">
					<div class="case1">
						
					</div>
					<div class="case2">
						
					</div>
				</a>
				<a class="block">
					<div class="case1">
						
					</div>
					<div class="case2">
						
					</div>
				</a>
			</div>
			<div class="three">
				<a class="block">
					<div class="case1">
						
					</div>
				</a>
				<a class="block">
					<div class="case1">
						
					</div>
				</a>
				<a class="block">
					<div class="case1">
						
					</div>
				</a>
			</div>
		</div>

CSS:

.two, .three {
			display: flex; width: 100%;
			flex-flow: row wrap; justify-content: space-between;
		}
		.two .block, .three .block {
			display: block;
		}
		.two { margin: 0 0 12px 0;  }
		.three { margin: 12px 0 0 0; }
		.two .block { width: calc(50% - 6px); height: 256px; }
		.three .block { width: calc((100% / 3) - 8px); height: 172px; }

Comments

[Ankhena]

Вот ваш код в песочнице: https://jsfiddle.net/vkpdq3z4/
Чем отличается от описанного?

[Александр Вертело]

Ankhena, я ж и смотрю, что всё как надо написано. Почему не заводится на странице — ума не приложу. Перепроверял раз 20.

[Ankhena]

Александр Вертело, остается показать страницу
Или самостоятельно искать проблему, скорее всего с неправильно стоящими скобками, точками с запятыми, названиями классов и т.д.
Либо с кешем :)

[Александр Вертело]

Ankhena, внезапно осознал проблему: пустил по циклу не содержимое контейнера, а сам контейнер)). Аж смешно теперь. Спасибо за наводку ещё раз прошерстить код.

Answer 1

[Максим Морозов]

А почему у тебя в css стоит display: block для элементов .two .block, .three .block? Поставь display: flex и все будет работать.

Comments

[Александр Вертело]

Допустим, 100% = 900px.
(900px - 24px) / 3 = блок в 292px.
(900px / 3) - 8px = блок в 292px.
В любом случае, Flex не работает и в первом примере (div.two) с простым применением calc, не работал даже при жёстком указании ширины в пикселях.

[Александр Вертело]

Это же содержимое контейнера. Свойство display: flex должно быть у самого контейнера (div.two или div.three).

[Максим Морозов]

https://jsfiddle.net/morozov23/f1oL57bx/#&together...

Так у тебя .block тоже своего рода контейнер, в котором и находятся объекты.