Можно ли сделать так без использования flexbox (спортивный интерес)?

Question

[ZaxapKramer]

Здравствуйте. Возможна ли подобная плавная деградация по мере невмещаемости текста (содержимого) без Flexbox?
Понятно, что inline-block не обеспечивает "растягивания" не вмещающихся целиком кнопок... есть ли какие-нибудь решения (хаки, возможно) у данной "задачи"?



Грубо говоря, когда контент не вмещается при изменении ширины окна, последний "блок" переходит на новую строку.
И так до тех пор, пока несколько колонок не превратятся в одну.

Answer 1

[iBird Rose]

display: table;

Comments

[ZaxapKramer]

Думал об этом... но разве оно работает подобным образом? По-моему, колонки просто "сплющиваются". Или я чего-то не знаю (очень вероятно)?

[iBird Rose]

ZaxapKramer: что именно тебе надо? без задавания width чтобы колонки подстравивались по ширине контента? тогда display: table; это и делает

[ZaxapKramer]

iBird Rose, чтобы, когда контент не вмещается при изменении ширины окна, последний "блок" переходил на новую строку.
И так до тех пор, пока несколько колонок не превратятся в одну.

[iBird Rose]

ZaxapKramer: нет. тогда только флекс. он для этого и создавался. ну конечно это можно самому сделать через тот же float:left; или inline block. но придется писать больше медиа запросов. нежели чем у flex.

[ZaxapKramer]

iBird Rose, спасибо, это и хотел узнать. Здесь "спортивный интерес" больше, но на эту "задачу" ответа найти не смог - подумал, вдруг кто-нибудь другой знает решение.

[Евгений Карпов]

ZaxapKramer: нет, плавности стандартными сss без flex-ов или js, думаю не получится)

[ZaxapKramer]

Евгений Карпов, я очень много чего нашел (и придумал) по части flexbox-like сетки (grid) без flexbox.
Многое из того, что находил, было "кривым", но в итоге получилось реализовать почти весь функционал Grid из Bootstrap4 (не сделать адекватный "space-around").
Ну и дальше встала проблема с Responsive-Buttons без flex-ов, у которой, на первый взгляд, не было решения.

[Евгений Карпов]

ZaxapKramer: верстка тем и интересна, что интересно решать задачи)

[ZaxapKramer]

Евгений Карпов, полностью согласен. По-моему, каждый верстальщик должен написать "свой bootstrap", решающий его задачи - правдивая шутка))
Кому-то все еще нужен IE8, а кому-то просто не нравится суета вокруг Flexbox, которые не были созданы для сетки.
Одно дело - верстать быстро, другое дело - сделать сугубо для себя то, что позволит именно тебе верстать быстро и легко, не убиваясь багами.
Каждый фреймворк решает задачи верстальщиков, но ни один фрейворк не решает полностью твои задачи... ИМХО:)

Answer 2

[Евгений Карпов]

Конечно, float-ами и media

Comments

[ZaxapKramer]

@media - это не "плавно". "Контента" (в данном случае, это "тупо кнопки", контент - текст) может быть больше или меньше.
Здесь @media, на первый взгляд мой, не подходит... или я, опять же, чего-то не знаю:)

Answer 3

[Zamir Yusupov]

да, можно.
вот сделал, посмотри
https://jsfiddle.net/pg2fa1mo/2/

Comments

[ZaxapKramer]

Но, увы, они не "растягиваются") В этом главное (единственное, на самом деле) отличие решения на flexbox и без него (inline-block).
Периодически пытаюсь сделать что-то в помощью ::before и ::after, но даже понимания не имею, как "заставить их" растягивать элементы..:)