css flex 网格布局
Last month I wrote posts covering what’s new in Foundation 6 as well a deep dive into Foundation’s new menu component.
上个月，我写了一些帖子，内容涵盖了Foundation 6 的新功能以及对Foundation新菜单组件的深入了解。
Arguably one of the best parts of Foundation is the grid system. This system is the backbone of Foundation’s responsive design and gives you the flexibility to build anything from a simple two-column layout to a multi-level deep, intricate behemoth.
网格系统可以说是Foundation最好的部分之一 。 该系统是Foundation响应式设计的基础，它使您可以灵活地构建从简单的两列布局到多层深层，错综复杂的庞然大物。
The grid is based on a responsive float system, with rows, columns, offsets, clearing (the standard elements you see across several frameworks). It’s worked great and overall is a great way to get up and running quickly with your designs, catering to the various device sizes and adapting your UI accordingly.
网格基于响应式浮动系统，具有行，列，偏移量，清除(您在多个框架中看到的标准元素)。 它的效果非常好，总体而言，这是一种快速启动并运行设计，适应各种设备尺寸并相应调整UI的好方法。
However, there’s a new system in play in Foundation 6.
但是，Foundation 6中有一个新系统正在运行。
In Foundation 6, Zurb has introduced the Flex Grid, an optional replacement for the standard grid.
在Foundation 6中，Zurb引入了Flex Grid ，它是标准网格的可选替代品。
Flex Grid, as you can guess, is powered by flexbox. Instead of using floats, offset positioning, and other tricks that the standard grid employs, the new grid system lets you take advantage of some of the powerful layout features of the flexbox model.
您可以猜到，Flex Grid 由flexbox驱动 。 新的网格系统不使用标准网格使用的浮动，偏移定位和其他技巧，而是使您可以利用flexbox模型的一些强大的布局功能。
A word of caution before you jump in head-first: Since this new grid is powered by flexbox, naturally it will only work in supporting browsers. So if you need to support legacy browsers like IE8 and IE9 you will have to stick with the standard grid.
在您急忙前要先提一个警告：由于此新网格由flexbox提供支持，因此自然仅在支持浏览器的情况下起作用。 因此，如果您需要支持IE8和IE9等旧版浏览器，则必须坚持使用标准网格。
Zurb doesn’t include the Flex Grid by default; it’s an optional component. If you’re using the Sass version of Foundation, start by finding the app.scss file inside your project and open it in your editor. Inside you will see the @include statements. You will need to remove or comment out the standard grid and add the flex grid, as shown below:
默认情况下，Zurb不包括Flex Grid。 这是一个可选组件。 如果您正在使用Foundation的Sass版本， app.scss在项目中找到app.scss文件，然后在编辑器中将其打开。 在内部，您将看到@include语句。 您将需要删除或注释掉标准网格并添加flex网格，如下所示：
// @include foundation-grid; @include foundation-flex-grid;If you’re not using the Sass version and instead are creating your own custom build, you can include flex grid by choosing it from the customizer and downloading your combined CSS.
如果您不使用Sass版本，而是创建自己的自定义版本 ，则可以通过从定制程序中选择flex网格并下载组合CSS来包含flex网格。
The flex grid is meant to be used a replacement to the standard grid, so you can’t use both at the same time out of the box. This is because they share class names such as .row and .column.
Flex网格旨在替代标准网格，因此您不能同时使用两者。 这是因为它们共享.row和.column类的类名。
If you want to use both, you need to employ the Sass build of Foundation 6 and define your own basic grid by using the mixin for the standard grid. This will let you define your own structure so you can keep both in the same project (for example you might call your rows .row-old and your columns .column-old).
如果要同时使用两者，则需要使用Foundation 6的Sass构建并通过将mixin用于标准网格来定义自己的基本网格 。 这将允许您定义自己的结构，以便可以将它们保留在同一项目中(例如，您可以将行.row-old而将列.column-old )。
To use the new grid, you define your sections in rows and columns and add the sizing adjustments for each device profile. Here’s the basic markup for a 3-column flex grid:
要使用新的网格，请rows和columns定义部分，然后为每个设备配置文件添加尺寸调整。 这是3列Flex网格的基本标记：
<div class="row"> <div class="column small-12 medium-6 large-4">Column 1</div> <div class="column small-12 medium-6 large-4">Column 2</div> <div class="column small-12 medium-6 large-4">Column 3</div> </div>With this structure, you can apply additional classes to the .row or .column elements to change your layout.
使用此结构，您可以将其他类应用于.row或.column元素，以更改布局。
One of the great things about flexbox is how easy it is to control the ordering of elements. With standard floats it was next-to-impossible to order a series of elements one way and then to switch order based on some specified factor. With flexbox we can use the source ordering options to tell Foundation how we want our items organized.
flexbox的一大优点是控制元素的排序有多么容易。 对于标准浮点数，几乎不可能以一种方式对一系列元素进行排序，然后根据某些指定的因素切换顺序。 借助flexbox，我们可以使用源排序选项来告诉Foundation我们如何组织项目。
On each column we add the order-{value} property to order each element.
在每一column我们添加order-{value}属性以对每个元素进行排序。
<div class="row"> <div class="column order-2">I come second!</div> <div class="column order-1">I come first!</div> </div>More usefully, we can specify the device size in which we want to re-order the elements using the {size}-order-{value}property. The size specified is used ascending, meaning if you specify small-order-1 it will be used for small, medium, large, etc.
更有用的是，我们可以使用{size}-order-{value}属性指定要对元素进行重新排序的设备大小。 指定的大小按升序使用，这意味着如果您指定small-order-1 ，它将用于小，中，大等。
<div class="row"> <div class="column small-order-1 medium-order-2"> I come first on small, but second on anything larger </div> <div class="column small-order-2 medium-order-1"> I come second on small, but first on anything larger </div> </div>Have a look at this example demo page, which showcases how you can use the ordering property to switch up your UI based on device size.
看一下这个示例演示页面 ，该页面展示了如何使用ordering属性基于设备大小切换UI。
You can center things with the standard grid, but it’s often painful. Typically you need to fiddle with things or use margin tricks to get things just right. With flex grid you can easily lay out your content both horizontally and vertically.
您可以使用标准网格来使内容居中，但这通常很麻烦。 通常，您需要摆弄东西或使用边际技巧来使事情变得正确。 使用flex grid，您可以轻松地水平和垂直地布置内容。
To start, you need to add your horizontal alignment and/or vertical alignment classes to the row element. This will cause all elements in the row to be aligned as you define. If you don’t want to do that, you can add those same classes to each element to specify how each will be aligned.
首先，您需要将水平对齐和/或垂直对齐类添加到row元素。 这将使行中的所有元素按照您定义的方式对齐。 如果您不想这样做，可以将这些相同的类添加到每个元素中，以指定每个元素的对齐方式。
To horizontally align items you need to add one of the supported alignment classes such as align-right, align-left, align-center, align-justify, or align-spaced. For example, to create an evenly spaced menu where each navigation element has a perfect amount of space around it, we can use the align-spaced class.
要水平对齐项目，您需要添加受支持的对齐类之一，例如align-right ， align-left ， align-center ， align-justify或align-spaced 。 例如，要创建一个间隔均匀的菜单，其中每个导航元素在其周围都有足够的空间，我们可以使用align-spaced类。
<div class="row align-spaced"> <div class="column small-3">Home</div> <div class="column small-3">About</div> <div class="column small-3">Contact</div> </div>Because the space adds up to 9 inside the 12-column grid, we will have 3 grid units of space left, which will evenly be distributed around the items.
由于该空间在12列网格内总共增加了9个，因此我们将剩下3个网格单元，这些空间将均匀地分布在各个项目周围。
Vertical alignment is also super-easy to do using flex grids, which should make a lot of developers happy (considering how much of a pain it is normally). To get this running we need to add one of the supported alignment classes just like what we can do with horizontal alignment. These classes are align-top, align-middle, align-bottom, and align-stretch.
使用Flex网格也很容易进行垂直对齐，这应该使很多开发人员感到高兴(考虑到正常情况下的痛苦程度)。 为使此运行正常运行，我们需要添加受支持的路线类别之一，就像我们对水平路线所做的一样。 这些类是align-top ， align-middle ， align-bottom和align-stretch 。
If we wanted to align all elements inside the row to be vertically centered, it’s as easy as adding the align-middle class to the row:
如果我们想将行内的所有元素对齐为垂直居中，就像向row添加align-middle类一样简单：
<div class="row align-spaced"> <div class="column small-6"> I am a big big column with heaps of text. My siblings will be positioned in the center of the row based on my height. </div> <div class="column small-6"> I'm going to be vertically centered. </div> </div>It’s pretty cool what you can achieve using the flex grid. Take a look at this demo page if you’re keen on viewing some horizontal and vertical alignments.
使用flex网格可以达到的效果非常酷。 如果您想查看一些水平和垂直对齐方式，请查看此演示页面 。
The Foundation grid is the core component you build to create your responsiveness and it’s a fairly standard grid with support for different widths and layouts based on your device profile.
Foundation网格是您构建以创建响应能力的核心组件，它是一个相当标准的网格，支持基于设备配置文件的不同宽度和布局。
With each version, Zurb have tweaked the way the grid works and overall it’s pretty great. With the push to Foundation 6, they have revised their main mixin to give you more control over how you use their grid system.
在每个版本中，Zurb都调整了网格的工作方式，总体而言，它非常棒。 随着对Foundation 6的推动，他们修改了其主要mixin，以使您可以更好地控制使用网格系统的方式。
Previous versions let you define how many columns your grid system will be based on, giving you the choice to either accept the default 12-column system or to choose another number that suited you. While this was great, ultimately it meant that if you want to use the grid system, you were stuck with the one grid (meaning everything will need to be defined in columns of 12, etc).
以前的版本可让您定义网格系统将基于的列数，从而可以选择接受默认的12列系统或选择另一个适合您的数字。 尽管这很棒，但最终意味着如果您要使用网格系统，则只能使用一个网格(这意味着所有内容都需要在12列中定义，依此类推)。
In Foundation 6, the grid mixin has been updated to let you easily define multiple grid elements, each with its own layout.
在Foundation 6中，网格混合已经更新，可以轻松定义多个网格元素 ，每个网格元素都有自己的布局。
For example you can define a new layout group with 18 columns like this:
例如，您可以定义一个包含18列的新布局组，如下所示：
.row-listing { // row of 18 columns @include grid-row(18) { // primary element, used for page content .primary { @include grid-column(10); } // secondary, used for blog listing .secondary { @include grid-column(4); } // tertiary, used for side advetising .tertiary { @include grid-column(4); } } }This is a solid upgrade to the grid system that will help many people customize their layout exactly the way they want.
这是对网格系统的可靠升级，它将帮助许多人完全按照自己的方式自定义其布局。
The Flex Grid is everything you know and love about the standard Foundation grid, just with more flexibility and control. You can adjust the ordering, horizontal and vertical positioning, along with other useful goodies.
Flex Grid是您对标准Foundation网格了解并喜欢的一切，它具有更大的灵活性和控制力。 您可以调整顺序，水平和垂直位置以及其他有用的东西。
If you can afford to cut off legacy support for ancient browsers such as IE8/IE9 then there isn’t any reason you shouldn’t be using Foundation’s new Flex Grid. It makes development much easier and will help you create really flexible layouts and designs.
如果您有能力切断对IE8 / IE9等旧版浏览器的支持，则没有任何理由不应该使用Foundation的新Flex Grid。 它使开发更加容易，并且将帮助您创建真正灵活的布局和设计。
翻译自: https://www.sitepoint.com/foundation-6-the-new-flex-grid/
css flex 网格布局
