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博客成员提供。