本篇解釋了有關flexbox的知識點內容，重點介紹父元素(flex容器)和子元素(flex元素)的不同及可能的屬性。

背景

Flexbox Layout彈性布局模塊的目的在于提供一種更有效的方式來布置、調整和頁面元素在容器中分配空間，即使是未知大小或者動態的，所以稱為flex。

flex布局背后的主要思想是讓元素在容器內改變寬高和順序，以更好的填充空間(主要是為了自適應)。flex布局與方向無關，不像常規布局(基于垂直和水平塊布局)，缺乏靈活性，無法適應大型項目和復雜的應用程序(特別是改變方向、調整大小、拉伸、縮小等方面)。

• 注意：Flexbox布局最適合組件和小規模的布局，Grid更適合大規模的布局。

知識點

如圖，父元素容器，內部包含的是子元素

• display

這里定義了一個flex容器，是否內聯取決于給定的值，為所有子元素提供靈活的自適應，css列對flex容器沒有影響

• order

默認按順序排列

• flex-direction

建立主軸，從而定義Flex項目放置在Flex容器中的方向

• row(默認)：從左到右ltr; 從右到左rtl
• row-reverse：從右到左ltr; 從左到右rtl
• column：同樣row但從上到下
• column-reverse：同樣row-reverse但從下到上
• flex-grow

它規定了元素應占用的Flex容器內可用空間的大小。如果所有項都flex-grow設置為1，則容器中的剩余空間將平均分配給所有子項。如果其中一個孩子的值為2，則剩余空間占用的空間是其他孩子的兩倍(或者至少會嘗試)，負數無效

• flex-wrap

默認情況下，flex項目都會嘗試一行。你可以更改它并允許元素根據需要使用此屬性進行換行。

• nowrap (默認值)：所有彈性項目都在一行上
• wrap：flex項目將從上到下包裹到多行。
• wrap-reverse：flex項目將從下到上包裹多行
• flex-shrink

定義了Flex元素在必要時縮小的能力，負數無效

• flex-flow(適用于：parent flex容器元素)

這是一個簡寫flex-direction和flex-wrap屬性，它們共同定義了flex容器的主軸和交叉軸。默認是row nowrap

• flex-basis

定義了在分配剩余空間之前元素的默認大小。它可以是長度(例如20％，5rem等)或關鍵字；如果設置為0，則不考慮內容周圍的額外空間。如果設置為auto，則根據其flex-grow值分配額外空間。

• justify-content

定義了沿主軸的對齊。當線路上的所有彈性項目都不靈活，或者靈活但已達到其最大尺寸時，它有助于分配剩余的額外空閑空間。當它們溢出線時，它還對對齊施加一些控制。

• flex-start (默認值)：元素朝起始行打包
• flex-end：元素被打包到最后一行
• center：元素沿著線居中
• space-between：元素均勻分布在線上; 第一項是在起始行，最后一項是在結束行
• space-around：元素均勻分布在線條周圍，空間相等。請注意，視覺上空間不相等，因為所有元素在兩側都有相等的空間。第一個元素將在容器邊緣上有一個空間單位，但在下一個元素之間有兩個單位的空間，因為下一個元素有自己適用的間距。
• space-evenly：元素的分布以便任何兩個項目之間的間距(和邊緣的空間)相等。
• flex

它是flex-grow, flex-shrink和flex-basis組合。第二個和第三個參數(flex-shrink和flex-basis)是可選的。默認是0 1 auto。建議使用此屬性

• align-self

允許align-items為各個彈性項覆蓋默認對齊(或指定的對齊)

注意：float，clear和vertical-align對彈性項目沒有影響

• align-items

定義了如何沿當前行的橫軸布置彈性項目的默認行為。可以將其視為justify-content橫軸的版本(垂直于主軸)

• stretch (默認)：拉伸以填充容器(仍然尊重最小寬度/最大寬度)
• flex-start：元素的交叉開始邊距邊緣放置在交叉起始線上
• flex-end：元素的跨端邊緣位于交叉線上
• center：元素以橫軸為中心
• baseline：元素對齊，例如其基線對齊
• align-content

當橫軸上有額外空間時，這會對齊flex容器的線條，類似于主軸justify-content內各元素的對齊方式。

注意：當只有一行彈性元素時，此屬性不起作用。

• flex-start：行打包到容器的開頭
• flex-end：行打包到容器的末尾
• center：行包裝到容器的中心
• space-between：線條均勻分布; 第一行是容器的開頭，而最后一行是在容器的最后
• space-around：線條均勻分布，每條線周圍的空間相等
• stretch (默認值)：線條拉伸以占用剩余空間

兼容性

總結一下

本篇大致通過圖文的形式介紹了flex布局的基本知識點，可能不是很全面，要想學習更多關于flex布局的知識，可以參考https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex，如果覺得本文對你有幫助，請麻煩點個關注吧！謝謝！

總結

以上是生活随笔為你收集整理的flex将元素放在最后_前端布局——Flex弹性布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。