css flexbox模型

by Shaira Williams

由莎拉·威廉姆斯(Shaira Williams)

Flexbox和CSS Grid之間的主要區別 (The main differences between Flexbox and CSS Grid)

Dimensions define the primary demarcation between Flexbox and CSS Grid. Flexbox was designed specifically for one-dimensional layouts, while CSS Grid is engineered to enable two-dimensional layouts. Therefore, CSS Grid can easily render rows and columns simultaneously.

尺寸定義了Flexbox和CSS Grid之間的主要界限。 Flexbox專為一維布局而設計，而CSS Grid被設計為支持二維布局。因此，CSS Grid可以輕松地同時渲染行和列。

In layperson’s terms, CSS Grid presents a larger canvas, while Flexbox offers minute functionality that operates in a restricted space. The grids have been designed for a two-dimensional organization.

用外行的話來說，CSS Grid會顯示更大的畫布，而Flexbox則提供了在有限空間內運行的微小功能。網格是為二維組織而設計的。

However, the two specifications share some common points, and if you know how to use flexible boxes, you will find some concepts that will help you to grasp CSS grids.

但是，這兩個規范有一些共同點，如果您知道如何使用靈活框，則會發現一些概念，可以幫助您掌握CSS網格。

In this article, we’ll go through the main differences between Grid and Flexbox, summarized as follows:

在本文中，我們將介紹Grid和Flexbox之間的主要區別，總結如下：

Flexbox is designed for one-dimensional layouts, and Grid for two-dimensional layouts.
Flexbox專為一維布局而設計，而Grid專為二維布局而設計。
The approach of CSS Grid is the layout first, while the Flexbox approach is primarily the content.
CSS Grid的方法首先是布局，而Flexbox的方法則主要是內容。
The Flexbox layout is best suited to application components and small-scale layouts, while the Grid layout is designed for larger-scale layouts that are not linear in design.
Flexbox布局最適合應用程序組件和小規模布局，而Grid布局則設計用于設計中不是線性的大比例布局。

了解Flexbox和網格 (Getting to know Flexbox and Grid)

一維Flexbox (The one-dimensional Flexbox)

CSS Flexible Box Layout (or Flexbox) allows designers to position responsive elements appropriately within screens of different sizes. The tools include:

CSS靈活框布局(或Flexbox)允許設計人員將響應元素適當地放置在不同尺寸的屏幕中。這些工具包括：

box layout for documents,
文件箱的布局，
an inline layout for defining the appearance of text on screens,
用于定義屏幕上文本外觀的嵌入式布局，
a table layout to depict tabular data in one dimension,
一種表格布局，用于在一維中描述表格數據，
and a positioned layout mode that enables explicit positioning of responsive elements.
以及一種定位的布局模式，可以顯式定位響應元素。

Flexbox is popular among front-end developers, since it allows developers to create multiple instances of dynamic layouts and effortlessly align content within containers.

Flexbox在前端開發人員中很受歡迎，因為它允許開發人員創建動態布局的多個實例，并輕松地在容器內對齊內容。

The flexible box module has been designed as a one-dimensional presentation model and as a method that can provide space distribution between interface elements and powerful alignment functions. When we describe the flexbox as one-dimensional, we describe the fact that flexbox processes layouts in one dimension at a time, as a row or column. This can be compared to the two-dimensional model of the CSS grid layout, which controls columns and rows together.

柔性盒模塊已被設計為一維表示模型，并且被設計為可在界面元素和強大的對齊功能之間提供空間分配的方法。當我們將flexbox描述為一維時，我們描述的事實是flexbox一次處理一行或一列中的布局。可以將其與CSS網格布局的二維模型進行比較，后者可以一起控制列和行。

<div class=”wrapper”> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div></div>

.wrapper { width: 500px; display: flex; flex-wrap: wrap;}.wrapper > div { flex: 1 1 150px;}

Pros:

優點：

Flex can be arranged in any direction
柔韌性可以在任何方向上排列
Flex can have its visual order reversed or rearranged.
Flex可以顛倒或重新排列其視覺順序。
Items can be aligned in your container or between them.
項目可以在您的容器中或它們之間對齊。
Support all browsers.
支持所有瀏覽器。

Cons:

缺點：

Performance issues
性能問題

二維網格 (The two-dimensional Grid)

CSS Grid aligns items in columns and rows, allowing developers to easily control the rendering and appearance of large layouts and whole pages meant for the desktop, tablet, and smartphone displays.

CSS Grid使列和行中的項目對齊，從而使開發人員可以輕松控制用于臺式機，平板電腦和智能手機顯示屏的大型布局和整個頁面的呈現和外觀。

