"Выскакивание" в CSS

[Seman]

ipgmvq в сообщении #1483676 писал(а):

float: left;
оставив дефолтный
display: block;

аналогично, первое, что приходит в голову, чем это kotenok gav не устраивает?
https://jsfiddle.net/uxzpa084/ -- как-то, так например?

kotenok gav в сообщении #1485687 писал(а):

Хм, возникла
еще одна проблема:

Из MDN :

Цитата:

When we describe flexbox as being one dimensional we are describing the fact that flexbox deals with layout in one dimension at a time — either as a row or as a column. This can be contrasted with the two-dimensional model of CSS Grid Layout, which controls columns and rows together.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

Из спецификации:

Цитата:

Unlike block and inline layout, whose layout calculations are biased to the block and inline flow directions, flex layout is biased to the flex directions

https://www.w3.org/TR/css-flexbox-1/

flex-directions, обычно она "row" по умолчанию.

Цитата:

Initial: row

https://www.w3.org/TR/css-flexbox-1/#flex-direction-property

flex-wrap, обычно "nowrap" по умолчанию

Цитата:

Initial: nowrap

https://www.w3.org/TR/css-flexbox-1/#flex-wrap-property

Чтобы было многострочным, нужно flex-wrap установить во "wrap".
Удобней, наверное, использовать для этого "flex-flow".

Цитата:

flex-flow: row wrap;

https://www.w3.org/TR/css-flexbox-1/#flex-flow-property

Как-то так, например: https://jsfiddle.net/0ojz2etL/

Про shrink сказано следующее:

Цитата:

Authors are encouraged to control flexibility using the flex shorthand rather than with flex-shrink directly, as the shorthand correctly resets any unspecified components to accommodate common uses

https://www.w3.org/TR/css-flexbox-1/#fl ... k-property

Есть ещё CSS Grid Layout "display: grid;", как показано в MDN, так можно задать колонки строки и положения элементов.
(cм. https://developer.mozilla.org/en-US/doc ... rid_Layout)

https://jsfiddle.net/g0o6fe85/ -- например

[Seman]

kotenok gav в сообщении #1485797 писал(а):

Помогло flex-shrink: 0;, спасибо!

upd.
Я может, не понял, сначала правильно.
Вам, их наоборот, в одну линию надо с прокруткой? flex-shrink это как элемент урезается относительно других при переполнении контейнера. 0 - да, не урезается.

Можно это ещё сделать с "display: table;"

https://jsfiddle.net/f28hrwmj/1/

Можно ещё с "display: grid;"

https://jsfiddle.net/05tq3au7/

-- 06.11.2020, 13:27 --

Seman в сообщении #1490888 писал(а):

https://jsfiddle.net/f28hrwmj/1/

А , ещё тут зафиксировать можно ширину с помощью "table-layout: fixed;"
https://jsfiddle.net/0n7qhm6p/

[Seman]

И если в строчку надо было, то inline-block работает в строчку. например, если добавить "white-space: nowrap;", тогда
div будут в строчку.

https://jsfiddle.net/jw1hmz6a/1/

тут с примером как white-space работает.