2014 dxdy logo

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

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




Начать новую тему Ответить на тему На страницу Пред.  1, 2, 3
 
 Re: "Выскакивание" в CSS
Сообщение06.11.2020, 10:20 


29/12/13
304
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 


29/12/13
304
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 


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

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

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

 Профиль  
                  
Показать сообщения за:  Поле сортировки  
Начать новую тему Ответить на тему  [ Сообщений: 33 ]  На страницу Пред.  1, 2, 3

Модераторы: Karan, maxal, Toucan, PAV, Супермодераторы



Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей


Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Найти:
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group