Webstacker

Твой онлайн-журнал с мира Web и Front End: Новости, статьи и гайды на русском

Ад и рай верстальщика: способы позиционирования элементов

  • Вещает
  • Опубликовано:
  • Изменено:
Просто красивые квадратики

В настоящее время у нас есть много вариантов для компоновки и размещения наших элементов. Но иногда довольно сложно ориентироваться и выбирать правильный подход: все зависит от требований и поддержки браузеров. Ведь проект для бабушек из Краснодара не сделаешь на гридах, верно? 🙂

Для позиционирования элементов существуют следующие способы:

  • Inline-block и Text-align
  • Таблицы (css эмуляция с table-row, table-cell)
  • Блоки и флоаты (left, right)
  • Flex (flexbox)
  • Grid

Table

Ужасно старая техника, которая существует уже целую вечность. Кажется, что еще наши прадеды верстали сайты на таблицах.

Зато совместимость с каждым браузером, но не каждый браузер делает пересчет пространства аналогичным образом. Таблицы могут использоваться для быстрого отображения данных в «таблице» без каких-либо элементов блока внутри. Они будут автоматически вычислять необходимое пространство для каждого столбца на основе внутренних текстов.

Но если вы хотите показать более сложные таблицы, адаптивные таблицы, эффект эллипсиса (три точки, когда нет места), то Вы можете поседеть, исправляя ошибки и разные типы поведения в браузерах. Изначально таблица была единственным элементом, позволяющим вертикально выровнять содержимое (такие же методы, как flex и grid).

Если Вы все таки решились создавать сайт для гордых пользователей Internet Explorer 5, то можете начать здесь: w3schools / Table

Float

Эта техника также достаточно устарела и медленно уходит вдаль, т.к. поддержка современных способов позиционирования, таких как flex и grid, с каждым днем все выше и выше. Но главным преимуществом есть то, что оно совместимо практически со всеми (даже с ИЕ, да!).

Весомым в современном использовании есть то, что Bootstrap 3.3.7 полностью построен на float’ах, а его используют сотни тысяч сайтов. Таки аргумент.

Тыкните и поглядите что и как: w3schools / CSS Float

Главным правилом при верстке этим способом — использование техники «clearfix», чтобы элементы занимали реальное пространство, а не свободно плавали, как яхты в порту Венеции. Главным же недостатком является то, что он не поддерживает вертикальное выравнивание.

Flex или Flexbox

На данный момент, самая адекватная техника, уже поддерживается во всех современных браузерах (также частично в IE11 🙄).

Он сложнее в понимании (чем тот же grid или float), зато очень мощный. Flex поддерживает горизонтальное и вертикальное выравнивание, упорядочивание элементов и более продвинутые и полезные функции. В общем, маст-хев в 2017 и пока сохраняет свое место в трендах, несмотря на гриды. Пример использования:

.listing {
  display: flex;
  flex-wrap: wrap;
}
.item {
  flex: 200px;
  margin: 20px;
}

С чего начать в флексах? Если совсем лень разбираться — flexboxfroggy.com, но лично я советую эту статью.

Css Grid

Самая современная методика создания макета, легкий в понимании основных моментов, но слабоватая совместимость с браузерами. Проще говоря, пока мир не увидит этого супер героя в действии.

Использование:

.listing {
  display: grid
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
}

В grid’ах существует одна действительно умная единица, и это fr (дробь). В одной строке сетки мы можем поместить столько фракций, сколько хотим, и все эти фракции пытаются получить полную доступную ширину строки. Например. 1fr 2fr 1fr создаст 3 столбца, сначала беря 25%, второе 50% и третье 25% пространства ширины строки.

Детальнее можете вычитать на Мозилла:Деве, посмотреть примеры сеток на gridbyexample.com и сыграть в игру, чтобы познакомиться с сеткой css: cssgridgarden.com.

Также подписывайтесь на наш офигенный Телеграм-канал 🤘: постим крутые статьи, авторские мнения, новости и шутки из мира Web-разработки. Понравилась статья? Расскажи об этом друзьям!