flexbox_使我们的Flexbox网格响应速度更快
flexbox
If you have been following along with this Flexbox grid series you know that in the previous article we created a simple flexbox grid that had columns and offsets, but it wasn't responsive yet and we can't have that right?
如果您一直遵循此Flexbox网格系列，那么您会知道，在上一篇文章中，我们创建了一个具有列和偏移量的简单Flexbox网格，但是它没有响应，我们不能正确吗？
Let's start making this grid responsible so that you can use it in any project you may have.
让我们开始使这个网格负责，以便您可以在任何项目中使用它。
断点 ( The Breakpoints )
In this grid I decided to have three breakpoints, s, m and l , anything above l uses the primary columns and if you remember those were the column classes that had no prefix, like: col-12.
First thing we need to do is set this in our _vars.less so that anyone can change this to fit their project:
在这个网格我决定对3个断点， s ， m和l ，任何超过l使用主列，如果你还记得那些被认为没有前缀，如柱类： col-12 。 我们需要做的第一件事是在_vars.less设置，以便任何人都可以更改此设置以适合他们的项目：
// _vars.less
@s:~"only screen and (max-width: 480px)"; // Small Phones
@m:~"only screen and (max-width: 768px)"; // Normal Phones
@l:~"only screen and (max-width: 1024px)"; // TabletsBasically what you see is all the breakpoints I think you could ever need for mobile but if you believe more are needed, please add your own and name it something you like. You will see how to integrate these breakpoints in a little while.
基本上，您会看到所有我认为移动设备可能需要的断点，但是如果您认为需要更多的断点，请添加自己的断点并命名为喜欢的名称。 您将在短时间内看到如何集成这些断点。
创建循环 ( Creating the loops )
We already created a loop for our non-responsive breakpoints, and it looked like this:
我们已经为无响应的断点创建了一个循环，它看起来像这样：
//_loops.less
// Loop for normal cols
.generateCols(@counter) when (@counter > 0) {
@width: (@counter / @cols ) * 100;
.aaa@qq.com{counter} {
flex-basis: ~"@{width}%";
max-width: ~"@{width}%";
}
.aaa@qq.com{counter} {
margin-left: ~"@{width}%";
}
.generateCols(@counter - 1));
}If you look at the code, you see that in this case the loop takes one argument and that is the column number. That's great for grids that are not responsive, but when you want to create breakpoints you also need to need it to generate the classes with the current breakpoint name, so we will need to create a new loop in our _loops.less and this one will create our responsive columns:
如果看一下代码，您会发现在这种情况下，循环采用一个参数，即列号。 这对于没有响应的网格非常有用，但是当您要创建断点时，还需要使用它来生成具有当前断点名称的类，因此我们将需要在_loops.less创建一个新循环，该循环将创建我们的响应列：
_loops.less
// Create the responsive loops that also takes the media as an argument
// this media is our breakpoints
.generateResponsiveCols(@counter, @media) when (@counter > 0) {
// In here we define the width
// and this will be the number of the column we are in divided by the number of columns we have.
// Imagine this is column 6 and this will give us 0.5 and if multiply it by 100 we will get 50%
@width: (@counter / @cols ) * 100;
// we used to only have aaa@qq.com{counter} but now that we added the media param
// we insert it here so that it creates classses like .col-s-10 and we can use this in our grid
.aaa@qq.com{media}aaa@qq.com{counter} {
flex-basis: ~"@{width}%";
max-width: ~"@{width}%";
}
// Create our resposnive offset classes
.aaa@qq.com{media}aaa@qq.com{counter} {
margin-left: ~"@{width}%";
}
// Decrease the counter by one so we don't have an infinite loop
// and also pass it the media so that it generates the next loop
.generateResponsiveCols((@counter - 1), @media);
}So we have our loops, and they will generate all our desired classes, but we still need to call these loops for them to create the classes we need so now we move to our _grid.less and create all the media queries we need, and inside each of them we call our generateResponsiveCols mixin and pass it the number of columns and our current breakpoint.
因此，我们有了循环，它们将生成我们所需的所有类，但是我们仍然需要为它们调用这些循环以创建所需的类，因此现在移至_grid.less并创建所需的所有媒体查询，并且在它们每个内部，我们称为generateResponsiveCols mixin，并向其传递列数和当前断点。
_grid.less
.row,
.column {
...
@media @l {
// Call our large columns
.generateResponsiveCols(@cols, l);
}
@media @m {
// Call our medium columns
.generateResponsiveCols(@cols, m);
}
@media @s {
// Call our small columns
.generateResponsiveCols(@cols, s);
}
}Now if you run gulp less in your console and open up our HTML you should be able to see our responsive columns at work.
If you resize, you will find that they behave according to the breakpoint you are currently viewing on the browser.
现在，如果您在控制台中gulp less运行gulp less并打开我们HTML，则应该可以看到我们的响应列在起作用。 如果调整大小，您会发现它们的行为与您当前在浏览器上查看的断点有关。
电话检视 (Phone View)
iPad纵向视图 (iPad portrait view)
iPad横向视图 (iPad landscape view)
So we got our responsive classes working great, but we are still missing one thing, a crucial part in any responsive grid is the ability to hide columns by the size of the screen, and as you can see by our phone view this is not happening yet, and it's time to add it.
For simplicity I will call these classes col-s-hidden, .col-m-hidden, col-l-hidden, .col-hidden to cover all our column names and breakpoints.
Adding these classes should be relatively easy since all we need to do is hide the desired column in the correct breakpoint. But something like this is better explained through code:
因此，我们的响应式类可以很好地工作，但是我们仍然缺少一件事，任何响应式网格中的关键部分是能够按屏幕大小隐藏列，正如您通过电话视图可以看到的那样，这没有发生现在，该添加它了。 为简单起见，我将这些类称为col-s-hidden ， .col-m-hidden ， col-l-hidden ， .col-hidden以涵盖我们所有的列名和断点。 添加这些类应该相对容易，因为我们要做的就是将所需的列隐藏在正确的断点中。 但是这样的事情可以通过代码更好地解释：
// grid.less
@media @l {
.generateResponsiveCols(@cols, l);
// hide any element that has the class col-l-hidden
.col-l-hidden {
display: none;
}
// show all the other hidden elements that were meant for other breakpoints
.col-s-hidden,
.col-m-hidden,
.col-hidden {
display: block;
}
}All we did here was hide the column that matched the breakpoint and show all the other columns since those that did not match the breakpoint. Now that we saw how to add these classes let's do the same for all the other breakpoints:
我们在这里所做的只是隐藏与断点匹配的列，并显示所有其他与断点不匹配的列。 现在，我们看到了如何添加这些类，让我们对所有其他断点执行相同的操作：
// grid.less
.row,
.column {
....
// Aply hidden classes to the "primary" columns
.col-s-hidden,
.col-m-hidden,
.col-l-hidden {
display: block;
}
.col-hidden {
display: none;
}
// add hidden classes to our l breakpoint
@media @l {
.generateResponsiveCols(@cols, l);
.col-s-hidden,
.col-m-hidden,
.col-hidden {
display: block;
}
.col-l-hidden {
display: none;
}
}
// add hidden classes to our m breakpoint
@media @m {
.generateResponsiveCols(@cols, m);
.col-s-hidden,
.col-l-hidden,
.col-hidden {
display: block;
}
.col-m-hidden {
display: none;
}
}
// add hidden classes to our s breakpoint
@media @s {
.generateResponsiveCols(@cols, s);
.col-m-hidden,
.col-l-hidden,
.col-hidden {
display: block;
}
.col-s-hidden {
display: none;
}
}
}Now if you reload our index.html and use a small screen size you will see something like:
现在，如果您重新加载index.html并使用较小的屏幕尺寸，您将看到类似以下内容：
That's it for the responsive part of our grid, as you could see since we already had the foundation from our previous loops doing this part was a breeze.
正如我们看到的那样，对于网格的响应部分就是这样，因为我们已经有了之前循环中的基础，因此轻而易举。
添加助手类 ( Adding Helper Classes )
Something that I appreciate to see in any grid or CSS framework is helper classes. What I mean by helper classes is anything that helps me align the elements according to how I want to see them in that container.
With flex, we can do this easily using align-items and justify-content so let's add some horizontal alignment to our grid:
我很高兴在任何网格或CSS框架中看到的东西是帮助程序类。 助手类的意思是可以帮助我根据希望在容器中看到它们的方式对齐元素的任何内容。 使用flex，我们可以使用align-items和justify-content轻松地做到这一点，因此让我们向网格中添加一些水平对齐方式：
// grid.less
.container {
....
.justify-center {
justify-content: center;
}
.justify-end {
justify-content: flex-end;
}
.justify-start {
justify-content: flex-start;
}
.justify-around {
justify-content: space-around;
}
.justify-between {
justify-content: space-between;
}
}if you try to add one of these classes to our columns, you will see that it does indeed work, but the problem is that if you try to add this to the ul for example, it won't do anything because the ul is not a flex container.
We need to make sure that we always set elements that have a class that includes justify- to display: flex and to do something like that we add this before defining our justify classes:
如果您尝试将这些类之一添加到我们的列中，则会看到它确实可以工作，但是问题是，例如，如果您尝试将其添加到ul中，它将不会执行任何操作，因为ul不是一个伸缩容器。 我们需要确保始终设置包含具有justify-的类的元素来display: flex并执行类似的操作，然后在定义justify类之前添加以下内容：
// grid.less
[class*="justify-"] {
display: flex;
}And now we have fully working justify classes for all our horizontal alignment needs. You may be wondering where our vertical alignment classes are seeing that those are the tricky ones to do without flex, well to have our vertical we need to add this:
现在，我们已经为所有水平对齐需求充分使用了证明类。 您可能想知道我们的垂直对齐类在哪里看到这些是没有flex的棘手的事情，要使我们的垂直对齐，我们需要添加以下内容：
// grid.less
.container {
....
[class*="items-"] {
display: flex;
}
.items-center {
align-items: center;
}
.items-start {
align-items: flex-start;
}
.items-end {
align-items: flex-end;
}
.items-stretch {
align-items: stretch;
}
}And voilá we got some pretty good helper classes to add to our grid and help us align all our elements. If there are some other classes, you feel like you need to improve your grid like margin and padding classes feel free to add them in this file, for me, these are the crucial ones to have on any grid.
而且，我们有一些非常好的帮助程序类可以添加到网格中，并帮助我们对齐所有元素。 如果还有其他类，您会感觉需要像边距和填充类这样的地方来改进网格，可以随意将它们添加到此文件中，对我来说，这些是任何网格上都必须具备的关键类。
结论 ( Conclusion )
As you can see creating a fully fledged grid using Less and flexbox is not as daunting of a task as you may have thought and that's because like in any programming task all you need to do is divide a large project into smaller less daunting tasks and start coding away.
如您所见，使用Less和flexbox创建完整的网格并不像您想象的那样艰巨，这是因为像在任何编程任务中一样，您需要做的就是将一个大型项目划分为一些较小的，不那么艰巨的任务并开始编码掉。
I hope these tutorials helped you get a better grasp of Less loops and also made you have some love for it if you didn't already.
我希望这些教程可以帮助您更好地了解Less循环，并让您对此有所了解。
I will be releasing this as an open source grid for everyone to use shortly but in the meantime, you can see it on Github and let me know your feedback and of course hack my repository away.
我将把它作为一个开放源代码网格发布，供所有人使用，但是与此同时，您可以在Github上看到它，并让我知道您的反馈，当然也可以破坏我的存储库。
翻译自: https://scotch.io/tutorials/making-our-flexbox-grid-responsive
flexbox