JavaScript >> Javascript 文檔 >  >> Tags >> CSS

您需要了解的 5 種 Flexbox 技術

Flexbox 是一種針對設計用戶界面進行了優化的 CSS 標準。使用各種 flexbox 屬性,我們可以用小的構建塊構建我們的頁面,然後可以輕鬆地以任何我們想要的方式定位和調整大小。以這種方式製作的網站和應用程序響應迅速,並能很好地適應所有屏幕尺寸。

在本文中,我們將了解解決常見 CSS 佈局問題的五種 flexbox 方法。我們還提供了一些實際示例來展示應用這些技術的現實生活場景。

1。創建等高的列

起初這似乎不是一項艱鉅的任務,但製作具有相同高度的列可能真的很煩人。只需設置 min-height 行不通,因為一旦列中的內容量開始不同,其中一些會增長,而另一些會保持較短。

使用 flexbox 解決這個問題再簡單不過了,因為默認情況下以這種方式創建的列具有相同的高度。我們要做的就是初始化 flex 模型,然後確保 flex-direction 和 align-items 屬性有它們的默認值。

.container {
        /* Initialize the flex model */
    display: flex;

        /* These are the default values but you can set them anyway */
    flex-direction: row;    /* Items inside the container will be positioned horizontally */
        align-items: stretch;   /* Items inside the container will take up it's entire height */
}
<div class="container">

    <!-- Equal height columns -->

    <div>...</div>
    <div>...</div>
    <div>...</div>

</div>

要查看此技術的演示,您可以查看我們創建等高側邊欄的最簡單方法一文,其中我們創建了一個帶有側邊欄和主要內容部分的響應式頁面。

2。重新排序元素

前段時間,如果我們必須動態更改某些元素的順序,我們可能會嘗試一些 CSS hack,沮喪地退出,然後使用 JavaScript 來做。然而,對於 flexbox,這項任務歸結為應用單個 CSS 屬性。

它被稱為 order 就像它的名字一樣,它的一切都盡可能簡單。它允許我們交換任意數量的彈性項目並改變它們在屏幕上出現的順序。它唯一的參數是一個確定元素位置的整數——數字越小意味著優先級越高。

.container{
    display: flex;
}

/* Reverse the order of elements */

.blue{
    order: 3;
}

.red{
    order: 2;
}

.green{
    order: 1;
}
<div class="container">

    <!-- These items will appear in reverse order -->

    <div class="blue">...</div>
    <div class="red">...</div>
    <div class="green">...</div>

</div>

order 屬性有很多實際用途。如果您想查看其中的一些,可以查看這篇文章,我們使用它來構建響應式評論部分。

3。水平和垂直居中

CSS 中的垂直居中是讓我們問自己的問題之一:這麼簡單的事情怎麼做起來還這麼複雜 ?確實如此。如果你用谷歌垂直居中 CSS, 將會出現無數種不同的技術,其中大多數將涉及表格或轉換——這些東西不是為製作佈局而設計的。

Flexbox 為這個問題提供了一個更簡單的解決方案。每個 flex 佈局都有兩個方向(X 軸和 Y 軸)和兩個單獨的對齊屬性。通過將兩者居中,我們可以將任何元素定位在其父容器的中間。

.container{
    display: flex;

    /* Center according to the main axis */
    justify-content: center;

    /* Center according to the secondary axis */
        align-items: center;
}
<div class="container">

    <!-- Any element placed here will be centered
         both horizonally and vertically -->

    <div>...</div>

</div>

要查看此技術的實際應用並了解更多相關信息,您可以轉到我們關於同一主題的快速提示文章。

4。創建完全響應的網格

大多數開發人員在創建響應式網格時都依賴 CSS 框架。 Bootstrap 是最受歡迎的,但有數百個庫可以幫助您完成這項任務。它們通常工作得很好並且有很多選擇,但往往很重。如果你是一個 DIY 人,或者不想為網格實現一個完整的框架,flexbox 可以滿足你!

flexbox 網格中的一行只是一個帶有 display:flex 的容器 .它裡面的水平列可以是任意數量的元素,通過 flex 設置其大小。 flex 模型適應視口大小,所以這個設置在所有設備上看起來都很好。但是,如果我們確定屏幕上沒有足夠的水平空間,我們可以通過媒體查詢輕鬆地將佈局轉換為垂直佈局。

.container{
    display: flex;
}

/* Classes for each column size. */

.col-1{
    flex: 1;
}

.col-2{
    flex: 2;
}

@media (max-width: 800px){
    .container{
        /* Turn the horizontal layout into a vertical one. */
        flex-direction: column;     
    }
}
<div class="container">

    <!-- This column will be 25% wide -->
    <div class="col-1">...</div>

    <!-- This column will be 50% wide -->
    <div class="col-2">...</div>

    <!-- This column will be 25% wide -->
    <div class="col-1">...</div>

</div>

您可以在我們的“製作響應式標題的最簡單方法”快速提示中查看此技術的變體。

5。創建完美的粘性頁腳

Flexbox 也有一個簡單的解決方案來解決這個問題。在構建包含粘性頁腳的頁面時,通過在 flex 元素中執行所有操作,我們可以確保頁腳始終位於頁面底部。

應用 display: flex 到 body 標籤允許我們使用 flex 模式屬性構建整個頁面佈局。完成後,網站的主要內容可以是一個彈性項目,而頁腳是另一個,這使得操縱它們的位置並將它們準確地放置在我們想要的位置變得非常容易。

html{
    height: 100%;
}

body{
    display: flex;
    flex-direction: column;
    height: 100%;
}

.main{
   /* The main section will take up all the available free space
      on the page that is not taken up by the footer. */
   flex: 1 0 auto;
}

footer{
   /* The footer will take up as much vertical space as it needs and not a pixel more. */
   flex: 0 0 auto;
}
<body>

    <!-- All the page content goes here  -->

    <div class="main">...</div>

    <!-- Our sticky foooter -->

    <footer>...</footer>

</body>

您可以在我們的文章“製作粘性頁腳的最佳方法”中找到有關此技術的更多信息。

結論

所有主流瀏覽器(IE 9 除外)現在都支持 flex 佈局模式,因此除非您的用戶群更喜歡復古的 Microsoft 瀏覽器,否則可以肯定地說 flexbox 已準備好生產。如果你現在還沒有使用過,我們強烈建議你嘗試一下!

我們希望您發現我們的 CSS 技巧很有用,它們將幫助您構建更好、更強大的響應式佈局。享受吧!


Tutorial JavaScript 教程
  1. 保護和監控您的前端應用程序

  2. 使用 react-barcode 生成 Barcode 的最簡單方法

  3. 如何在 Docker 容器中調試 Node.js 應用程序

  4. 我準備好學習框架了嗎?

  5. jQuery獲取元素填充/邊距

  6. Javascript toFixed() 不是函數

  7. 我的第一個 next.js 項目

  1. 在 android 中預覽 vue.js 應用程序

  2. 加載類似但新的數組時如何保留數組引用?

  3. WordPress 5.6 的新特性(可訪問性、性能、安全性)

  4. 📚 來自 dev.to 和網絡的很棒的鏈接 #3

  5. JavaScript 浮點精度 |示例代碼

  6. Expo SDK 37 現已推出

  7. 可以教發誓的語音助手(第 1 部分)

  1. 使用 Appworks 佈局自定義 JHipster + Vuejs CRUD

  2. 開發人員如何增加儲蓄

  3. ♻️ React 中的上下文 API! |現在切換到它!

  4. 如何在 60 秒內使用 WebAssembly 創建一個支持 Go 的 React 應用程序