Разработка интерфейса: Введение в Flexbox

Разработка интерфейса: Введение в Flexbox

Как известно, все HTML элементы являются по существу блоками. Традиционно, когда мы устанавливаем и работаем с этими блоками, мы используем свойство float.

.main {  
    float: left;      
}  
.sidebar {  
    float: rightright;  
}  

Но существует один определенный недостаток, когда мы применяем этот метод, прямой родительский элемент блока .main и .sidebar рушится, как показано ниже. В этом случае нам приходится применять CSS Clearfix что бы избежать этого.
flexbox collapse

Модуль Flexible Box

Так как, в настоящее время, это становится обычной практикой в веб-разработке, W3C объявила о новом модуле который называется Flexible Box или просто Flexbox. Но, этот модуль все еще ​​находится на стадии разработки и уже было несколько изменений на протяжении нескольких лет.

На момент написания этого модуля, полностью поддерживаются только в Chrome 22 (с префиксом) и опера 12.1, в соответствии с CanIUse.com .

Давайте посмотрим, как этот модуль работает.
Чтобы продемонстрировать эту новую функцию CSS3, мы подготовим HTML структуру. У нас есть div, который содержит два других div

<div class="cf">  
    <div class="col left">  
        <p>Pastry icing sweet roll fruitcake croissant. Tart wypas tiramisu marshmallow   
        marshmallow sweet roll. Cheesecake bear claw pudding bonbon sweet roll powder carrot cake.   
        Cake sweet donut tart.</p>  
    </div>  
    <div class="col right">  
        <p>Dessert gummies sweet roll. Dessert gummi bears soufflé cotton candy icing.  
        Lollipop wafer lemon drops toffee chocolate.</p>  
    </div>  
</div> 

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

Как уже упоминалось выше, традиционным способом, мы бы сделали в таблице стилей для размещения колонки, что-то вроде этого: применили бы float и задали нужную ширину, а также применили бы CSS Clearfix.

.cf:before,  
.cf:after {  
    content: "";  
    display: table;  
}  
.cf:after {  
    clear: both;  
}  
.cf {  
    *zoom: 1;  
}  
.old .col {  
    float: left;  
}  
.old .left {  
    width: 310px;  
}  
.old .rightright {  
    width: 210px;  
}    

Как и ожидалось, результат был бы таким:
старый метод flexbox
Но с модулем Flexbox всё становится гораздо проще. Мы просто должны установить родителю display:flex

.flex {  
    display: -webkit-flex;  
    display: flex;  
}  

Самое интересное, что это также определит правильную ширину для внутреннего div самостоятельно.
Пример работы flexbox
Кроме того, можно также применить Flexbox к дочернему элементу. В следующем примере мы применим его к левой колонке.

Теперь, у нас внутри два столбца, они также будут разделены, как показано ниже.
применение flexbox

Синтаксис

Как уже упоминалось ранее, flexbox ещё находится на стадии разработки. Так например, в 2009 году это было display:box, затем в 2011 году он изменился на display: flexbox. На данный момент это display:flex.
Так что, я думаю стоит ещё немного подождать, пока этот модуль не будет утвержден, прежде чем в полном объеме использовать его на своих сайтах.

comments powered by Disqus
Subscribe to RSS Feed Следить в Twitter