flexbox_了解Foundation 6中的Flexbox网格

最新推荐文章于 2024-10-17 19:11:48 发布

culiu9261

最新推荐文章于 2024-10-17 19:11:48 发布

阅读量155

点赞数

文章标签： java python css tomcat 人工智能

原文链接：https://scotch.io/tutorials/get-to-know-the-flexbox-grid-in-foundation-6

版权

flexbox

Win a Fitbit Flex! The Scotchmas Day 9 giveaway can be found at the end of this article.

赢取Fitbit Flex！ 在本文的结尾可以找到Scotchmas Day 9赠品。

为什么选择Flexbox？ (Why Flexbox?)

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优点的快速概述包括：

Columns automatically resize to container width
列自动调整为容器宽度
Align left, middle, right, or justified
左对齐，中对齐，右对齐或对齐
Align vertically!
垂直对齐！
Display items in any order and reverse on the fly
以任何顺序显示项目并即时反转

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 Visual Guide to CSS3 Flexbox.

有关Flexbox的更多指南，请查看我们的CSS3 Flexbox视觉指南。

Foundation 6 Flexbox网格 (The Foundation 6 Flexbox Grid)

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网格如下所示：

<div class="row">
    <div class="small-4 columns">one-third</div>
    <div class="small-4 columns">one-third</div>
    <div class="small-4 columns">one-third</div>
</div>

These will create a 3-column site.

这些将创建一个3列的站点。

See the Pen Foundation 5 Basic Grid Showcase by Chris Sevilleja (@sevilayha) on CodePen.

请参阅CodePen上的Chris Sevilleja （ @sevilayha ）撰写的Pen Foundation 5 Basic Grid Showcase 。

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，我们可以像这样创建一个网格：

<div class="row">
    <div class="columns">one-third</div>
    <div class="columns">one-third</div>
    <div class="columns">one-third</div>
</div>

Let's dive deeper into the Foundation 6 flexbox grid and play with some more examples.

让我们更深入地研究Foundation 6 flexbox网格，并使用更多示例。

入门 (Getting Started)

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 download your copy of Foundation 6 or @imported when using the Sass version.

当您下载 Foundation 6 的副本或使用Sass版本时@import ed时，flexbox网格必须专门包含在Foundation 6项目中。

00-customize-foundation-6-download-flexbox

Or with the Sass version:

或使用Sass版本：

@import 'foundation';

// @include foundation-grid;
@include foundation-flex-grid;

基本网格 (A Basic Grid)

Like our example above, we can create a grid with three columns like so:

像上面的示例一样，我们可以创建一个包含三列的网格，如下所示：

<div class="row">
    <div class="columns">one-third</div>
    <div class="columns">one-third</div>
    <div class="columns">one-third</div>
</div>

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将填充该空间，并变为四分之一。

<div class="row text-center">
    <div class="small-6 columns">one half</div>
    <div class="columns">one quarter</div>
    <div class="columns">one quarter</div>
</div>

See the Pen Foundation 6 Flexbox - Basics by Chris Sevilleja (@sevilayha) on CodePen.

请参阅CodePen上的Chris Sevilleja （ @sevilayha ）撰写的Pen Foundation 6 Flexbox-基础知识。

仅占用所需的空间 (Only Taking the Space Needed)

If you only want a column to fit its content and not take any more space, you can use the shrink class.

如果只希望一列适合其内容而又不占用更多空间，则可以使用shrink类。

<div class="row text-center">
    <div class="small-6 columns">one half</div>
    <div class="columns">one quarter</div>
    <div class="shrink columns">one quarter</div>
</div>

See the Pen Foundation 6 Flexbox - Shrink by Chris Sevilleja (@sevilayha) on CodePen.

请参阅CodePen上的Chris Sevilleja （ @sevilayha ）撰写的Pen Foundation 6 Flexbox-Shrink 。

堆码 (Stacking)

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没有声明的大小，则不会堆叠。它将仅根据该行中的列数调整大小。

<p class="text-center">No Stacking</p>
<div class="row text-center">
    <div class="columns">space</div>
    <div class="columns">space</div>
    <div class="columns">space</div>
    <div class="columns">space</div>
</div>

See the Pen Foundation 6 Flexbox - Shrink by Chris Sevilleja (@sevilayha) on CodePen.

请参阅CodePen上的Chris Sevilleja （ @sevilayha ）撰写的Pen Foundation 6 Flexbox-Shrink 。

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 ，则此网格将堆叠在小型设备上，并在中型和大型设备上扩展。

<p class="text-center">Stacks on Small</p>
<div class="row text-center">
    <div class="small-12 medium-3 columns">space</div>
    <div class="small-12 medium-3 columns">space</div>
    <div class="small-12 medium-3 columns">space</div>
    <div class="small-12 medium-3 columns">space</div>
</div>

See the Pen Foundation 6 Flexbox - Stack by Chris Sevilleja (@sevilayha) on CodePen.

请参阅CodePen上的Chris Sevilleja （ @sevilayha ）撰写的Pen Foundation 6 Flexbox-Stack 。

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类。不同之处在于我们的列将仅扩展到可用空间，而不仅仅是扩展到我们指定的大小。

<p class="text-center">Stacks on Small</p>
<div class="row text-center">
    <div class="small-12 medium-expand columns">space</div>
    <div class="small-12 medium-expand columns">space</div>
    <div class="small-12 medium-expand columns">space</div>
    <div class="small-12 medium-expand columns">space</div>
</div>

See the Pen Foundation 6 Flexbox - Stack by Chris Sevilleja (@sevilayha) on CodePen.

请参阅CodePen上的Chris Sevilleja （ @sevilayha ）撰写的Pen Foundation 6 Flexbox-Stack 。

对准 (Alignment)

Thanks to flexbox, we can specify whether we want columns to the right, left, center, justified, or spaced out. Check out the align flexbox items section of our visual flexbox guide for more info.

多亏了flexbox，我们可以指定是希望将列向右，向左，居中，对齐还是隔开。请查看我们的可视Flexbox指南中的Align 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

<p class="text-center">Aligned Center</p>
<div class="row align-center text-center">
    <div class="columns small-3">space</div>
    <div class="columns small-3">space</div>
    <div class="columns small-3">space</div>
</div>

See the Pen Foundation 6 Flexbox - Alignment by Chris Sevilleja (@sevilayha) on CodePen.

请参阅CodePen上的Chris Sevilleja （ @sevilayha ）撰写的Pen Foundation 6 Flexbox-Alignment 。

垂直对齐 (Vertical Alignment)

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

<div class="row align-middle text-center">
    <div class="columns">space</div>
    <div class="columns">
      <p>Look I'm a bunch of words. Spoiler alert for Star Wars: Jar Jar Binks is the new sith lord. He is Darth Darth Binks.</p>
    </div>
</div>

See the Pen Foundation 6 Flexbox - Alignment by Chris Sevilleja (@sevilayha) on CodePen.

请参阅CodePen上的Chris Sevilleja （ @sevilayha ）撰写的Pen Foundation 6 Flexbox-Alignment 。

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。

定购 (Ordering)

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网格还提供了几种更改列顺序的方法。我们还可以根据设备尺寸更改顺序。

<div class="row">
  <div class="column order-1 medium-order-2">
    This column will come first on small, and second on medium and larger.
  </div>
  <div class="column order-2 medium-order-1">
    This column will come second on small, and first on medium and larger.
  </div>
</div>

结论 (Conclusion)

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变得更加容易。我们有一组可靠的标准化类，可以利用这些强大的功能将它们放入我们的项目中。