Почему блок переносится на следующую строку?

Question

[4sadly]

.flexblock{
			margin: 10px;
			border: 2px solid black;
			border-radius: 3px;
			position: relative;
			align-items: center;
			display: flex;
			flex-wrap: wrap;
			flex: 0 0 100%;
			width: 100%;
		}
		@media (min-width: 420px){
			.flexblock{
				flex: 0 0 50%;
				max-width: 50%;
			}
		}

Comments

[Alex]

Потому что нужно сделать песочницу с примером вашей проблемы

[WapSter]

потому что у него margin есть, вот его и кидает. Ну а вообще песочницу показал более ясно было бы.

[азаза]

потому что гладиолус
margin
border
width:100%

[4sadly]

Alex,

[4sadly]

natojezlo, поменял на 80 и 40% соответственно, ничего не изменилось

[WapSter]

4sadly, а почему ему собственно не переносится, у тебя там нет никаких стилей и нужной структуры, чтобы блоки вставали рядом. По сути это просто 3 блока и ведут себя как обычные блоки, пытаются занять все свободное пространство по ширине.

[азаза]

4sadly, так вы не туда задаете параметры
нужно контейнеру присваивать дисплей флекс

[азаза]

https://jsfiddle.net/b9gqeucr/

[4sadly]

WapSter, как это нету стилей? все есть

[4sadly]

natojezlo, мне нужно, чтобы на экране размером до 420 был 1 блок в строке, а все, что больше - 2 блока в строке, вы мне показали что-то совершенно другое

[азаза]

4sadly, я вам показал что вы не тем элементам задали display flex
а вы уж теперь регулируйте медиазапросами ширину

[4sadly]

natojezlo, извиняюсь, затупил

Answer 1

[азаза]

https://jsfiddle.net/b9gqeucr/

Answer 2

[Dolosweb]

в следующую строку переноситься по следующим причинам: абзац, clear:both, ширина элемента не позволяет уместиться. float

Answer 3

[Арсений Матыцин]

В CSS существует только 3 типа элементов: таблицы, инлайновые и блочные. display: flex это расширенный display: block. А блоки даже занимая места меньше, чем 100% не переносятся.

Для того, чтобы он переносился, его нужно обернуть в flex, например, или задать inline-flex в display. Последнее стоит делать, если понимаешь, что делаешь, правда.