• QQ咨詢:4001806960
  • 咨詢熱線:400-180-6960

html5開發培訓系列之Flexbox深入理解

作者:wy日期:2016-07-31 17:23:43 點擊:1021 flexbox

本系列

flexbox的優勢

隨著移動設備的普及,各種響應式用戶界面的流行,Web 應用一般都要求適配不同的設備尺寸和浏覽器分辨率,這無疑使布局的邏輯變得更加複雜.
我們需要根據窗口尺寸來調整布局,從而改變組件的尺寸和位置,以達到最佳的顯示效果

CSS3 規範中引入的新布局模型:彈性盒模型(flex box)。彈性盒模型可以用簡單的方式滿足很多常見的複雜的布局需求,它能以更加高效的方式來對容器中的盒子進行布局、對齊和分配空間,即使盒子尺寸未知或動態時也能工作

flexbox的屬性

通過flexbox來布局可以輕松實現各種負責的布局,並且提供的屬性不是很多,學習難度一般,歸納下,主要有如下幾個屬性(以下寫的都是2012版提供的標准寫法,):

在這之前如果你對主軸與交叉軸的概念或者對每個屬性有哪些值還不是很清楚,請看上一篇文章flexbox基礎知識入門


display:flex;
flex-direcition 確定主軸的方向
flex-wrap 當子容器超出父容器時如何排列
flex-flowflex-directionflex-wrap的複合屬性
order 作用在子容器上,用來改變子容器的排列順序,值越小,排列越靠前
justify-content 在主軸的排列方式
align-items 在交叉軸的排列方式
align-content 在交叉軸方向上的空白處理,但如果又只有單行時,該屬性不起作用
align-self 設置子容器覆蓋父容器指定的對齊方式,如果子容器margin值設爲auto,則不起作用

最後三個是比較重要的,也是彈性盒模型的核心之處,彈性的處理盒子的尺寸
細分屬性:flex-grow flex-shrink flex-basis
上者三個的複合屬性:flex

flex-grow 有多余空間時,該值起作用
flex-shrink 有溢出空間時,該值起作用
flex-basis 子容器被調整之前的初始值

flex組合寫法的總結

    flex:atuo ->flex:1 1 atuo
flex:none -> flex:0 0 auto
flex:1 -> flex:1 1 0%
flex:0% -> flex:1 1 0%
flex: 2 100px ->flex: 2 1 100px

flexbox的實例

1.網格布局 就是平均分布。在容器裏面平均分配空間 ,但需要項目自動縮放,自動縮放這點是把flex-basis設置成了auto來實現的,當前也可以對部分元素設置百分比,其他的子容器平均分配多余的空間

<div class="container">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
</div>
<style type="text/css">
.container{
display: flex;
}


.item {
flex: 1;
}

</style>

2.常見的三欄布局

html部分:
<div class="wrapper">
<header class="header">header</header>
<article class="main">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</article>
<aside class="aside aside-1">Aside 1</aside>
<aside class="aside aside-2">Aside 2</aside>
<footer class="footer">Footer</footer>
</div>

 css部分:
<style type="text/css">
.wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
}


.wrapper > * {
padding: 10px;
flex:1 100%;

}


.header {
background: tomato;
}


.footer {
background: lightgreen;
}


.main {
text-align: left;
background: deepskyblue;
}


.aside-1 {
background: gold;
}


.aside-2 {
background: hotpink;
}


@media all and (min-width: 800px) {
.main { flex: 3 0%; }

.aside-1 { order: 1; }
.main { order: 2; }
.aside-2 { order: 3; }
.footer { order: 4; }
}

@media all and (min-width: 600px) {
.aside { flex: 1 auto;}
}

</style>

3.輸入框的布局
我們常常需要在輸入框的前方添加提示,後方添加按鈕。

html部分:

<div class="InputBox">
<span class="InputBox-item">...</span>
<input class="InputBox-field">
<button class="InputBox-item">...</button>
</div>

css部分:
.InputBox{
display: flex;
}

.InputBox-field {
flex: 1;
}

4.流式布局或或垂直居中等

以上爲個人理解,如有錯誤歡迎指正

 

上一篇: 通過LESS的基礎語法的學習,提高web前端開發的效果

下一篇: 珠峰html5培訓之移動端橫豎屏的檢測開發