移動端彈性布局--flex

標籤：blog   http   row   方式   cti   float   不能   布局   dir   

      目前，Flex布局，可以簡便、完整、響應式地實現各種頁面配置。而且，它已得到了所有瀏覽器的支援，這意味著，我們能很安全地使用這項功能。

      如果你對彈性網頁布局感興趣，那可別錯過flex這麼好用的屬性哦。

一、 初識flex 

      以前我給PC端網頁進行布局時，我是基於盒子模型上，然後採用float浮動和position定位這2個主要屬性，當時，我對flex布局並不瞭解。後來當我開始接觸移動端項目時，我開始瞭解新的布局方式，這才知道flex彈性布局的存在。

     我為什麼會對flex布局有好感呢？

     首先是因為以前的布局方式有點不夠用了，需要有新的布局方式。剛開始切頁面我最常用的是float浮動布局，那時，我簡直是把float當做救星一般，只要我的頁面視覺稍有問題，我就會使用float浮動，完全沒有考慮到會影響網頁的相容性或者出現亂版。

      另一個就是position定位布局，這也是我經常會用到的布局方式之一，不過呢，在用之前一定要弄清楚父級與子級。

      友情提示：千萬不能亂用或者依賴上float浮動和position定位屬性哦~其中的苦楚我能說幾天幾夜T_T......

二、熟悉flex（我的實踐中...）

　　(1)好簡單能實現‘比例性’排列（重點是自適應了）

　　　　利用flex屬性，可以實現區塊層級元素1：1：1

　　　　

　　　　

　　　　同理，若將item2裡面的flex值改成2，則會出現下面的效果

　　　　

　　（2）可以使裡面的內容置中（尤其是垂直置中，好用到爆）

　　　　

　　　　

　　　　上面就是用了jsutify-content與align-item2個屬性，對應是實現水平置中和垂直置中。

　　（3）橫向排列、豎向排列（flex-direction:row/column）

　　　　

　　　　

三、flex就是有太多魅力，等你來發現

　　首先聲明喲，flex的功能有很多很多的，而我上面寫的幾個屬性只是我最近布局常用的，我也是認為好用才把這些寫出來的。

　　如果想對flex彈性布局有更好的運用，就自己想辦法吧......^.^......

　　

　　　　

 

　　

 

移動端彈性布局--flex