2014 dxdy logo

Научный форум dxdy

Математика, Физика, Computer Science, Machine Learning, LaTeX, Механика и Техника, Химия,
Биология и Медицина, Экономика и Финансовая Математика, Гуманитарные науки




На страницу Пред.  1, 2, 3
 
 Re: "Выскакивание" в CSS
Сообщение06.11.2020, 10:20 
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/ -- например

 
 
 
 Re: "Выскакивание" в CSS
Сообщение06.11.2020, 12:33 
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 писал(а):

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

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

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

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

 
 
 [ Сообщений: 33 ]  На страницу Пред.  1, 2, 3


Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group