http://tonatasha.com

парни, я правильно понимаю, что justify-self: flex-end

должен его сдвинуть в конец?

не хочу добавлять пустой элемент с grow: 1

у флексов нет свойства justify-self

я сделал "хаком"

у меню добавил grow: 1

ну это не костыль, но не логично

ну это не костыль, но не логично

не логично = костыль

не логично = костыль

у всех своя правда

внутри левой колонки может быть не два блока, а больше

внутри левой колонки может быть не два блока, а больше

обворачиваешь их вдумя и все тут

лишняя обертка не костыль? и чем свойство flex-grow не логично?

лишняя обертка не костыль? и чем свойство flex-grow не логично?

чем же это костыль? надо смотреть на макет ты же задал условие о том, что там может быть больше, чем 2 блока

лишняя обертка не костыль? и чем свойство flex-grow не логично?

согласен на 100%

я плодить дерево не хочу

чем же это костыль? надо смотреть на макет ты же задал условие о том, что там может быть больше, чем 2 блока

а логотип и меню ничего не говорит?

там еще и под контактами лого студии

но его не было на момент вопроса

а логотип и меню ничего не говорит?

пфф я чо ванга и мне делать нехер структуру гадать?)))000

пфф я чо ванга и мне делать нехер структуру гадать?)))000

ну гадать на костыли-то - ванга

ну гадать на костыли-то - ванга

ты видимо перепутал что-то

чем же это костыль? надо смотреть на макет ты же задал условие о том, что там может быть больше, чем 2 блока

хотя, наверное твой вариант более универсальный. при добавлении нового блока в меню, в случае с flex-grow придется добавлять свойство к элементу после меню, а у меню соответсвенно убирать, в твоем же случае, придется просто положить его в обертку. а насчет обертки, то ее можно сделать элементом header, так вообще будет хорошо, правильно, семантично.

пфф я чо ванга и мне делать нехер структуру гадать?)))000

В этом чате я за сегодня 7 раз слушаю слово ванга

хотя, наверное твой вариант более универсальный. при добавлении нового блока в меню, в случае с flex-grow придется добавлять свойство к элементу после меню, а у меню соответсвенно убирать, в твоем же случае, придется просто положить его в обертку. а насчет обертки, то ее можно сделать элементом header, так вообще будет хорошо, правильно, семантично.

ну макет надо смотреть или gist ибо сложна в абстракции

ну раз 7 тел тебе говорят одноитоже значит вывод сам напрашивается )

ну раз 7 тел тебе говорят одноитоже значит вывод сам напрашивается )

Это сейчас кому было написанно?

ты видимо перепутал что-то

я уже остыл и нагреваться не хочу. Но на будущее когда пишешь кому-то (разработчику), что он делает костыль, стоит ожидать негатива в свой адрес

хотя, наверное твой вариант более универсальный. при добавлении нового блока в меню, в случае с flex-grow придется добавлять свойство к элементу после меню, а у меню соответсвенно убирать, в твоем же случае, придется просто положить его в обертку. а насчет обертки, то ее можно сделать элементом header, так вообще будет хорошо, правильно, семантично.

я остыл, подумал и теперь не знаю даже как правильнее

Можно вообще вынести это в отдельный вспомогательный паттерн. Типа start и end контент блока

и использовать везде где потребуется

потому, что у меня еще пару мест аналогичных точно будет

я уже остыл и нагреваться не хочу. Но на будущее когда пишешь кому-то (разработчику), что он делает костыль, стоит ожидать негатива в свой адрес

но в твоем случае это и правда костыль, при добавлении нового блока после меню, тебе придется переопределять свойство flex-grow, то есть убрать у блока с меню и добавить новому блоку, в случае же с оберткой header, ты просто добавляешь любой блок в нужное место

но в твоем случае это и правда костыль, при добавлении нового блока после меню, тебе придется переопределять свойство flex-grow, то есть убрать у блока с меню и добавить новому блоку, в случае же с оберткой header, ты просто добавляешь любой блок в нужное место

так у меня сайдбар говорит где гроу, а кто нет

сами элементы не знаю ничего об этом

так что такого рода костыльности нету

не нужны марджины в бутстрапе:)

паддингов сделай блокам :)

*картинкам

ну ты понел

так у меня сайдбар говорит где гроу, а кто нет

у флексов свойство flex-grow применяется к элементам флекс-контейнера, а не к родителю, или ты про какой-то другой grow?

так выходит что ты ширины добавил же и оно не влезло

у флексов свойство flex-grow применяется к элементам флекс-контейнера, а не к родителю, или ты про какой-то другой grow?

