本文共 7869 字，大约阅读时间需要 26 分钟。
flexbox
Win a Fitbit Flex! The can be found at the end of this article.
赢取Fitbit Flex！ 在本文的结尾可以找到 。
Flexbox is a brilliant CSS feature that's been around for a while now that allows CSS grids to be made with ease.
Flexbox是一项出色CSS功能，已经存在了一段时间，可以轻松制作CSS网格。
A quick overview of the benefits of flexbox include:
Flexbox优点的快速概述包括：
The best part about flexbox is that you can add columns and all the columns will automatically resize themselves to the parent container. No more declaring widths of 33.3% or some other random number.
关于flexbox最好的部分是您可以添加列，所有列将自动调整其大小到父容器。 不再声明宽度为33.3％或其他一些随机数。
For more of a guide on flexbox, take a look at our .
有关Flexbox的更多指南，请查看我们的 。
While it's very easy to use flex items in your own projects, it is also good to have a standardized grid to work with. Foundation 6 brings with it a new flexbox grid to help make our lives as developers easier.
虽然在您自己的项目中使用flex项目非常容易，但是使用标准化的网格也很好。 Foundation 6带有一个新的flexbox网格，有助于使我们的开发人员生活更加轻松。
The Foundation 5 grid looks something like this:
Foundation 5网格如下所示：
one-thirdone-thirdone-third
These will create a 3-column site.
这些将创建一个3列的站点。
See the Pen by Chris Sevilleja () on .
请参阅上的Chris （ ） 的Pen 。
If we wanted to add another column, we'd add another and switch up all the small-4 classes to be small-3.
如果要添加另一列，我们将添加另一列并将所有small-4类切换为small-3 。
Wouldn't it be great if we could just add a column and know that it will automatically get its own space? With Foundation 6 and flexbox, we could create a grid like so:
如果我们可以添加一个列并知道它会自动获得自己的空间，那不是很好吗？ 使用Foundation 6和flexbox，我们可以像这样创建一个网格：
one-thirdone-thirdone-third
Let's dive deeper into the Foundation 6 flexbox grid and play with some more examples.
让我们更深入地研究Foundation 6 flexbox网格，并使用更多示例。
By default, Foundation 6 comes bundled with the original grid (non-flexbox version).
默认情况下，Foundation 6与原始网格捆绑在一起（非flexbox版本）。
The flexbox grid has to be specifically included in your Foundation 6 project when you of Foundation 6 or @imported when using the Sass version.
当您 Foundation 6 或使用Sass版本时@import ed时，flexbox网格必须专门包含在Foundation 6项目中。
Or with the Sass version:
或使用Sass版本：
@import 'foundation';// @include foundation-grid;@include foundation-flex-grid;
Like our example above, we can create a grid with three columns like so:
像上面的示例一样，我们可以创建一个包含三列的网格，如下所示：
one-thirdone-thirdone-third
We can also use syntax that is exactly the same as the normal Foundation grid to declare the size of a grid column. The cool thing is that if we don't declare a size for a columns, then it will automatically fill the space that is left.
我们还可以使用与普通Foundation网格完全相同的语法来声明网格列的大小。 很棒的事情是，如果我们不为columns声明大小，那么它将自动填充剩余的空间。
For instance, let's declare the first column as half of the row with small-6. The other two columns will fill the space and become one quarter each.
例如，让我们将第一列声明为带有small-6的行的一半。 其他两columns将填充该空间，并变为四分之一。
one halfone quarterone quarter
See the Pen by Chris Sevilleja () on .
请参阅的Chris （ ） 的Pen 。
If you only want a column to fit its content and not take any more space, you can use the shrink class.
如果只希望一列适合其内容而又不占用更多空间，则可以使用shrink类。
one halfone quarterone quarter
See the Pen by Chris Sevilleja () on .
请参阅的Chris （ ） 的Pen 。
Flexbox has many ways to stack/wrap content when working across multiple device sizes. Like the original grid, you have the ability to stack at certain sizes with classes like small-*, medium-*, and large-*.
当跨多种设备尺寸工作时，Flexbox有多种方法来堆叠/包装内容。 像原始网格一样，您可以按一定的大小堆叠诸如small-* ， medium-*和large-* 。
If a columns doesn't have a declared size, then it will not stack. It will just keep resizing with the number of columns in that row.
如果columns没有声明的大小，则不会堆叠。 它将仅根据该行中的列数调整大小。
No Stacking
spacespacespacespace
See the Pen by Chris Sevilleja () on .
请参阅的Chris （ ） 的Pen 。
If we set the class small-12 medium-3, then this grid will stack on small devices and expand on medium and large devices.
如果将类别设置为small-12 medium-3 ，则此网格将堆叠在小型设备上，并在中型和大型设备上扩展。
Stacks on Small
spacespacespacespace
See the Pen by Chris Sevilleja () on .
请参阅的Chris （ ） 的Pen 。
Another method we can use for stacking is the medium-expand and large-expand classes. The difference is that our columns will just expand to the space available, not just expand to a size we specify.
我们可以用于堆叠的另一种方法是medium-expand large-expand类和large-expand类。 不同之处在于我们的列将仅扩展到可用空间，而不仅仅是扩展到我们指定的大小。
Stacks on Small
See the Pen by Chris Sevilleja () on .
请参阅的Chris （ ） 的Pen 。
Thanks to flexbox, we can specify whether we want columns to the right, left, center, justified, or spaced out. Check out the section of our visual flexbox guide for more info.
多亏了flexbox，我们可以指定是希望将列向右，向左，居中，对齐还是隔开。 请查看我们的可视Flexbox指南中的部分，以获取更多信息。
You can just add one of the following classes to your row class to move your columns.
您可以将以下类之一添加到row类中以移动列。
align-right align-right align-center align-center align-justify align-justify align-spaced align-spaced Aligned Center
spacespacespace
See the Pen by Chris Sevilleja () on .
请参阅的Chris （ ） 的Pen 。
One of the coolest parts of flexbox is vertical alignment. There are many hacks in CSS to get vertical alignment, but now it is built in natively thanks to flexbox.
flexbox最酷的部分之一是垂直对齐。 CSS中有很多技巧可以实现垂直对齐，但是现在它是内置在本地的，这要归功于flexbox。
Use one of the following classes on your row or your columns divs.
row或columns div上使用以下类别之一。
align-top align-top align-middle align-middle align-bottom align-bottom align-stretch align-stretch Remember that horizontal alignment uses align-center while vertical alignment uses align-middle
请记住，水平对齐方式使用align-center ，垂直对齐方式使用align-middle
spaceLook I'm a bunch of words. Spoiler alert for Star Wars: Jar Jar Binks is the new sith lord. He is Darth Darth Binks.
See the Pen by Chris Sevilleja () on .
请参阅的Chris （ ） 的Pen 。
You also have the ability to specify these classes on a columns instead of on the row. So you could have a stretched div sitting next to a middle aligned div.
您还可以在columns而不是row上指定这些类。 因此，您可以在中间对齐的div旁边放置一个拉伸的div。
The Foundation flexbox grid also comes with a few ways to change up the order of your columns. We can also change up the order depending on the device size.
Foundation flexbox网格还提供了几种更改列顺序的方法。 我们还可以根据设备尺寸更改顺序。
This column will come first on small, and second on medium and larger.This column will come second on small, and first on medium and larger.
The new Foundation 6 flexbox grid makes it that much easier to work with flexbox. We have a solid and standardized set of classes that we can drop into our projects to take advantage of this powerful feature.
新的Foundation 6 flexbox网格使使用flexbox变得更加容易。 我们有一组可靠的标准化类，可以利用这些强大的功能将它们放入我们的项目中。
Win a Fitbit Flex!
赢取Fitbit Flex！
翻译自:
flexbox
转载地址：http://scywd.baihongyu.com/