如何使用CSS Flexbox進行對齊

設置顯示：容器上的Flex啟用Flexbox。 2。使用合理的內容沿主軸對齊項目，具有中心，空間間隔或空格分佈之類的值。 3。應用對齊項來控制橫軸上的對齊，例如中心或彈性啟動，以進行垂直對齊。 4。結合正當內容：中心和對齊目標：在水平和垂直方向上居中的中心內容中心，確保容器具有定義的高度。 5。在各個項目上使用對齊自我來覆蓋容器的對齊項目設置。 6。用flex方向更改佈局方向：列垂直堆疊，這交換了正當內容和對準項目的行為。 7。對於多線佈局，請使用Flex-nap：包裝和對齊符號來管理線之間的間距，以及諸如中間或拉伸之類的選項。始終將容器高度定義為垂直對齊的工作，請使用Margin：自動對簡單的覆蓋，並更喜歡flexbox作為一維佈局，同時考慮CSS網格以進行二維設計。了解主軸和橫軸是掌握Flexbox對齊的關鍵。

使用CSS Flexbox進行對齊是控制現代網絡設計中佈局和定位的最有效方法之一。它簡化了居中，分發空間以及水平和垂直的物品（過去都需要復雜的黑客攻擊）。

這是有效使用Flexbox進行對齊方式的方法：

1。設置一個Flex容器

要開始使用FlexBox，請應用display: flex到父元素（容器）。這會激活其直接兒童（Flex項目）的Flexbox。

 。容器 {
  顯示：Flex;
}

設置此設置後，您可以在容器及其孩子上使用各種Flexbox對齊屬性。

2。與justify-content

該屬性控制flex項目沿主軸的對齊方式（通常是水平，除非方向更改）。

共同值：

• flex-start - 一開始對齊的項目（默認）
• flex-end - 末尾對齊的項目
• center - 中心物品
• space-between - 在開始時首先和最後一個均勻分發項目
• space-around - 空格的物品，周圍有相等空間
• space-evenly - 所有項目之間和周圍之間的平等空間

示例：中心項目水平

。容器 {
  顯示：Flex;
  Jusify-content：中心；
}

3。垂直對齊與align-items

這與沿橫軸的項目對齊（ flex-direction行時垂直）。它可以在容器上工作，以使所有項目組成組。

共同值：

• stretch - 物品拉伸以填充容器（默認）
• flex-start - 物品與頂部對齊
• flex-end - 物品與底部對齊
• center - 垂直項目中心
• baseline - 按照其文本基線對齊項目

示例：垂直中心項目

。容器 {
  顯示：Flex;
  準項目：中心；
}

4。水平和垂直居中

要將兩個方向的彈性項目集中，請將justify-content和align-items結合在一起。

 。容器 {
  顯示：Flex;
  Jusify-content：中心； /* 水平的 */
  準項目：中心； /* 垂直的 */
  身高：100VH； / *確保容器的身高 */
}

這是將內容集中在CSS中的最簡單，最可靠的方法之一。

5。將單個項目與align-self一致

您可以使用align-self來覆蓋特定彈性項目的align-items 。

 。物品 {
  對準自己：flex-start; / *或中心，彎曲端等 */
}

當一個項目需要不同的垂直對齊時，這很有用。

6。通過flex-direction控制方向

默認情況下，項目是連續佈置的（從左到右）。用以下方式更改主軸

• flex-direction: row - 水平（默認）
• flex-direction: column - 垂直方向
• flex-direction: row-reverse或column-reverse - 反向順序

當使用column ，主軸和橫軸開關，因此justify-content會影響垂直對準和align-items會影響水平。

示例：垂直佈局，中心項目水平

。容器 {
  顯示：Flex;
  撓性方向：列；
  Jusify-content：中心； / *現在垂直 */
  準項目：中心； / *現在水平 */
}

7。處理包裝和多行對齊

如果項目包裹成多條線（使用flex-wrap: wrap ），請使用align-content來控制線之間的間距。

• align-content: flex-start - 堆疊在頂部的線
• align-content: center - 以小組為中心
• align-content: space-between - 線之間的空間
• align-content: stretch - 線伸展到填充空間

注意：當只有一行項目時， align-content沒有效果。

快速提示

• 始終在容器上設置一個高度（或最小的高度），以使垂直中心工作。
• 使用margin: auto在Flex項目上，以簡單的對齊方式覆蓋。
• Flexbox最適合一維佈局（行或列）。對於二維網格，請考慮CSS網格。

基本上，Flexbox對齊歸結為理解主軸和橫軸，然後適當地使用justify-content和align-items 。一旦掌握了它，佈局就會變得更加直觀。

以上是如何使用CSS Flexbox進行對齊的詳細內容。更多資訊請關注PHP中文網其他相關文章！