Хотите узнать больше о Flexbox? Ознакомьтесь с нашим курсом «Мастер макетов CSS с Flexbox», подготовленным разработчиком и лондонским преподавателем Генеральной Ассамблеи Гаем Рутледжем. Это доступно для всех участников SitePoint. Посмотрите наш образец видео из курса ниже.
Press shift question mark to access a list of keyboard shortcuts
Я пойду чисто: HTML-формы редко бывают забавными, но они являются необходимой частью веб-разработки. К счастью, некоторые исторические трудности можно решить с помощью CSS flexbox.
Рассмотрим, как формы обычно кодируются без flexbox. Какую разметку HTML вы бы использовали для следующих полей?
Мы обычно используем разметку как таковую:
<div>
<label for="name">name</label>
<input id="name" name="name" type="text" />
</div>
<div>
<label for="experience">experience</label>
<select id="experience" name="experience"><!-- options --></select>
</div>
<div>
<input id="html" name="html" type="checkbox" />
<label for="html">HTML</label>
</div>
<div>
<input id="css" name="css" type="checkbox" />
<label for="css">CSS</label>
</div>
<div>
<input id="javascript" name="javascript" type="checkbox" />
<label for="javascript">JavaScript</label>
</div>Когда вы начинаете применять стили CSS, возникает ряд проблем:
- Исходный HTML-порядок метки и поля не согласован и зависит от типа. Метка обычно стоит перед полем, но лучше после флажков и переключателей. Вы должны изменить порядок наценки, если вы измените тип.
- Последовательное выравнивание и определение размера входных данных, текстовых полей и полей выбора может быть затруднено. Большинство из них имеют стили по умолчанию, которые могут быть неудобны для изменения в некоторых браузерах.
- Выравнивание метки рядом с ее полем требует проб и ошибок для правильного позиционирования.
- (В настоящее время) невозможно стилизовать метку в соответствии с активацией поля или состоянием содержимого, когда оно появляется первым.
Flexbox может решить эти проблемы. Мы можем использовать чистый и непротиворечивый HTML, где метка размещается после каждого поля, и нет необходимости добавлять вспомогательные классы CSS.
Что такое Flexbox?
Flexbox — это волшебный способ размещения нескольких элементов на странице. Они могут быть выровнены по горизонтали, вертикали, по порядку, перевернуты и измерены относительно других элементов. Flexbox может сбивать с толку, и даже после нескольких месяцев использования вам придется время от времени обращаться к документации. Тем не менее, самый простой CSS для включения flexbox:
.container {
display: flex;
}
Вот и все. Все дочерние элементы .container теперь являются элементами flexbox, которые по умолчанию объединяются в одну строку.
Основное различие между flexbox и сеточными системами (такими как новый CSS Grid Module ) заключается в том, что flexbox является одномерным. Элементы Flexbox укладываются в линию и при необходимости оборачиваются. Сетки двумерные с определенными столбцами и необорачивающимися строками.
Flexbox менее мощный, чем сетка, но он идеально подходит для размещения небольших компонентов, таких как навигационные меню, списки и поля формы.
Инструменты и ресурсы Flexbox:
- flexbox за 5 минут
- Flexbox Froggy
- Решено Flexbox
- Flexbox Playground
- flexplorer
- MDN Использование CSS гибких коробок
- Как z-index и Auto Margins работают во Flexbox
- CSS Layout Layout Модуль Уровень 1 спецификация
Почему нет классов?
Те, кто принял философии CSS, такие как SMACSS или BEM, будут в ужасе от недостатка определений классов в этой статье. HTML и CSS для таргетинга тегов предназначены для поддержания чистоты кода и его понимания без отвлекающих факторов.
Вы могли бы рассмотреть код как базовый стиль для всех форм на вашем сайте — при условии, что у вас есть согласованный макет . Вы можете добавить классы, если хотите использовать, но они могут не понадобиться для небольших сайтов или демонстраций.
Flexboxing Форма
Код для изображения выше можно увидеть в действии здесь:
Изучите HTML, и вы заметите, что элементы .container
label
Каждый <div>
<input id="name" name="name" type="text" />
<label for="name">name</label>
</div>
<div>
<select id=«experience« name=«experience«><!— options —></select>
<label for=«experience«>experience</label>
</div>
<div>
<input id=«html« name=«html« type=«checkbox« />
<label for=«html«>HTML</label>
</div>align-items: center обеспечивает выравнивание меток и полей по вертикали:
<div>
Поле и метка теперь являются элементами flexbox, но в большинстве случаев они расположены в неправильном порядке, потому что сначала мы хотим метку:
(Так выглядит форма в старых браузерах, таких как IE9 и ниже)
Мы можем исправить порядок, используя свойство порядка с соответствующим именем fieldset div { которое имеет положительное или отрицательное целое число. Чем ниже число, тем «раньше» оно отображается на странице:
display: flex;
align-items: center;
}
order
Мы применяем label {
order: 1;
width: 10em;
padding-right: 0.5em;
}
input, textarea, select {
order: 2;
flex: 1 1 auto;
}width Одним из недостатков flexbox является то, что вам может потребоваться отрегулировать эту ширину, если вы вводите более длинные текстовые метки.
Обратите внимание на paddingflex: 1 1 autoinputtextarea select которое указывает, как элемент может изменять свои размеры, чтобы заполнить доступное пространство. Три значения:
-
flex— количество пространства, на которое может сгибаться элемент flex по отношению к другим, например, значение 2 позволит элементу быть в два раза больше ширины любого элемента со значением 1. -
flex-grow— аналогично, количество места, в котором гибкий элемент может уменьшиться по сравнению с другими. -
flex-shrink— начальная ширина элемента flex.
flex-basisиспользуйте оставшееся место . Наши элементы поля имеют одинаковый размер, и нет необходимости возиться с отступами и границами!
К сожалению, наши поля-флажки теперь имеют неправильный стиль (да, этого бы не случилось, если бы мы использовали имена классов!), Но мы можем целенаправленно устанавливать флажки и радиополя, чтобы это исправить. Следующий код снова размещает поле первым, останавливает его, используя все пространство, и применяет поле, соответствующее ширине метки, указанной выше:
flex: 1 1 auto
Мы также можем настроить таргетинг на ассоциированные метки, используя селектор брата ( input[type="checkbox"], input[type="radio"] {
order: 1;
flex: none;
width: auto;
margin-left: 10em;
}~ Мы можем отключить ширину по умолчанию и применить небольшой отступ:
+
Посыпьте несколько цветов и стилей, и у нас получится великолепная форма, которая будет отлично смотреться независимо от того, какие поля мы добавляем в нее.
Стиль метки
Другое преимущество лейбла, который последним — это то, что мы можем стилизовать его в соответствии с состоянием его поля. Например, установите метку на красный, когда поле имеет фокус:
input[type="checkbox"] ~ label, input[type="radio"] ~ label {
width: auto;
padding-left: 0.4em;
}
или сделайте метку жирным, когда установлен флажок или переключатель:
input:focus ~ label, textarea:focus ~ label, select:focus ~ label {
color: #933;
}
Добавьте несколько CSS-переходов, и вы сможете создавать метки для изменения размера, перемещения, исчезновения или любого другого анимированного эффекта.
Поддержка браузера Flexbox
Flexbox поддерживается во всех современных основных браузерах . В IE11 есть несколько проблем с flexbox, но они не возникают в простых свойствах, которые мы используем для этого примера. input:checked ~ label {
font-weight: bold;
}-ms-
Старые браузеры отображают все поля перед меткой, но порядок вкладок остается правильным, и очевидно, какое поле вы используете.
Мое единственное колебание — программы чтения с экрана. Путаница может возникнуть, если читатель полагается на исходный порядок HTML, а не на связанный текст метки. Я не знаю каких-либо конкретных проблем, но, пожалуйста, дайте мне знать, если вы столкнетесь с такой проблемой!
Наконец, если это побуждает вас свободно применять flexbox к формам, помните, что display: flex<fieldset>ошибок в Chrome и Firefox . Надеюсь, что этот совет сэкономит вам несколько часов, которые я потратил впустую!