Вопрос:
Я пытаюсь использовать flexbox для достижения следующего:
- нижний колонтитул и заголовок с фиксированной высотой.
- редактор получить все космические ведьмы не получают вложения
- высота вложений от 0 до 148 пикселей в зависимости от содержимого (количество вложений)
Это реально? Я только добился пропорционального изменения размеров блоков.attachments/.editor с гибким сжатием/гибким ростом без зависимости контента.
HTML
<section class=»page»> <header></header> <section class=»editor»></section> <section class=»attachments»> <article></article> <article></article> <article></article> </section> <footer></footer> </section>
CSS
.page{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: #f00; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; } .page header{ flex-grow: 0; flex-shrink: 0; background-color: #0f0; margin: 0 0 10px 20px; font-size: 0; line-height: 24px; height: 24px; padding: 15px 20px 15px 0; border-bottom:1px solid #ebeced; } .page footer{ flex-grow: 0; flex-shrink: 0; background-color: #00f; height: 60px; line-height: 60px; text-align: right; font-size: 0; padding-right: 20px; border-top:1px solid #ebeced; } .attachments{ flex-grow: 1; flex-shrink: 1; background-color: #0ff; max-height: 148px; margin: 0 20px; outline: none; color:#3c434a; font-size: 17px; line-height: 25px; overflow: auto; } .attachments article{ float: left; border: 1px solid #e3e4e6; background-color: #fff; height: 57px; width: 303px; margin: 10px 10px 0 0; position: relative; line-height: 57px; } .editor{ flex-grow: 1; flex-shrink: 1; background-color: #ff0; margin: 0 20px; position: relative; outline: none; color:#3c434a; font-size: 17px; line-height: 25px; }
Господа, я хочу что бы у меня с помощью флекбоксов блок с редакторов заполнял все место, которое не заполняло блок с аттачментами, и что бы блок с аттачментами был высотой от 0 до 148px в зависимости от наличия в нем аттачментов. Подскажите, это вообще реально? Если я пробую применить flex-shrink/flex-grow оно просто пропорционально заполнено пространство блоками, без учета контента внутри.
Лучший ответ:
Вы не должны flex-grow и flex-shrink ни на чем, кроме flex-grow на .editor.
Таким образом, фиксированные высоты .attachments колонтитула и заголовка не будут меняться, высота. .attachments будет равна его содержимому, но не больше его max-height, а .editor заполнит все другое пространство.
- Вот пример без содержания в прикрепленных файлах – http://jsfiddle.net/kizu/r9b8E/ – он имеет желаемую высоту 0.
- Вот он с одной строкой текста: http://jsfiddle.net/kizu/z2Fj6/
- Вот он с 10 строками – http://jsfiddle.net/kizu/McZTV/
Обновлено: и если вам нужно иметь некоторую минимальную высоту в .editor, вы можете просто установить ее, но если вы хотите, чтобы другие блоки не уменьшались, когда тело уменьшалось, вы должны дать каждому flex-shrink: 0 – http://jsfiddle.net/kizu/X7L8S/ (изменить размер панели результатов, чтобы увидеть, как она себя ведет)