.sidebar > .menu { flex-grow: 1 }

я это имел ввиду

а, ну подумай, что будет если после .menu надо будет добавить какой-нибудь блок

да, я понял тебя. Нужно будет изменить свойство flex-grow

я понимаю, да

в твоем случае идеальный выход такой, делаешь сайдбар тегом section, внутри него два тега header и footer, у хедера, соотвественно, flex-grow: 1;

но теперь у меня получается, что внутри сайдбара два тега отвечающие за отображение

а для битриксолюбителей есть отдельная конфа, или можно сюда?

@matero спасибо, но я на словах идею понял

но теперь у меня получается, что внутри сайдбара два тега отвечающие за отображение

это вполне нормально, если они там не просто так, плюсом будет семантичная разметка, и вдобавок разделение стилей для разметки и стилей для оформления, что тоже правильно.

я обсуждаю как правильно, а не как сделать

это вполне нормально, если они там не просто так, плюсом будет семантичная разметка, и вдобавок разделение стилей для разметки и стилей для оформления, что тоже правильно.

ну как.. до этого у меня было: .Sidebar > .Logotype (и их два с разными модификаторами)

а теперь или надо убрать >

или добавить еще .top, .bottom

я уже начинаю думать, что вариант с пустым элементом был бы правильнее))

потому, что это же пространство и его надо добавить

ERROR: S client not available

в твоем случае идеальный выход такой, делаешь сайдбар тегом section, внутри него два тега header и footer, у хедера, соотвественно, flex-grow: 1;

Помоему для сайдбаров есть тег aside?

благодарю

Помоему для сайдбаров есть тег aside?

aside не для сайдбаров, а для содержимого, никак не связанного с основным содержимым сайта.

я уже остыл и нагреваться не хочу. Но на будущее когда пишешь кому-то (разработчику), что он делает костыль, стоит ожидать негатива в свой адрес

на будущее, надо учиться реагировать на критику

на будущее, надо учиться реагировать на критику

Зачем?

Это полезный навык какой-то? Он мне поможет в жизни?

я уже начинаю думать, что вариант с пустым элементом был бы правильнее))

не был. http://codepen.io/anon/pen/mWYXap

Вот ты это сказал, а чем руководствуешься?

Вот ты это сказал, а чем руководствуешься?

опытом естественно

опытом естественно

окей, допустим у нас разный опыт. Расскажи как тебе толерантность к критике помогла?

Я же слышу просто заученную фразу без капли анализа

Никакой пользы от твоего замечания: "не логично = костыль" я получить не мог. А вот от советов и предложений последующих после, да. Но это и не критика

посмотрел как правильно будет это сделать?

посмотрел как правильно будет это сделать?

я сразу понял, спасибо. Я даже начал так делать (только top и bottom)

но передумал в сторону space элемента

окей, допустим у нас разный опыт. Расскажи как тебе толерантность к критике помогла?

не путай толерантность и адекватное восприятие критики адеватное восприятие зависит от уровня критики адекватная критика или нет

я не могу сказать, что элемент space - лучше или хуже. Просто под мой стиль верстки подходит лучше. Я очень люблю связывать стили через >

я не могу сказать, что элемент space - лучше или хуже. Просто под мой стиль верстки подходит лучше. Я очень люблю связывать стили через >

а какой у тебя стиль верстки?

лишний элемент в разметке - плохо. связывать стили через дочерний селектор - плохо.

лишние зависимости в итоге

лучше по 10-20 лишних классов?)

лучше по 10-20 лишних классов?)

да

лишний элемент в разметке - плохо. связывать стили через дочерний селектор - плохо.

Можно подробнее? Про первый пункт согласен, но без изменения html (два враппера тоже элементы в разметке) можно только через flex-grow

лучше по 10-20 лишних классов?)

если у тебя у элемента 10-20 классов, то тебе надо пересмотреть структуру тегов

можно делать .feed-filter__filter-item__link, но я предпочитаю через связывание. Оно выглядит проще и разметка понятнее

у меня даже был плагин к gulp который потом это разворачивал в такую штуку на этапе компиляции

Можно подробнее? Про первый пункт согласен, но без изменения html (два враппера тоже элементы в разметке) можно только через flex-grow

header и footer это не врапперы, да, они иногда выполняют функцию враппера, но это скорее полезный плюс, чем основная функция, куда важнее то, что они придают секции семантическую структуру. если бы ты использовал div.wrapper-top, то это бы уже были врапперы.

https://jsfiddle.net/euoanwzn/