Cheat-sheet jQuery 1.7.1.

Технология flexbox обещает спасти нас от проблем линейного CSS (таких как например вертикальное выравнивание).

В Firefox уже можно опробовать эту технологию. Однако освоение новой модели позиционирования может быть не таким простым.

Давайте посмотрим как работает flexbox, как мы можем использовать его для более простого позиционированния элементов.

Принцип позиционирования flexbox позволяет гибко и интуитивно строить лэйаут.

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

Всё это хорошо звучит в теории. Но давайте посмотрим как это выглядит на практике.

В этой статье мы рассмотрим 5 наиболее распространённых свойств модели flexbox. Мы рассмотрим как можно использовать их и как будут выглядеть результаты.

Три колонки. Одна - это сайд-бар фиксированной ширины, для вашей навигации. Другая, скажем, для рекламы или фотографий. И, наконец, контент с изменяющейся шириной для полезной информации.

Множество статей написано о вёрстке, существует множество шаблонов. Однако большинство существующих решений чем-нибудь, да жертвует: порядок загрузки элементов, полноширинный футер, громоздкая разметка часто являются компромиссом в погоне за иллюзорной вёрсткой.

Техника, которая описана в этой статье, позволит вам создавать вёрстку без каких-либо компромиссов для вашего кода и гибкости. Эта техника:

1. позволяет создать контент с плавающей шириной, боковые панели - с фиксированной;
2. позволяет центральной колонке подгружаться первой;
3. выравнивает все колонки по высоте;
4. требует всего лишь один лишний div в разметке;
5. использует очень простой CSS, с минимумом хаков.