Items are placed inside the cells defined by the grid. Creating and defining the overall layouts remains the strong suit for CSS Grid. Internet Explorer, Chrome, Safari, Edge, and Firefox support Grid. Notably, Opera Mini, Blackberry Browser, QQ Browser, and Baidu Browser does not support Grid.

將項目放置在網格定義的單元格內。創建和定義總體布局仍然是CSS Grid的強項。 Internet Explorer，Chrome，Safari，Edge和Firefox支持Grid。值得注意的是，Opera Mini，Blackberry Browser，QQ瀏覽器和百度瀏覽器不支持Grid。

It offers automation to create a layout, or define automatic placement rules that perform placements inside a given grid.

它提供了自動創建布局或定義自動放置規則的功能，這些規則可以在給定的網格內執行放置。

<div class=”wrapper”> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div></div>

.wrapper { display: grid; grid-template-columns: repeat(3, 1fr);}

Pros:

優點：

Grid tracks are created within your stylesheet.
網格軌跡是在樣式表中創建的。
Reduced file sizes.
減小文件大小。
Prototyping with CSS Grid is fast and efficient.
使用CSS Grid進行原型制作快速有效。

Cons:

缺點：

Not supported by every browser
并非所有瀏覽器都支持

Flex和Grid之間的差異 (Differences Between Flex and Grid)

尺寸和靈活性 (Dimensionality and Flexibility)

Flexbox offers greater control over alignment and space distribution between items. Being one-dimensional, Flexbox only deals with either columns or rows. This system works for smaller layouts, but cannot render complex displays such as text or document-centric properties that enable floats and columns.

Flexbox可以更好地控制項目之間的對齊方式和空間分配。由于是一維的，Flexbox只處理列或行。此系統適用于較小的布局，但無法渲染復雜的顯示，例如啟用浮點數和列的文本或以文檔為中心的屬性。

Grid has two-dimension layout capabilities which allow flexible widths as a unit of length. This compensates for the limitations in Flex.

網格具有二維布局功能，允許靈活的寬度作為長度單位。這補償了Flex中的限制。

對準 (Alignment)

Flexbox allows fine-tuning of alignments to ensure exact specification sharing. Flex Direction allows developers to align elements vertically or horizontally, which is used when developers create and reverse rows or columns.

Flexbox允許對路線進行微調，以確保確切的規格共享。 Flex Direction允許開發人員垂直或水平對齊元素，這在開發人員創建和反轉行或列時使用。

For broader alignments in both dimensions simultaneously, CSS Grid deploys fractional measure units for grid fluidity and auto-keyword functionality to automatically adjust columns or rows. The in-built automation saves developers from re-work regimes that may potentially originate in confused calculations.

為了同時在兩個維度上進行更廣泛的對齊，CSS Grid部署了分數測量單位以實現網格的流動性和自動關鍵字功能，以自動調整列或行。內置的自動化功能使開發人員免于可能因混淆計算而產生的返工制度。

項目管理 (Item Management)

Flex Container is the parent element while Flex Item represents the children. The Flex Container can ensure balanced representation by adjusting item dimensions. This allows developers to design for fluctuating screen sizes.

Flex容器是父元素，而Flex項代表子元素。 Flex容器可以通過調整項目尺寸來確保均衡的表示。這使開發人員可以針對波動的屏幕尺寸進行設計。

For fine-tuning this aesthetic, Grid supports both implicit and explicit content placement. Its inbuilt automation allows it to automatically extend line items and copy values into the new creation from the preceding item.

為了微調這種美感，Grid支持隱式和顯式內容放置。其內置的自動化功能使其可以自動擴展訂單項，并將值復制到先前項目中的新內容中。

結論 (Conclusion)

Flexbox and CSS Grid both allow a powerful measure of control over their respective domains of front-end development. However, their capabilities are exponentiated when they are combined, utilizing their respective strengths to create an extremely fluid, customizable, beautiful, smooth, and simple experience.

Flexbox和CSS Grid都可以對它們各自的前端開發領域進行有效的控制。但是，它們的功能在組合時就得到了指數化，利用它們各自的優勢來創造極其流暢，可定制，美觀，流暢和簡單的體驗。

Combining their code also results in a more lightweight setup where abstraction in both domains spills over into the other. There are vast applications to both options, and even more when they are combined into a powerful setup.

組合它們的代碼還可以實現更輕量級的設置，其中兩個域中的抽象都可以溢出到另一個域中。兩種選擇都有廣泛的應用程序，并且當它們組合成強大的設置時，甚至還會更多。

Learn more about relationship of grid layout to other layout methods here.

在此處了解有關網格布局與其他布局方法的關系的更多信息。

This article has been tipped by members of the techiespad blog.

本文已由techiespad博客成員提供。