Flex佈局到底解決了什麼問題

時間 2019-12-05

標籤 flex 佈局到底解決什麼問題欄目 Flex 简体版

原文原文鏈接

Flex佈局到底解決了什麼問題--這一直是讓我以爲困惑的地方。javascript

響應式設計出現好多年，這些年咱們一直使用浮動與block來佈局，也沒以爲什麼很差。。css

flex的教程看了挺多，但理解老是很模糊。這幾天我從另外一個角度開始了flex的學習，在實際對比了flex和普通佈局後，發現它不只更加符合響應式設計的特色，並且之前的一些佈局難點也迎刃而解了。html

一種似曾熟悉的感受襲來，就像在我使用gulp後忽然明白了grunt爲何會被取代同樣。java

如下全當總結git

1.如何在一個超短的頁面中，使footer固定在最下方。代碼以下github

<body>
    <div class="wrapper">
        <p>404 not found</p>
    </div>
    <div class="footer">
        <p>Copyright (c) 2008</p>
    </div>
</body>

正如404這種頁面，通常的解決方案爲以下。經過設置負邊距來容納頁腳，達到全屏的效果。web

.wrapper {
  height: 100%;
  margin: 0 auto -2em;
}
.footer {
  height: 2em;
}

利用flex自己自適應的特色以下，達到的效果一致。但不用手動設置footer的寬高，完美實現footer放置在最下面的需求。gulp

body {
  display: flex;
  flex-direction: column;
}
.wrapper {
  flex: 1;
}

2.如何使表單對齊。app

<div class="cover">
  <form class="flex-form">
      <input type="search" placeholder="Where do you want to go?">
      <label for="from">From</label>
      <input type="date" name="from">
      <label for="from">To</label>
      <input type="date" name="to">
      <select name="" id="">
        <option value="1">1 Guest</option>
        <option value="2">2 Guest</option>
      </select>
      <input type="submit" value="Search">
  </form>
</div>

一個長表單。input輸入框有大有小不整齊，標籤文字與表單文字沒有對齊。按照普通方案搞定這些將很是麻煩：涉及到元素高度，文字居中。。。ide

.cover {
  display: flex;
}
.flex-form {
  display: flex;
  align-items: center;
  border: 1px solid black;
}

/*如下爲完善效果所需*/
.flex-form > * {
  border: 0;
  padding:10px;
  font-size: 20px;
  line-height: 50px;
  outline: 0;
  border-right:1px solid rgba(0,0,0,0.2);
  -webkit-appearance:none;
}

.flex-form > *:not([type="date"]) {
  border-top:1px solid white;
  border-bottom:1px solid white;
}

.flex-form input[type="submit"] {
  background:#FF5A5F;
  border-top: 1px solid #FF5A5F;
  border-bottom: 1px solid #FF5A5F;
  color:white;
}

仍是利用flex自適應高度的特色，咱們沒有設置任何一個框的寬高，就達到了文字所有水平對齊的效果。

3.響應式設計

若是上面兩個例子依然讓你以爲flex沒什麼大不了的話，第三個例子絕對會讓你大吃一驚。
在設計頁面時，爲了達到響應式的效果，咱們在最初佈局時就須要考慮到在移動端的顯示效果。狀況每每是當須要移動端實現某些效果時，才發現html裏的結構已經固定了，某些板塊佈置起來怎麼寫css都沒法實現。有時耗費的時間比開發兩套頁面還要多。但flex佈局的出現使css有了改變html結構的能力。footer板塊能夠放置到header板塊之上還不用改變html結構，就這麼神奇！

<div class="wrapper">
    <header class="top">
        <h1>What The Flexbox?!</h1>
    </header>
    <nav class="flex-nav">
        <a href="#" class="toggleNav">☰ Menu</a>
        <ul>
            <li><a href="#">Item 01</a></li>
            <li><a href="#">Item 02</a></li>
            <li><a href="#">Item 03</a></li>
        </ul>
    </nav>
</div>
<script type="text/javascript">
  const toggle = document.querySelector('.toggleNav');
  const menu = document.querySelector('.flex-nav ul')
  toggle.addEventListener('click', () => menu.classList.toggle('open'));
</script>

這個頁面由兩部分組成。標題是第一部分，菜單是第二部分，但在移動端呈現時每每是菜單在最上面，之前的css是沒法實現這種效果的
。利用flex能夠設置子元素的排序，這個特性能夠把頁面中的塊變得像積木同樣--咱們想怎麼搭就怎麼搭，隨便你排列組合。

.wrapper {
  display: flex;
  flex-direction: column;
}
.top {
  text-align: center;
}
h1 {
  padding: 40px 0;
  background-image: linear-gradient(60deg, #2bcfd8 0%, #93d02b 100%);
}
a {
  display: inline-block;
  text-decoration: none;
  background-image: linear-gradient(260deg, #2376ae 0%, #c16ecf 100%);
  padding: 20px 5px;
  text-align: center;
  width: 100%;
}
.flex-nav ul {
  display: flex;
  margin: 0 auto;
  border:1px solid black;
}
.toggleNav{
  display: none;
}

ul li{
  flex: 3;
}


@media all and (max-width:500px) {
  .wrapper > * {
    order: 999;
  }
  .toggleNav {
    display: block;
  }
  .flex-nav {
    order: 1;
  }
  .flex-nav ul{
    display: none;
  }
  .top {
    order: 2;
  }
  .flex-nav .open {
    display: block;
  }
}

在pc端時，標題在上方菜單在下方，當屏幕小於500px時，菜單移動到最上面。
這個事例簡單介紹了flex靈活的排列方式，即使你有 10 個內容塊，在響應式設計的時候也能夠隨意更改他們的排序，達到任何你想要的效果。省時省力。

固然flex遠遠不止這些，但它的出現解決了很多css長久以來積累下的佈局疼點。利用浮動和行內塊來佈局致使的各類BUG層出不窮，由於它們的初衷均不是用來佈局。在響應式設計已經成爲網站標配的情況下，浮動和行內塊越顯得力不從心，這也是flex出現的緣由。flex更符合響應式的特色，你從不用給它設置一個固定的寬高，它就能達到你想要的效果。

分享兩個flex學習資源：

css-tricks flex徹底指南圖多字少，清晰明瞭。
github上的一個項目 flex解決了哪些問題告訴你flex到底解決了哪些以往css很難解決或沒法解決的問題。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。