Соображения в основе макета Flexbox

Соображения в основе макета Flexbox Сайтостроение

Соображения в основе макета Flexbox

От создателя: мне просто необходимо расположить два блока рядом, и я слышу, что flexbox неплох в таковых вещах.

 

Соображения в основе макета Flexbox

Просто добавление display: flex; к родительскому элементу укладывает его потомком в ряд

Ну, это круто. Полагаю, я мог применять float, но это проще. Они, возможно, должны занять все доступное место. Могу ли я просто растянуть родителя на 100% ширины? Ну, я могу, но это, разумеется, не воздействует на дочерние элементы.

Соображения в основе макета Flexbox

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

Быть может, я могу применять для потомков width: 50%;? Это работает, но я задумывался, что сущность flexbox в том, что для вас не надо непосредственно указывать ширину. Ах, да, во flexbox все есть эти методы выражения исходного и растягивающегося поведения потомков. Похоже, с flex: 1; это просто:

Соображения в основе макета Flexbox

Указание flex: 1; для дочерних частей дозволяет им растягиваться и заполнять все место

Мне нравится, что мне до сего времени не приходилось созодать математические вычисления либо задавать твердые значения. Могу ли я создать шаблон из 3-х частей, не касаясь CSS?

Соображения в основе макета Flexbox

Непревзойденно

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

Соображения в основе макета Flexbox

Похоже flex-basis: 33%, не исправит это. flex: 0 0 33%; также не помогает. Похоже, что подступает width: 33%; flex-shrink: 0;.

Соображения в основе макета Flexbox

Время от времени дизайн просит, чтоб блоки имели однообразный размер. Это быть может земля CSS Grid, либо чего-то еще

Длинноватые слова при узенькой ширине, может быть, является необыкновенным сценарием. Мы могли бы также решить это при помощи word-break: break-word; hyphens: auto; для потомка.

READ
Джон Мюллер об обработке копий URL в файлах Sitemap.xml

Соображения в основе макета Flexbox

Еще одна вещь, которую мы могли бы создать, это просто обернуть элементы, а не быть так серьезными. Flexbox может это, правильно?

Соображения в основе макета Flexbox

О, это припоминает мне, как здорово, что эти 1-ые два элемента имеют схожую высоту. Это поведение stretch по дефлоту, но его также можно надзирать. И это применяется к ряду, потому 2-ой ряд имеет свою свою высоту.

Что если я желаю, чтоб блок «Love» был первым? Похоже, я могу создать это, а? Порядок по дефлоту — это 0, потому, давайте зададим order: -1;.

Соображения в основе макета Flexbox

Ха! Это сработало. Но я имел в виду, что я желаю, чтоб он занимал всю ширину в верхнем ряду. Я думаю, я могу просто задать для него flex-basis: 100%;, а другие обернутся соответственно.

Соображения в основе макета Flexbox

Достаточно удивительно иметь различные начальный порядок и зрительный порядок. Быть может, это обязано войти в категорию «никогда не делай этого».

Что, если я захочу поменять все в определенный момент? Часть меня желает поменять направление, чтоб задать flex-direction: column; и вынудить потомков растягиваться во всю ширину. А, обычный display: block; для родителя сделает это одним ударом.

Соображения в основе макета Flexbox

Заместо того, чтоб изменять все составляющие flexbox для обработки расположения столбцов, мы просто отключаем flexbox.

Flexbox в состоянии сделать намного больше вещей! Один из моих возлюбленных вариантов — это то, как авто поля работают, чтоб «оттолкнуть» остальные элементы, когда есть пространство. Это всего только несколько тестов с пользовательским интерфейсом для исследования Flexbox.

Создатель: Chris Coyier

Редакция: Команда webformyself.

Источник

Комментарии

comments

Оценить статью
Блог о самом интересном.
Добавить комментарий