中英文模式阅读
中文模式阅读
英文模式阅读

This article will cover all the fundamental concepts you need to get good with the CSS Flexbox model. It's a long one, so I hope you're ready for it.
本文将介绍使用CSS Flexbox模型获得好处所需的所有基本概念。这是一个很长的,所以我希望你已经准备好了。

If you prefer to read the entire tutorial in a single .pdf document, here's the
如果您希望在单个.pdf文档中阅读整个教程,请参阅download link--- no strings attached, & if you want a more immersive experience, use
---没有任何附加条件,如果你想要更加身临其境的体验,请使用the interactive course
--- it is free. No strings attached.

A note on Flexbox's learning curve {#a-note-on-flexbox-s-learning-curve}

Here's a tweet from Philip Roberts, a developer whom I respect very much:
这是Philip Roberts发来的一条推文,我非常尊重这位开发人员:

Learning Flexbox may not be fun at first. It will challenge what you know about layouts in CSS. But that's fine. Everything worth learning begins that way.
学习Flexbox一开始可能并不好玩。它将挑战你对CSS中布局的了解。但那没关系。值得学习的一切都是这样开始的。

Flexbox is certainly something you should take seriously. It paves the way for the modern style of laying out content, and it's not going away anytime soon. It has emerged as a new standard. So with outstretched arms, embrace it!
Flexbox当然是你应该认真对待的东西。它为现代的布局内容铺平了道路,并且它不会很快消失。它已成为一种新标准。所以伸出双臂,拥抱它!

What you'll learn {#what-you-ll-learn}

I'll first walk you through the basics of Flexbox. I believe any attempt at understanding Flexbox must begin here.
我将首先向您介绍Flexbox的基础知识。我相信任何理解Flexbox的尝试都必须从这里开始。 Flexbox fundamentals
Flexbox基础知识

Learning the fundamentals is cool. What's even cooler is applying these fundamentals to build real-world apps.
学习基础知识很酷。更酷的是应用这些基础知识来构建真实世界的应用程序。

I'll walk you through building a lot of "small things." Afterwards, I'll wrap things up with this music app completely laid out with Flexbox.
我会引导你建造很多"小东西"。之后,我将用这个完全由Flexbox布局的音乐应用程序进行整理。 Music app layout
音乐应用布局

Doesn't that look pretty?
这看起来不漂亮吗?

I'll get into the inner workings of Flexbox while you learn to build the music app layout. You'll also get a feel for the role Flexbox plays in responsive web design, too.
当您学习构建音乐应用程序布局时,我将深入了解Flexbox的内部工作原理。您还可以了解Flexbox在响应式网页设计中的作用。

I'm excited to show you all this.
我很高兴向您展示这一切。 GIF by
GIF由Jona Dinges

But before you get started building user interfaces, I'm going to walk you through some drills, first. This may seem boring, but it's all part of the process of getting you adept at Flexbox.
但在开始构建用户界面之前,我将首先引导您完成一些练习。这可能看起来很无聊,但这都是让你熟练掌握Flexbox的过程的一部分。

Let's get started.
让我们开始吧。

Introduction {#introduction}

CSS has evolved a lot over the past few years. Designers loved the introduction of filters, transitions, and transforms. But something was missing. Something we all craved.
CSS在过去几年中发展了很多。设计人员喜欢引入滤波器,转换和变换。但缺少一些东西。我们都渴望的东西。

Crafting Intelligent page layouts with CSS seemed to have persisted for too long, and this got many of us writing hacky CSS.
使用CSS制作智能页面布局似乎已经持续了太长时间,这让我们很多人编写了hacky CSS。

We always had to deal with floats, table display hacks, and the consequences they brought. If you've written CSS for sometime, you can probably relate to this. And if not, welcome to a better world!
我们总是不得不处理浮动,桌面展示黑客以及它们带来的后果。如果你已经写了一段时间,你可能会与此有关。如果没有,欢迎来到一个更美好的世界!

It seems like our prayers as designers and front-end developers have finally been heard. This time, in grand style.
看起来我们的祈祷作为设计师和前端开发人员终于被听到了。这一次,盛大的风格。

Now we can all ditch those hacky CSS tricks. No more incessant use of floats, table-cell displays.
现在我们都可以放弃那些hacky CSS技巧。不再使用浮子,台式电池显示器。

It's time to embrace a cleaner modern syntax for crafting intelligent layouts. Welcome the CSS Flexbox model.
现在是时候采用更清晰的现代语法来制作智能布局。欢迎使用CSS Flexbox模型。

What Is Flexbox? {#what-is-flexbox}

According to the specification, the Flexbox model provides for an efficient way to layout, align, and distribute space among elements within your document --- even when the viewport and the size of your elements is dynamic or unknown.
根据规范,Flexbox模型提供了一种在文档中元素之间布局,对齐和分配空间的有效方法 - 即使视口和元素的大小是动态的还是未知的。

If that sounds too formal, I understand the feeling. In just a bit, I'll explain what that means in plain English.
如果这听起来太正式,我理解这种感觉。稍等一下,我将用简单的英语解释这意味着什么。

Whether you write CSS in your dreams, or you're just getting started, you'll feel right at home.
无论您是在梦中编写CSS,还是刚开始使用CSS,您都会感到宾至如归。

How do I start using the Flexbox model? {#how-do-i-start-using-the-flexbox-model}

This is the first question everyone asks, and the answer is much simpler than you may have expected.
这是每个人都提出的第一个问题,答案比你想象的要简单得多。

To start using the Flexbox model, all you need to do is first define a
要开始使用Flexbox模型,您需要做的就是首先定义一个 flex-container.

In regular HTML, laying out a simple list of items takes this form:
在常规HTML中,布局一个简单的项目列表采用以下形式:

<ul> <!--parent element-->  <li></li> <!--first child element-->  <li></li> <!--second child element-->  <li></li> <!--third child element--></ul>

If you glanced at that, you must have seen that the unordered list (
如果你看了一眼,你必须看到无序列表(ul) houses the list elements(
容纳列表元素(li).
)。

You'd call the
你打电话给ul the
parent element, and the
元素,和li the
child element.
元件。

To use the Flexbox model, you must make a parent element a flex container (AKA
要使用Flexbox模型,必须将父元素设置为Flex容器(AKA flexible container ).
)。

You do this by setting
你可以通过设置来完成display: flex or
要么display: inline-flex for the inline variation. It's that simple, and from there you're all set to use the Flexbox model.
对于内联变体。就这么简单,从那里你就可以使用Flexbox模型了。

What actually happens is, a Flexbox formatting context is immediately initiated.
实际发生的是,立即启动Flexbox格式化上下文。

Told you it wasn't as difficult as you expected.
告诉你,它没有你想象的那么困难。

Using an unordered list and a bunch of list elements, below is what initiating a Flexbox formatting context looks like.
使用无序列表和一堆列表元素,下面是启动Flexbox格式化上下文的内容。

/*Make parent element a flex container*/ul {  display: flex; /*or inline-flex*/}

Style the list items just a bit, so you may see what's going on here.
对列表项进行一些设置样式,这样您就可以看到这里发生了什么。

li {  width: 100px;  height: 100px;  background-color: #8cacea;  margin: 8px;}

Here is what you should have:
这是你应该拥有的: Flexbox activated
Flexbox已激活

You may not have noticed, but something has happened already. The Flexbox formatting context is now initiated.
你可能没有注意到,但已经发生了一些事情。现在启动Flexbox格式化上下文。

Remember that 'li' elements are by nature block elements, which means they stack vertically, and this applies for other CSS block elements, such as 'div'.
请记住,&#39;li&#39;元素本质上是块元素,这意味着它们是垂直堆叠的,这适用于其他CSS块元素,例如&#39;div&#39;。 Default viewing for 'divs'
默认查看&#39;divs&#39;

The image above is the result you may have hoped for.
上图是您可能希望得到的结果。

However, with the inclusion of that simple one-liner,
但是,加上那个简单的单线程,display:flex, you can immediately see a change in layout.
,你可以立即看到布局的变化。

The list elements are now stacked horizontally, from left to right. Just like they would if you used
列表元素现在从左到右水平堆叠。就像你使用它们一样 float.
Flexbox enabled
Flexbox已启用

The Flexbox model kicks in as soon as you introduce the "
一旦您介绍"Flexbox模型"就会启动 flex display" on any parent element.
在任何父元素上。

You may not understand why that change in the orientation of the list elements came to be. I promise I'll go into the inner workings of that very soon. For now, blind trust would suffice.
您可能无法理解为什么列表元素的方向发生了变化。我保证很快就会进入那种内部运作。目前,盲目信任就足够了。

Understanding that the inclusion of the "
理解包含" flex display" starts off the Flexbox model.
从Flexbox模型开始。

There's one more thing I need to call your attention to.
还有一件事我需要引起你的注意。

As soon as you set the display property to flex, the unordered list automatically becomes the
只要将display属性设置为flex,无序列表就会自动成为 flex container and the child elements (in this case, the list elements
和子元素(在这种情况下,列表元素li) become
成为 flex items .

These terms would come up over and over again as I walk you through some more interesting things the Flexbox model has in place.
当我向您介绍Flexbox模型所具有的一些更有趣的内容时,这些术语会一次又一次地出现。

I've used two key words, and I'd like to lay more emphasis on them. They are vital to understanding what lies ahead.
我用了两个关键词,我想更加重视它们。它们对于理解未来的发展至关重要。

  1. Flex container : The parent element you've set display: flex on.
  2. Flex items : The children elements within a Flex container.

This is the foundation for using the Flexbox model.
这是使用Flexbox模型的基础。

The Flex Container Properties {#the-flex-container-properties}

Flex-direction || Flex-wrap || Flex-flow || Justify-content || Align-items || Align-content

In the section above, I established some fundamental principles. What flex-containers and flex-items are, and how to initiate the Flexbox model.
在上面的部分中,我建立了一些基本原则。什么是flex-container和flex-items,以及如何启动Flexbox模型。

Now is a good time to put all of that to good use.
现在是将所有这些充分利用的好时机。

Having set a parent element as a flex container, a couple of alignment properties are made available to be used on the flex container.
将父元素设置为Flex容器后,可以在Flex容器上使用几个对齐属性。

Just like you'd define the width property on a block element as
就像你在块元素上定义width属性一样width: 200px, there are 6 different properties the flex container can take on.
,flex容器可以采用6种不同的属性。

The good news is that defining these properties doesn't require a different approach from what you're already used to.
好消息是,定义这些属性并不需要采用与您已习惯的方法不同的方法。

1. Flex-direction {#1-flex-direction}

The
Flex-direction property controls the direction in which the flex-items are laid along the
property控制flex项目沿着方向放置的方向 main axis .

It may take any of four values.
它可能需要四个值中的任何一个。

/*where ul represents a flex container*/ul {  flex-direction: row || column || row-reverse || column-reverse;  }

In layman's terms, the
用外行人的话说,flex-direction property let's you decide how the flex items are laid out. Either
属性让你决定如何布置弹性项目。或 horizontally ,
vertically or
要么 reversed in both directions.
在两个方向。

Technically, "
从技术上讲," horizontal " and "
"和" vertical " isn't what the directions are called in the
"这不是所谓的方向 "flex world" .

These are described as
这些被描述为 main-axis and
cross axis. The defaults are shown below.
默认值如下所示。

In layman's terms again, the main-axis' default direction feels like "
再次以外行人的话说,主轴的默认方向感觉就像" horizontal. " From left to right.
" 从左到右。

The cross-axis feels like "
横轴感觉就像" vertical. " From top to bottom.
" 从上到下。

By default, the
默认情况下flex-direction property is set to
属性设置为row and it aligns the flex-item(s) along the main axis. This explains what happened with the unordered list at the start of this article.
并且它沿主轴对齐柔性项目。这解释了本文开头的无序列表发生了什么。

Even though the
即便如此flex-direction property wasn't explicitly set, it took on the default value of
属性未显式设置,它采用默认值row.

The flex items were then laid across the main-axis, stacking horizontally from left to right.
然后将柔性物品铺设在主轴上,从左到右水平堆叠。 flex-items stacked across the main-axis
柔性物品堆叠在主轴上

If the
如果flex-directionproperty is changed to
财产改为column, the flex-items will be aligned along the cross axis.
flex项目将沿横轴对齐。

They would stack from top to bottom, not from left to right any longer.
它们将从上到下堆叠,而不是从左到右堆叠。 flex-items stacked across the cross-axis
横跨轴堆叠的柔性物品

2. Flex-wrap {#2-flex-wrap}

The flex-wrap property can take on any of three values:
flex-wrap属性可以采用以下三个值中的任何一个:

//where ul represents a flex containerul {  flex-wrap: wrap || nowrap || wrap-reverse;  }

I'll explain how the
我会解释一下flex-wrap property works by walking you through an example.
物业的工作原理通过一个例子来指导你。

Try sticking a lot more list items into the unordered list.
尝试将更多列表项添加到无序列表中。

What do you think? Will the flex container resize to accommodate more, or will it break up the list items unto another line?
你怎么看? flex容器会调整大小以容纳更多,还是会将列表项拆分为另一行?

/*adding 3 more li elements*/<ul> <!--parent element-->  <li></li> <!--first child element-->  <li></li> <!--second child element-->  <li></li> <!--third child element-->  <li></li>  <li></li>  <li></li></ul>

Fortunately, the flex-container adapts to accommodate the new flex-items
幸运的是,flex-container适应新的flex-items 3 more flex-items added to the unordered list
另外3个flex-items添加到无序列表中

Go a bit further.
走得更远。

Add a ridiculous amount of flex-items to the parent element. Make it a total of 10 items.
向父元素添加一些荒谬的flex项。共计10项。

What happens?
怎么了? After adding even more list-items
添加更多列表项后

Again, the flex container adapts to fit all children in, even if the browser needs to be scrolled horizontally.
同样,即使浏览器需要水平滚动,Flex容器也能适应所有孩子。

This is the default behavior of every flex container. A flex container will keep on accommodating more flex items on a single line.
这是每个Flex容器的默认行为。一个弹性容器将继续在一条线上容纳更多的柔性物品。

This is because the
这是因为flex-wrap property defaults to
属性默认为nowrap. This causes the flex container to NOT wrap.
。这会导致Flex容器不会换行。

ul {    flex-wrap: nowrap;     /*Keep on taking more flex items without breaking (wrapping)*/}

The
no-wrap isn't a iron-clad value. It can be changed.
不是铁的价值。它可以改变。

With that number of flex-items, you certainly want the flex-items to "
有了这么多的flex项,你当然希望flex-items能够" wrap" within the flex-container.
在flex容器中。

"Wrap" is a fancy word to say, "when the available space within the flex-container can no longer house the flex-items in their default widths, break unto multiple lines.
"Wrap"是一个奇特的词,"当flex-container中的可用空间不能再以其默认宽度容纳flex-items时,可以打破多行。

This is possible with the
这是可能的wrapvalue.
值。

ul {    flex-wrap: wrap;}

With this, the flex-items now break up into multiple lines when needed.
有了这个,flex-items现在可以在需要时分成多行。

In this case, when a single line can no longer contain all the list items in their default width, they break up into multiple lines. Even on resizing the browser.
在这种情况下,当一行不能再包含其默认宽度的所有列表项时,它们会分成多行。即使在调整浏览器大小。

Here's what that looks like.
这就是它的样子。

Note that the flex items are now displayed in their default widths. There's no need to force multiple flex items unto one line.
请注意,弹性项目现在以默认宽度显示。不需要将多个弹性项强制为一行。 flex-wrap initiated
flex-wrap已启动

There's one more value,
还有一个价值,wrap-reverse.

Yes, you guessed right. It lets the flex items break unto multiple lines, but in the reverse direction.
是的,你猜对了。它允许弹性项目突破多行,但反向。 flex-items wrap in reverse
flex-items包装相反

3. Flex-flow {#3-flex-flow}

The
flex-flow is a shorthand property which takes
是一个简写的属性flex-direction and
Flex-wrap values.
值。

Ever used the
曾经使用过border shorthand property?
速记财产?border: 1px solid red.

It's the same concept here. Multiple values declared in one line.
这是相同的概念。在一行中声明的多个值。

See the example below.
请参阅下面的示例。

ul {    flex-flow: row wrap; /*direction "row" and yes, please wrap the items.*/}

flex-flow broken down in bits
flex-flow分解成碎片

Try out the other combinations this could take.
试试这可能采取的其他组合。flex-flow: row nowrap,
flex-flow: column wrap,
flex-flow: column nowrap

The results produced are not different from what you've seen with the
产生的结果与您所看到的结果没有什么不同flex-direction and
flex-wrap values.
值。

I'm sure you understand what those would produce.
我相信你明白那会产生什么。

Give them a try.
试一试。

4. Justify-content {#4-justify-content}

Life's really good with the Flexbox model. If you still doubt that, the
Flexbox模型的生活非常好。如果你仍然怀疑,那justify-content property may convince you.
财产可能会说服你。

The
justify-content property takes on any of the 5 values below.
property取以下5个值中的任何一个。

ul {    justify-content: flex-start || flex-end || center || space-between || space-around}

And what exactly does the
究竟是什么呢justify content property bring to the table?
物业带来了什么?

Well, It may remind you of the text-align property.
好吧,它可能会提醒你text-align属性。

The justify content property defines how flex items are laid out on the
justify内容属性定义了如何在其上布置弹性项目 main axis .

A quick example.
一个简单的例子。

Consider the simple unordered list below.
考虑下面简单的无序列表。

<ul>  <li>1</li>  <li>2</li>  <li>3</li></ul>

Add up some basic styling.
添加一些基本样式。

ul {    border: 1px solid red;    padding: 0;    list-style: none;    background-color: #e8e8e9;  }

li {      background-color: #8cacea;      width: 100px;      height: 100px;      margin: 8px;      padding: 4px;  }

You should have this:
你应该这样: default view after "initiating" flexbox
"启动"flexbox后的默认视图

With the
随着justify-content property, the three flex-items may be aligned across the main-axis in whatever way you desire.
,三个柔性物品可以以您想要的任何方式在主轴上对齐。

Here's the breakdown of what's possible.
这是可能的细分。

(i) Flex-start {#-i-flex-start}

The default value is
默认值为flex-start.

flex-start groups all flex-items to the
将所有flex-items分组到 start of the main axis.
主轴。

ul {    justify-content: flex-start;  }

justify-content: flex-start (default behavior)
justify-content:flex-start(默认行为)

(ii) Flex-end {#-ii-flex-end}

flex-end groups the flex-items to the
将flex-items分组到 end of the main axis.
主轴。

ul {    justify-content: flex-end;  }

justify-content: flex-end
justify-content:flex-end

(iii) Center {#-iii-center}

Center does just what you'd expect: it centers the flex items along the main axis.
可以满足您的期望:它将Flex项目沿主轴居中。

ul {    justify-content: center;  }

justify-content: center
辩解内容:中心

(iv) Space-between {#-iv-space-between}

Space-between keeps the same space between each flex item.
在每个弹性项目之间保持相同的空间。

ul {    justify-content: space-between;  }

justify-content: space-between
辩解内容:间隔

Um, did you notice anything different here?
嗯,你注意到有什么不同吗?

Take a look at the descriptive image below.
看一下下面的描述性图片。

(v) Space-around {#-v-space-around}

Finally,
最后,space-around keeps the same spacing around flex items.
在flex项目周围保持相同的间距。

ul {    justify-content: space-around;  }

justify-content: space-around
辩解内容:空间

A second look doesn't hurt.
第二眼看起来没有伤害。

See the descriptive image below.
请参阅下面的描述性图片。

Don't worry if these seem like too much to get a hold of. With a bit of practice you will get very comfortable with the syntax.
不要担心,如果这些似乎太过分了。通过一些练习,您将对语法非常熟悉。

Be sure to understand how they affect the display of flex items along the main axis.
请务必了解它们如何影响沿主轴的柔性项目的显示。

5. Align-items {#5-align-items}

The
align-items property is somewhat similar to the
财产有点类似于justify-content property.
属性。

Having understood the
了解了justify-content property, this should be easier to take in.
财产,这应该更容易接受。

Align-items can be set to any of these values:
可以设置为以下任何值:flex-start || flex-end || center || stretch || baseline

/*ul represents any flex container*/ul {    align-items: flex-start || flex-end || center || stretch || baseline}

It defines how flex-items are laid out on the
它定义了flex-items的布局方式 cross axis . This is the difference between the
。这是之间的区别align-items property and
财产和justify-content.

Below is how the different values affect flex items.
以下是不同值对Flex项目的影响。

Do not forget the direction being affected by these properties. The cross-axis.
不要忘记受这些属性影响的方向。横轴。

(i) Stretch {#-i-stretch}

The default value is
默认值为stretch. This will "
这将 " stretch" the flex-items so they fill the entire height of the flex container.
flex-items使它们填充flex容器的整个高度。 align-items: stretch
align-items:拉伸

(ii) Flex-start {#-ii-flex-start}

The
flex-start does what you expect. It groups the flex items to the start of the cross-axis.
做你期望的。它将弹性项目分组到横轴的起点。 align-items: flex-start
align-items:flex-start

(iii) Flex-end {#-iii-flex-end}

As expected,
正如所料,flex-end groups the flex items to the end of the cross-axis.
将弹性项目分组到横轴的末尾。 align-items: flex-end
align-items:flex-end

(iv) Center {#-iv-center}

The
center value is equally predictable. It aligns the flex items to the center of the flex-container.
价值同样可以预测。它将flex项目与flex-container的中心对齐。 align-items: center
align-items:center

(v) Baseline {#-v-baseline}

And the baseline value?
和基线值?

It aligns flex-items along their
它沿着它们对齐flex-items baselines .
align-items: baseline
align-items:baseline

"
" Baseline " really sounds fancy.
"真的很奇特。

The result appears to look just like
结果看起来就像flex-start but it is subtly different.
但它略有不同。

What the heck is "baseline"?
什么是"基线"?

The image below should help.
下面的图片应该有所帮助。

Notice how all the flex-items are aligned to have their content seat on the "baseline"?
请注意所有flex项目如何对齐以使其内容位于"基线"上?

6. Align-content {#6-align-content}

While discussing the
在讨论时wrapproperty, do you remember what happened when you added more flex-items to the flex-container?
属性,你还记得当你向flex-container添加更多flex项时发生了什么吗?

You got a
你有一个 multi-line flex container.
弹性容器。

The
align-content property is used on
财产用于 multi-line flex-containers.
弯曲的容器。

It takes the same values as
它采用相同的值align-items apart from
除了baseline.

By definition, it controls how the flex-items are aligned in a multi-line flex container.
根据定义,它控制flex-items在多行Flex容器中的对齐方式。

Just like
就像align-items, the default value is also
,默认值也是stretch

These are values you should now be familiar with. So, here's how they affect a
这些是您现在应该熟悉的值。所以,这是他们如何影响一个 multi-line flex-container with 10 flex-items.
flex-container有10个flex-items。

(i) Stretch {#-i-stretch-1}

With
stretch, the flex items are "stretched" to fit the available space along the cross-axis.
,flex项被"拉伸"以适应沿横轴的可用空间。

The spacing you see between the flex items below is owing to the
您在下面的弹性项目之间看到的间距是由于margin set on the items.
设置项目。

(ii) Flex-start {#-ii-flex-start-1}

You've seen the
你见过了flex-start value before.
之前的价值。

This time it aligns the items in the
这次它对齐了中的项目 multi-line container to the
集装箱到 start of the cross-axis.
的横轴。

Remember the default cross axis is from top-to-down.
请记住,默认的横轴是从上到下。

Thus, the flex items are aligned to the top of the flex container.
因此,柔性物品与柔性容器的顶部对齐。

(iii) Flex-end {#-iii-flex-end-1}

The
flex-end value aligns the flex items to the end of the cross-axis.
value将flex项目对齐到横轴的末尾。

(iv) Center {#-iv-center-1}

Like you may have guessed,
就像你可能已经猜到的那样center aligns the flex-items to the
将flex-items对齐到 center of the cross-axis.
的横轴。

That's the last of the flex-container properties.
这是最后一个flex-container属性。

You now understand how to use the various flex-container properties.
您现在已经了解了如何使用各种flex-container属性。

You'll use these to work through the practical sections coming up.
您将使用这些来完成实际的部分。

The Flex Item Properties {#the-flex-item-properties}

Order || Flex-grow || Flex-shrink || Flex-basis

In the previous section, I explained flex-containers and their alignment properties.
在上一节中,我解释了flex-containers及其对齐属性。

Beautiful indeed.
确实美丽。

Sure you're getting a feel of what lies ahead.
当然,你已经了解了未来的发展。

I'd take my focus off flex-containers now, and walk you through flex-items and their alignment properties.
我现在将我的注意力集中在flex-containers上,并引导您完成flex-items及其对齐属性。

Like flex-containers, a couple alignment properties are also made available on all flex-items, too.
与flex-containers一样,也可以在所有flex-items上提供一些对齐属性。

Let me walk you through them.
让我带你走过他们。

1. Order {#1-order}

The order property allows for reordering the flex items within a container.
order属性允许重新排序容器中的flex项。

Basically, with the order property you can move a flex-item from one position to another. Just like you would do with "sortable" lists.
基本上,使用order属性,您可以将flex项目从一个位置移动到另一个位置。就像你对"可排序"列表一样。

This is done without affecting the source code. Which means the position of the flex items in the HTML source code isn't changed.
这样做不会影响源代码。这意味着HTML源代码中flex项的位置不会更改。

The default value for the order property is 0. It may take on either negative or positive values.
订单属性的默认值为0.它可以采用负值或正值。

It's worth noting that flex items are re-ordered based on the number values of the order property. From lowest to highest.
值得注意的是,Flex项目是根据订单属性的数值重新排序的。从最低到最高。

An example always does the trick. Consider the unordered list below:
一个例子总是这样做。考虑下面的无序列表:

<ul>    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>                          </ul>

By default, the flex items all have an
默认情况下,flex项都有order value of
的价值0.

Just as you expected, you get this (see below) after some basic styling.
正如您所期望的那样,您可以在一些基本样式之后得到这个(见下文)。 Default viewing
默认查看

The Flex items are displayed just as specified in the HTML source order. Flex item 1, then 2, 3, and 4.
Flex项目的显示方式与HTML源顺序中的指定一致。 Flex项目1,然后是2,3和4。

What if for some reason you wanted the flex-item 1 to appear last? Without changing the source order in the HTML document?
如果出于某种原因你想让flex-item 1出现在最后?不改变HTML文档中的源顺序?

"
" Without changing the source order " means you do not get to do this:
"意味着你不能这样做:

<ul>    <li>2</li>    <li>3</li>    <li>4</li>    <li>1</li>                      </ul>

Now that's where the
现在那就是了order property comes in.
物业进来。

All you need to do is make the
你需要做的就是做order value of flex-item 1 higher than that of other list items.
flex-item 1的值高于其他列表项的值。

If you ever used the
如果你曾经使用过z-index property on block elements, you'd be familiar with this sort of thing.
块元素的属性,你会熟悉这种东西。

/*select first li element within the ul */    li:nth-child(1) {        order: 1; /*give it a value higher than 0*/    }

The flex items are then re-ordered from lowest to highest.
然后,弹性项目从最低到最高重新排序。

Do not forget that by default, list-items 2, 3, and 4 all have the order value of 0.
不要忘记,默认情况下,列表项2,3和4都具有0的订单值。

Now, flex-item 1 has an order value of 1.
现在,flex-item 1的订单值为1。 New look after changing the order value for 1
更改1的订单值后的新外观

Flex-items 2, 3, and 4 all have an order value of 0. So, the HTML source order is kept --- no modifications made to the default display.
Flex-items 2,3和4的订单值均为0.因此,保留了HTML源订单 - 不对默认显示进行任何修改。

What if you gave flex-item 2 an order value of 2?
如果您为flex-item 2提供了2的订单值,该怎么办?

Yes, you guessed right. It goes up the stack too. It now represents the flex-item with the highest
是的,你猜对了。它也在堆栈上升。它现在代表最高的flex项order value.
值。 Flex-item 2 now has an higher order value
Flex-item 2现在具有更高的订单价值

And what happens when two flex items have the same order value?
当两个flex项具有相同的订单价值时会发生什么?

In the example below, flex-item 1 and 3 are given the same
在下面的示例中,flex-item 1和3的含义相同order values

li:nth-child(1) {        order: 1;    }

li:nth-child(3) {        order: 1;    }

Flex-item 1 and 3 with the same order value
Flex-item 1和3具有相同的订单值

The items are still arranged from lowest to highest order value.
这些项目仍按从最低到最高的顺序排列。

This time, flex-item 3 appears last because it comes after flex-item 1 in the source file (HTML document).
这次,flex-item 3最后出现,因为它出现在源文件(HTML文档)中的flex-item 1之后。

The re-ordering is based on the positions in the source file, when two or more flex items have the same order value.
当两个或多个flex项具有相同的订单值时,重新排序基于源文件中的位置。

That was a lot of explanation.
这是很多解释。

I'd move on to some other property.
我转到其他一些房产。

2. Flex-grow and flex-shrink {#2-flex-grow-and-flex-shrink}

The beauty of flex items is being "flexible."
柔性物品的美感是"灵活的"。

The
flex-grow and
flex-shrink properties allow us play around this "
属性让我们玩这个" flexibility" even more.
更。

The
flex-grow and
flex-shrink properties control how much a flex-item should "grow" (extend) if there are extra spaces, or "shrink" if there are no extra spaces.
如果有额外的空格,属性控制flex-item应该"增长"(扩展)的程度,如果没有额外的空格,则控制"缩小"。

They may take up any values ranging from 0 to any positive number.
它们可以占用从0到任何正数的任何值。0 || positive number

Let me demystify that.
让我揭开神秘面纱。

Consider the simple unordered list below. It comprises just one list item.
考虑下面简单的无序列表。它只包含一个列表项。

<ul>    <li>I am a simple list</li></ul>

ul {    display: flex;}

With a bit more styling, it appears like this.
有了更多的造型,它看起来像这样。 Simple flex-item
简单的flex项目

By default, the
默认情况下flex-grow property is set to
属性设置为0. By implication, the flex-item does NOT grow to fit the entire space available.
。通过暗示,flex-item不会增长到适合整个可用空间。

The value
价值0 is like a "turn-off" switch. The
就像一个"关闭"开关。该flex-grow switch is turned off.
开关已关闭。

However, if you changed the
但是,如果你改变了flex-grow value to
价值1, here's what happens.
,这就是发生的事情。 The flex-item grows to fill the available space
flex项目增长以填充可用空间

The flex-item now "
灵活项目现在" grows" to occupy all the available space. The switch is turned on!
占据所有可用空间。开关打开!

If you tried resizing your browser, the flex-item would also "shrink" to accommodate the new screen width.
如果您尝试调整浏览器的大小,flex-item也会"收缩"以适应新的屏幕宽度。

Why? By default, the
为什么?默认情况下shrink property is set to 1. Which means the
属性设置为1.这意味着flex-shrink switch is also turned on!
开关也打开了!

I'll take a closer look at the
我会仔细看看flex-grow and
flex-shrink properties in a bit in case you still don't feel confident with your understanding of this.
如果您仍然对自己对此的理解不满意,请稍微考虑一下属性。

3. Flex-basis {#3-flex-basis}

Remember how I said the beauty of the flex-items is being "flexible"? Well, it appears you also have a control over that.
还记得我怎么说flex-items的美感是"灵活的"?好吧,看起来你也可以控制它。

The
flex-basis property specifies the initial size of a flex-item. Before the
property指定flex项的初始大小。之前flex-grow or
要么flex-shrink properties adjust it's size to fit the container or not.
属性调整它的大小以适应容器或不。

The previous statement is really important- so i'm taking a moment to reinforce that.
之前的陈述非常重要 - 所以我花了一点时间来加强这一点。

The default value is
默认值为flex-basis: auto.
Flex-basis can take on any values you'd use on the normal width property. That is,
可以采用您在普通宽度属性上使用的任何值。那是,percentages || ems || rems || pixels etc
等等

Note that when trying to set the basis property to a zero based value, use the unit also. Use
请注意,在尝试将基础属性设置为基于零的值时,也请使用该单位。采用flex-basis: 0pxnot just
不只是flex-basis: 0

I'd bring back the "one list" example here again.
我再次带回"一个列表"的例子。

<ul>    <li>I am a simple list</li></ul>

ul {    display: flex}

li {    padding: 4px; /*some breathing space*/}

By default, the initial width of the flex item is influenced by the default value,
默认情况下,弹性项的初始宽度受默认值的影响,flex-basis: auto.

The width of the flex-item is computed "
灵活项目的宽度计算" automatically " based on the content size (and obviously, plus whatever padding you set too).
"基于内容大小(显然,加上你设置的任何填充)。 default viewing
默认查看

This means if you increased the content in the flex-item, it automatically resizes to fit.
这意味着如果您增加了flex项中的内容,它会自动调整大小以适应。

<ul>    <li>I am a simple list AND I am a simple list</li></ul>

width is automatically computed
宽度自动计算

If, however, you want to set the flex-item to a fixed width, you can also do this:
但是,如果要将弹性项设置为固定宽度,还可以执行以下操作:

li {    flex-basis: 150px;}

Now the flex-item has been constrained to a width of 150px.
现在,flex-item被限制为150px的宽度。 flex-item with a constrained width
具有约束宽度的flex-item

It's getting even more interesting.
它变得更有趣了。

4. The flex shorthand {#4-the-flex-shorthand}

The
flex shorthand allows you set the
简写允许你设置flex-grow,
flex-shrink and
flex-basis properties all at once.
属性一次性。

When appropriate, I advice you set all three properties at once using the flex shorthand than doing so individually.
在适当的时候,我建议您使用flex速记一次设置所有三个属性,而不是单独设置。

li {  flex: 0 1 auto;}

The code above is equal to setting the three properties:
上面的代码等于设置三个属性:flex-grow: 0; flex-shrink: 1; flex-basis: auto

Please note the order.
请注意订单。

Flex-grow first, then
首先,然后flex-shrink, and then
, 接着flex-basis. The acronym,
。首字母缩略词, GSB may help.
可能有帮助。

What happens if you fail to set one of the values in the flex-shorthand?
如果您未能在flex-shorthand中设置其中一个值,会发生什么?

If you set only the
如果你只设置了flex-grow and
flex-shrinkvalues,
flex-basis would default to zero.
将默认为零。

This is called an
这被称为 absolute flex . And when you set only the
。当你只设置了flex-basis, you get a
你得到一个 relative flex .

/*this is an absolute flex item*/li {  flex: 1 1; /*flex-basis defaults to 0*/}

/*this is a relative flex item*/li {  flex-basis: 200px; /*only flex-basis is set*/}

I know what you're thinking. What's the purpose of the
我知道你在想什么。这是什么目的 relative and
absolute flex?
柔性?

I answer that question later in this article. Again, blind trust will suffice for now.
我在本文后面回答了这个问题。再一次,盲目信任就足够了。

Let's take a look at some very useful flex shorthand values.
让我们来看看一些非常有用的flex速记值。

1. flex: 0 1 auto {#1-flex-0-1-auto}

/*again, the "li" represents any flex-item*/li {  flex: 0 1 auto;}

This is same as writing
这与写作相同flex: default and it's the default behavior of all flex items.
这是所有弹性项目的默认行为。

Let me break this down, just a bit.
让我分解一下吧。

It's easier to understand this by taking a look at the
通过查看,更容易理解这一点flex-basis property first.
物业第一。

The
flex-basis is set to
被设置为auto, which means the initial width of the flex-item will be
,这意味着flex项的初始宽度将是 automatically determined based on the size of the contents.
根据内容的大小确定。

Got that?
知道了?

Moving on to the next property, the
转到下一个属性,flex-grow value is zero. This means the
值为零。这意味着flex-grow property wouldn't tamper with the initial width of the flex item.
属性不会篡改弹性项目的初始宽度。

The grow switch is off.
成长开关关闭。

Since flex-grow controls the "
由于flex-grow控制" growth " of the flex-items and it's set to zero, the flex-items will not "grow" to fit the screen.
"flex-items并且它设置为零,flex-items不会"增长"以适应屏幕。

Finally, the flex shrink value is 1. It says this ---
最后,flex shrink值为1.它说这个--- "shrink the flex-item when it is necessary"

Here is what this looks like when applied to some flex items.
以下是应用于某些弹性项目时的样子。
flex: 0 1 auto

Notice how the flex items don't grow. The width is computed automatically, and they shrink upon resizing the browser --- if necessary.
注意flex项如何不增长。宽度是自动计算的,如果需要,它们会在调整浏览器大小时缩小。

2. Flex: 0 0 auto {#2-flex-0-0-auto}

/*again, the "li" represents any list-item*/

li {  flex: 0 0 auto;}

This is same as
这和flex: none.

Using the same framework I established earlier, the width is computed automatically BUT the flex item does NOT grow or shrink (they are both set to zero).
使用我之前建立的相同框架,自动计算宽度但是flex项不会增长或缩小(它们都设置为零)。

The grow and shrink switches are both off.
增长和收缩开关都关闭了。

It's essentially a fixed width element whose initial width is based off of the content size in the flex item.
它本质上是一个固定宽度的元素,其初始宽度基于flex项目中的内容大小。

See how this flex shorthand affects two flex items. One housing more content than the other.
了解此弹性缩写如何影响两个弹性项目。一个住房比另一个住房更多。
Flex: 0 0 auto

The first thing you should notice is, the flex items both have different widths.
您应该注意的第一件事是,flex项目具有不同的宽度。

That is expected since the widths are computed automatically, based on the content size.
这是预期的,因为宽度是根据内容大小自动计算的。

Try resizing your browser, and you'll notice that the flex items don't shrink with its width. They pop out of the parent element, and you have to scroll your browser horizontally to view all the content.
尝试调整浏览器的大小,您会注意到flex项目的宽度不会缩小。它们弹出父元素,您必须水平滚动浏览器才能查看所有内容。

No worries, I'll show you how to deal with this weird behavior later.
不用担心,我会告诉你如何处理这种奇怪的行为。 On resizing browser, flex-items do NOT shrink. Instead, they pop out of the flex-container.
在调整浏览器大小时,flex-items不会缩小。相反,它们从弹性容器中弹出。

3. Flex: 1 1 auto {#3-flex-1-1-auto}

This is same as
这和flex: auto.

Use the framework I established earlier.
使用我之前建立的框架。

This says,
这说, "compute initial width automatically, but grow to fit the entire available space and shrink if necessary"

The grow and shrink switches are turned on, and the widths computed automatically.
打开增长和缩小开关,并自动计算宽度。
Flex: 1 1 auto

This time around, the items fill up the available space and they shrink upon resizing the browser too.
这一次,项目填满了可用空间,并且在调整浏览器大小时它们也会缩小。

4. Flex: "positive number" {#4-flex-positive-number}

Where "
哪里" positive number " represents any positive number (without the quotes)
"代表任何正数(不含引号)

This is the same as
这是一样的flex: "positive number" 1 0.

flex: 2 1 0is the same as writing
和写作一样flex:2 2 represents any positive number.
2代表任何正数。

/*again, the "li" represents any list-item*/li {  flex: 2 1 0; /*same as flex: 2*/}

Following the same framework I established earlier, this says, "
按照我之前建立的相同框架,这说," set the initial width of the flex item to zero (ehm, no width?), grow the item to fill the available space, and finally shrink the item whenever possible"

With the flex items having "
随着flex项目" no width ", how's the width computed?
",如何计算宽度?

The
flex-grow value takes over, and determines the extent the flex item "
值接管,并确定flex项的范围" widens ".
"。

That takes care of the
这照顾了 no-width problem.
问题。

It's more practical to use this flex shorthand when you have more than one flex item whose initial widths,
当你有多个弹性项目的初始宽度时,使用这个flex速记更实用flex-basis are set to any zero based values e.g. 0px
被设置为任何基于零的值,例如0px

What really happens is, the widths of the flex items are computed based on the ratios of the
真正发生的是,弹性项目的宽度是根据的比率计算出来的flex-grow value.
值。

I'd break that down just a bit.
我打破了一点点。

Consider two list items marked up and styled below.
考虑下面标记和样式化的两个列表项。

<ul>    <li>I am One</li>    <li>I am Two</li></ul>

ul {    display: flex;}

/*first flex-item*/li:nth-child(1) {    flex: 2 1 0; /*same as just writing flex: 2*/}

/*second flex-item*/li:nth-child(2){    flex: 1 1 0;    background-color: #8cacea;}

Remember that setting
记住那个设定flex-grow : 1 lets the flex-item fill up the available space. The grow switch is turned on.
让flex-item填满可用空间。成长开关已打开。

Here you have two flex-items. One has a
这里有两个弹性项目。一个有一个flex-grow property of
的财产1 and the other
和另一个2, what then happens?
然后会发生什么?

You have the grow switches turned on for both items. However, the magnitude of growth differs. 1 and 2.
您已为两个项目启用了增长开关。但是,增长幅度不同。 1和2。

They both expand to fill up the available space, but in some proportion.
它们都扩展到填补可用空间,但在一定比例。

Here's how it works.
这是它的工作原理。

The latter takes up 2/3 of the available space while the former takes 1/3.
后者占可用空间的2/3,而前者占1/3。

You know how I arrived at that?
你知道我是怎么到达那个的吗?

Basic mathematics ratio.
基础数学比率。individual ratio / total ratio I hope you didn't skip those math classes.
我希望你没有跳过那些数学课。 flex items sharing up space
灵活的项目共享空间

You see what's happening?
你看到发生了什么?

Even though both flex-items have contents of the same size (approximately), they however take up different spaces.
尽管两个弹性项目具有相同大小(大约)的内容,但是它们占据不同的空间。

The widths are not based on the content size, but the grow values.
宽度不是基于内容大小,而是基于增长值。

One is about two times the other.
一个是另一个的两倍左右。

5. Align-self {#5-align-self}

The
align-self property takes a step further in giving us so much control over flex items.
property更进一步让我们对flex项目进行了如此多的控制。

You already saw how the
你已经看过了align-items property helps in collectively aligning all flex-items within a flex-container.
property有助于集中对齐flex-container中的所有flex项。

What if you wanted to change the position of a
如果你想改变一个位置怎么办? single flex-item along the cross-axis, without affecting the neighboring flex-items?
沿横轴的flex-item,不影响相邻的flex-items?

This is where the
这就是align-self property comes to the rescue.
财产来救援。

It may take on any of these values:
它可能采用以下任何值:auto || flex-start || flex-end || center || baseline || stretch

/*target first list item*/li:first-of-type {    align-self: auto || flex-start || flex-end || center || baseline || stretch}

These are values you're already familiar with, but as a refresher here's how they affect a particular targeted item.
这些是您已经熟悉的值,但是作为这些值的复习,它们是如何影响特定目标项目的。

In this case, the first item within the container.
在这种情况下,容器中的第一个项目。

The targeted flex-item is in red.
目标flex项目为红色。

1. Flex-end {#1-flex-end}

flex-end aligns the targeted item to the end of the cross axis.
将目标项对齐到横轴的末端。 targeted flex item at the end of the cross axis
横轴末端的目标弹性项目

2. Center {#2-center}

center aligns the targeted item to the center of the cross axis.
将目标项目与十字轴的中心对齐。 targeted flex item at the center of the cross axis
横轴中心的目标柔性项目

3. Stretch {#3-stretch}

stretch "stretches" the targeted flex item to fill up the available space along the cross axis.
"拉伸"目标弹性项目以填充沿横轴的可用空间。 targeted flex item stretched along the cross axis
沿横轴伸展的目标弹性项目

4. Baseline {#4-baseline}

baseline aligns the targeted flex item along the baseline.
沿着基线对齐目标弹性项目。

It does look like the same result as
它确实看起来像是一样的结果flex-start but I'm sure you understand what the baseline is.
但我相信你明白基线是什么。

I explained that much earlier.
我早就解释过了。 targeted flex item aligned along the baseline
目标弹性项目沿基线对齐

5. auto {#5-auto}

auto sets the value of the targeted flex item to the parent's
将目标flex项的值设置为父项align-items value or
价值或stretch if the element has no parent.
如果元素没有父元素。

In the case below, the flex-container has an
在下面的例子中,flex-container有一个align-items value of
的价值flex-start

This aligns all the flex-items to the start of the cross-axis.
这会将所有flex项对齐到横轴的起点。

The targeted flex-item now inherits the
目标flex项现在继承了flex-start value --- the parent's
价值---父母的align-items value.
值。 targeted flex item aligned along the start of the cross-axis
沿着横轴的起点对齐的目标弹性项目

This is the base styling on the flex-items used above. Just so you understand what's going on even better.
这是上面使用的flex-items的基本样式。只是这样你才能更好地理解发生了什么。

ul {    display: flex;    border: 1px solid red;    padding: 0;    list-style: none;    justify-content: space-between;    align-items: flex-start; /*affects all flex-items*/    min-height: 50%;    background-color: #e8e8e9;}

li {  width: 100px;  background-color: #8cacea;  margin: 8px;  font-size: 2rem;}

You're pretty much getting ready for the fun part now :-)
你现在正准备好迎接有趣的部分:-)

Absolute and Relative flex-items. {#absolute-and-relative-flex-items-}

Having covered some ground in previous sections, it's important to clarify a few important concepts here too.
在前几节中已经介绍了一些基础,重要的是在这里澄清一些重要的概念。

What really is the difference between an absolute and relative flex-item?
绝对和相对的flex项目之间究竟有什么区别?

The major difference between these two is got to do with spacing and how they are computed.
这两者之间的主要区别在于间距以及它们的计算方式。

The spacing within a relative flex item is computed based on it's content size. In an absolute flex item, it is based solely on "flex", not content.
相对弹性项目中的间距是根据其内容大小计算的。在绝对弹性项目中,它仅基于"flex",而不是内容。

Consider the markup below.
考虑下面的标记。

<ul>    <li>        This is just some random text  to buttress the point being explained.    Some more random text to buttress the point being explained.    </li>

    <li>This is just a shorter random text.</li></ul>

Two list elements. One has far more texts than the other.
两个列表元素。一个人的文本多于另一个。

Add a bit of styling.
添加一些样式。

ul {    display: flex; /*flexbox activated*/}

li {    flex: auto; /*remember this is same as flex: 1 1 auto;*/    border: 2px solid red;    margin: 2em;}

Here's the result:
这是结果:

If you already forgot,
如果你已经忘了,flex: 1 1 auto is the same as setting:
与设置相同:flex-grow: 1
flex-shrink: 1 and
flex-basis: auto

Using the framework I established earlier, the initial widths of the flex-items are automatically computed
使用我之前建立的框架,自动计算flex项的初始宽度flex-basis: auto, and then they "
,然后他们" grow " to fit the available space
"以适应可用空间flex-grow: 1.

When flex-items have their widths computed automatically,
当flex-items的宽度自动计算时,flex-basis: auto, it is based on the size of the content contained within the flex-items.
,它基于flex-items中包含的内容的大小。

The flex-items in the example above do NOT have contents of the same size. Hence, the sizes of the flex-items would be unequal.
上例中的flex-items没有相同大小的内容。因此,柔性物品的尺寸将是不相等的。

Since the individual widths weren't equal in the first place (it was based off content), when the items grow, the widths also stay unequal.
由于个别宽度首先不相等(基于内容),当项目增长时,宽度也保持不相等。

The flex-items in the example above are
上例中的flex项目是 relative flex-items.
柔性项。

Let's make the flex-items absolute --- meaning this time their widths should be based on "flex" NOT content size.
让我们将flex-items设为绝对值 - 意味着这次它们的宽度应该基于"flex"而不是内容大小。

A "
一种 " one-liner" does the magic.
是魔术吗?

li {    flex: 1 ; /*same as flex: 1 1 0*/}

See the result below.
请参阅下面的结果。

Do you see both flex-items have the same widths this time?
你是否看到这两个flex-items具有相同的宽度?

The initial widths of the flex-items is zero
flex项的初始宽度为零flex-basis: 0, and then they "
,然后他们" grow" to fit the available space.
以适应可用空间。

When there are two or more flex-items with zero based
当有两个或多个基于零的弹性项目时flex-basis values, they share the spacing available based on the
值,它们共享基于的可用间距flex-growvalues.
值。

I talked about this earlier.
我早些时候谈过这件事。

Now the widths aren't computed based on content size. The widths are based on the flex value specified.
现在宽度不是根据内容大小计算的。宽度基于指定的flex值。

So you got that. Right?
所以你明白了。对?

Absolute flex-items have their widths based solely on flex, while relative flex items have their widths based on content size.
绝对弹性项目的宽度仅基于弹性,而相对弹性项目的宽度基于内容大小。

Auto-margin Alignment {#auto-margin-alignment}

Beware of margin: auto alignment on flex items. {#beware-of-margin-auto-alignment-on-flex-items-}

When you use
当你使用margin: auto on flex-items, things can look quite weird.
在flex-items上,事情看起来很奇怪。

You do need to understand what's going on. It may result in unexpected results, but I'm going to explain all that.
你需要了解发生了什么。这可能会导致意想不到的结果,但我会解释所有这些。

When you use
当你使用margin: auto on a flex-item, the direction (left, right or both) that has the value
在flex项目上,具有该值的方向(左,右或两者)auto will take up any empty spaces available.
将占用任何可用的空白空间。

That's a difficult one to catch.
这是一个难以捉摸的问题。

Here's what I mean.
这就是我的意思。

Consider the navigation bar marked up and styled below:
考虑下面标记和设置样式的导航栏:

<ul>    <li>Branding</li>    <li>Home</li>    <li>Services</li>    <li>About</li>    <li>Contact</li></ul>

ul {    display: flex;}li {    flex: 0 0 auto;}

See the result of that below.
请参阅下面的结果。 Simple navigation bar
简单的导航栏

There are a couple of things to note here:
这里有几点需要注意:

  1. The flex-grow value is set to zero. This explains why the list items don't grow
  2. The flex-items are aligned to the start of the main-axis (the default behavior)
  3. Owing to the items being aligned to the start of the main-axis, some extra space is left on the right. You see that?

Now use
现在用margin: auto on the first list item (branding) and see what happens.
在第一个列表项(品牌)上,看看会发生什么。

li:nth-child(1) {    margin-right: auto; /*applied only to the right*/}

margin:auto applied to 'branding'
保证金:自动适用于&#39;品牌&#39;

What just happened?
刚刚发生了什么?

The extra space that existed has now been distributed to the right of the first flex-item.
现有的额外空间现已分配到第一个弹性项目的右侧。

Do you remember what I said earlier?
你还记得我之前说过的吗?

When you use
当你使用margin:auto on a flex-item, the direction (left, right or both) that has the value
在flex项目上,具有该值的方向(左,右或两者)auto will take up any empty spaces available.
将占用任何可用的空白空间。

What if you wanted an auto margin alignment on both sides of a flex-item?
如果您想在弹性项目的两侧进行自动边距对齐,该怎么办?

/*you may use the margin shorthand to set both sides if you wish*/li:nth-child(1) {    margin-left: auto;    margin-right: auto}

margin:auto applied on both sides of the "branding"
保证金:自动应用于"品牌"两侧

Now the space is distributed across both sides of the flex-item.
现在,空间分布在flex项目的两侧。

So, is there a trade off with the cool auto-margin alignment?
那么,酷炫的自动保证金调整是否存在折衷?

It appears there's one. It can be a source of frustration if you don't pay attention too.
它似乎有一个。如果你不注意,它可能是一种沮丧的根源。

When you use the auto-margin alignment on a flex-item, the
当您在flex项目上使用自动边距对齐时,justify-content property no longer works.
财产不再有效。

For instance, setting a different alignment option on the flex-container above via the
例如,通过以下方法在上面的flex容器上设置不同的对齐选项justify-content property, has no impact on the layout.
财产,对布局没有影响。

ul {    justify-content: flex-end;}

justify-content has no impact
理由 - 内容没有影响

Practical Use cases {#practical-use-cases}

Navigation systems are a very big part of every website or application. Every website on the planet has got some sort of navigation system in place.
导航系统是每个网站或应用程序的重要组成部分。这个星球上的每个网站都有某种导航系统。

Take a look at these popular sites and how they approach their navigation systems.
看看这些热门网站以及他们如何接近他们的导航系统。

Do you see how Flexbox can help you build these layouts more efficiently?
您是否了解Flexbox如何帮助您更有效地构建这些布局?

Take a closer look to see where the auto-margin feature may come in very handy too.
仔细看看自动边距功能可能会非常方便。

(i) Bootstrap Navigation {#-i-bootstrap-navigation}

(ii) AirBnB desktop Navigation {#-ii-airbnb-desktop-navigation}

(iii) Twitter desktop Navigation {#-iii-twitter-desktop-navigation}

I recommend you actually write code as a form of practice. I have written a practical guide here:
我建议你实际上将代码编写为一种练习形式。我在这里写了一本实用指南:The Most Popular Navigation Bars Created with Flexbox

Go take a look.
去看看。

I'll wait.
我会等。

What happens when you switch flex-direction? {#what-happens-when-you-switch-flex-direction}

Fair warning: there's some weird stuff on the way.
公平警告:路上有一些奇怪的东西。

When starting off with learning the Flexbox model, this part was the most confusing.
在开始学习Flexbox模型时,这部分是最令人困惑的。

I bet a lot of newcomers to the "
我敢打赌很多新人" flex world" find it that way too.
也是这样找到的。

You remember when I talked about the default main and cross axis being in the "left to right" and "top to bottom" directions?
你还记得当我谈到默认的主轴和横轴在"从左到右"和"从上到下"的方向时?

Well, you can change that too.
好吧,你也可以改变它。

This is exactly what happens when you use
这正是您使用时发生的情况flex-direction: column as described in an earlier section.
如前面部分所述。

When you use
当你使用flex-direction: column, the main and cross axis are changed as seen below.
,主轴和横轴如下所示改变。 default main and cross axis
默认主轴和横轴 New main and cross axis
新的主轴和横轴

If you've ever written any text in the English language, then you already know the language is written from left to right and top to bottom.
如果你曾用英语写过任何文字,那么你就已经知道这种语言是从左到右,从上到下写的。

That's equally the direction taken for the default main and cross axis of the Flexbox, too.
这同样也是Flexbox默认主轴和横轴的方向。

However, on switching the flex direction to
但是,在将弯曲方向切换为column, it no longer follows the "
,它不再遵循" English Language " pattern but Japanese!
"模式,但日本人!

Oh yes, Japanese.
哦,是的,日本人。

If you've written any text in the Japanese language, then this will be familiar. (For the record, I've never written any text in Japanese.)
如果您使用日语编写任何文本,那么这将是熟悉的。 (为了记录,我从未用日文写过任何文字。)

Japanese text is traditionally written from
日语文本传统上是从中写的 top to bottom ! Not so weird, huh?
!不是很奇怪,是吧?

That explains why this can be a bit confusing for English writers.
这就解释了为什么这对英国作家来说有点混乱。 New main and cross axis
新的主轴和横轴

Take a look at this example. The standard unordered list with 3 list items, except this time I'll change the flex-direction.
看看这个例子。带有3个列表项的标准无序列表,除了这次我将改变flex方向。

<ul>        <li></li>        <li></li>        <li></li>    </ul>

ul {    display: flex;    flex-direction: column;}

Here's the look before the change in direction:
这是改变方向之前的样子:

And afterward:
然后:

So what happened?
所以发生了什么事?

The "text" is now written in Japanese style --- from top-to-down (main-axis).
"文本"现在用日语写成---从上到下(主轴)。

There's something you may find funny, I'd love to point out.
你可能会发现有趣的东西,我想指出。

You see the width of the items fill up the space, right?
你看到物品的宽度填满了空间,对吧?

If you were to change that before now, you'd just deal with the
如果你之前要改变它,你只需处理flex-basis and(or)
和(或)flex-grow properties.
属性。

Let's see how those affect our new layout.
让我们看看它们如何影响我们的新布局。

li {    flex-basis: 100px;}

...and here's what you'd get.
......这就是你得到的。

Wow --- what? The height is affected, but not the width?
哇---什么?高度会受到影响,但不会影响宽度?

As I said earlier, the flex-basis property defines the initial-width of every flex-item.
正如我之前所说,flex-basis属性定义了每个flex-item的初始宽度。

I was wrong --- or better put, I was thinking in "
我错了 - 或者说更好,我在思考" English ". Let's switch to Japanese for a bit.
"。让我们换一点日语吧。

It doesn't always have to be "width".
它并不总是必须是"宽度"。

Upon switching flex-direction, please note that every property that affected the main-axis now affects the
在切换弯曲方向时,请注意,影响主轴的每个属性现在都会影响到 new main-axis.
主轴。

A property like
像这样的财产flex-basis that affected the width of the flex-items along the main-axis now affects the height NOT width.
影响沿主轴的flex项目宽度现在影响高度NOT宽度。

The direction has been switched!
方向已切换!

So even if you used the
所以,即使你使用了flex-grow property, it'd affect the height too.
财产,它也影响高度。

Essentially, every flex property that operated on the horizontal axis (the then main-axis) now operates vertically, the new main-axis.
基本上,在水平轴(当时的主轴)上运行的每个柔性属性现在都垂直运行,即新的主轴。

It's just a switch in directions.
这只是方向的转换。

Here's one more example. I promise you'll have a better understanding after this one.
这是另一个例子。我保证在这之后你会有更好的理解。

Reduce the width of the flex-items we looked at just before now, and they no longer fill the entire space:
减少我们之前看过的柔性物品的宽度,它们不再填满整个空间:

li {    width: 200px;}

What if you wanted to move the list items to the center of the screen?
如果要将列表项移动到屏幕中心怎么办?

In English language, which is how you've dealt with flex-containers until now. That'd mean "
在英语中,这就是你到目前为止处理flex-containers的方式。那意味着" move the flex-items to the center of the main-axis ".
"。

So, you'd have used
所以,你已经习惯了justify-content: center

But doing that now does not work.
但现在这样做是行不通的。

Since the direction's changed, the center is along the cross-axis --- not the main-axis.
由于方向改变,中心沿着横轴而不是主轴。

Take a look again:
再看看: New main and cross axis
新的主轴和横轴

So please think in terms of
所以请考虑一下 Japanese text .

The main-axis is from top-to-down, you don't need that.
主轴是从上到下,你不需要那样。

The cross-axis is from left to right. Sounds like what you need.
横轴从左到右。听起来像你需要的。

You need to
你需要 "move the flex-items to the center of the cross-axis."

Any flex-container property rings a bell here?
任何弹性容器属性都会响铃吗?

Yeah, the
是的,align-items property .
财产。

The
align-items property deals with alignment on the cross-axis.
属性处理横轴上的对齐。

So to move those to the center, you'd do this:
所以要将它们移到中心,你会这样做:

ul {    align-items: center;}

And voila! You've got the flex-items centered.
瞧!你的flex项目居中。 flex-items centered in the new direction
flex-items以新方向为中心

It can get a bit confusing, I know. Just go over it one more time if you need to.
我知道,它可能会有点混乱。如果需要的话,再过一次吧。

While studying the Flexbox model, I noticed a lot of CSS books skipped this part.
在研究Flexbox模型时,我注意到很多CSS书都跳过了这一部分。

A bit of thinking in
一点思考 Japanese
text would go a long way to help.
会有很长的路要走。

It's worth understanding that all Flexbox properties work based on the
值得了解的是,所有Flexbox属性都基于flex-direction that's in place.
那就到位了。

I'm sure you learned something new again. I'm having fun explaining this. I hope you are having fun too :-)
我相信你会再次学到新东西。我很乐意解释这个。我希望你也玩得开心:-)

Oh my gosh, Flexbox solved that? {#oh-my-gosh-flexbox-solved-that}

Some classic problems many designers face with CSS have been trivially solved by Flexbox.
许多设计人员使用CSS遇到的一些经典问题已经通过Flexbox轻松解决。

Philip Walton, in his
, 在他的solved-by-flexbox project lists 6 classic problems (as of this writing).
列出了6个经典问题(撰写本文时)。

He extensively discusses the previous limitations with CSS, and the current solution Flexbox provides.
他广泛讨论了CSS以前的局限性,以及Flexbox提供的当前解决方案。

I recommend you take a look after completing this article.
我建议你看看完这篇文章。

In the practical section coming up, I'll explain some of the concepts he addresses as I walk you through building a music app layout with Flexbox.
在即将发布的实用部分中,我将向您介绍一些他在使用Flexbox构建音乐应用布局时所提出的概念。

Flexbugs and gotchas for non-compliant browsers {#flexbugs-and-gotchas-for-non-compliant-browsers}

If you're the not the type of person who writes CSS in their dreams, you may want to watch this github
如果你不是那种在他们的梦中写CSS的人,你可能想看看这个githubrepository.

Some people who are smarter than I am curate a list of Flexbox bugs and their workarounds there.
有些比我聪明的人会列出一些Flexbox错误及其解决方法。

It's the first place I look when something isn't working as I expect.
这是我看不到的东西时的第一个地方。

I'll be working you through some prominent bugs in the practical section coming next too.
我将在接下来的实用部分中介绍一些突出的错误。

So you're covered!
所以你被覆盖了!

Building a Music App Layout with Flexbox {#building-a-music-app-layout-with-flexbox}

After walking through the boring rigorous stuffs, you deserve some fun project.
在走过无聊严谨的东西之后,你应该得到一些有趣的项目。

It's time to walk through a practical example and apply your newly acquired
现在是时候走过一个实际的例子,并应用你新收购的 Flexbox skills .

It took me days to come up with a good project.
我花了几天时间才想出一个好项目。

Out of the lack of a creative option, I came up with a music app layout for cats.
由于缺乏创意选项,我想出了一个适合猫的音乐应用布局。

I call it
我叫它 catty music .

Maybe by 2036, we'd have cats singing in rock bands somewhere in Mars :-)
也许到2036年,我们会让猫在火星的某个地方的摇滚乐队里唱歌:-)

Here's what the finished layout looks like, and it is completely laid out with Flexbox.
这是完成的布局的样子,它完全用Flexbox布局。

You can view it online
您可以在线查看here.

If you view that on a mobile device, you'll have a slightly different look. That's something you'll work on in the responsive design section of this article.
如果您在移动设备上查看它,您的外观会略有不同。这是你将在本文的响应式设计部分工作的东西。

I've got a confession to make though.
我虽然承认了。

I've done something considered wrong by many.
我做过许多人认为错误的事情。

I've completely built the overall layout with Flexbox.
我已经使用Flexbox完全构建了整体布局。

For many reasons, this may not be ideal. But it's intentional in this scenario. I set out to show you all the things you can do with Flexbox, all wrapped up within a single project.
由于许多原因,这可能并不理想。但这是在这种情况下的故意。我打算向您展示您可以使用Flexbox完成的所有事情,所有这些都包含在一个项目中。

If you're curious as to when it's considered right or wrong to use the Flexbox model, you may check out my article on that.
如果您对使用Flexbox模型被认为是对或错时感到好奇,您可以查看我的文章。

Flexbox is awesome but it's NOT welcome here!

Flexbox is arguably the best thing that happened to most of us (if you write css) but does that make it perfect for all... medium.com

There, I got that off my chest. Now I'm sure no one's going to yell at me after reading this.
在那里,我把它从胸前拿走了。现在我确定读完之后没有人会对我大喊大叫。

Everything in Catty Music is laid out using the Flexbox model --- this is intentional to show off what's possible.
Catty Music中的所有内容都使用Flexbox模型进行布局 - 这是为了展示可能的内容。

So let's get this thing built!
所以让我们建造这个东西吧!

As with any reasonable project, a bit of planning goes a long way sifting through inefficiencies.
与任何合理的项目一样,一些计划在很长一段时间内解决效率低下的问题。

Let me take you through a planned approach to building the catty music layout.
让我带你完成一个有计划的方法来构建catty音乐布局。

Where do you start? {#where-do-you-start}

Whenever building a layout with Flexbox, you should start by looking out for what sections of your layout may stand out as flex-containers.
每当使用Flexbox构建布局时,您应该首先查看布局的哪些部分可以作为flex-containers突出。

You then leverage the powerful alignment properties Flexbox makes available.
然后,您可以利用Flexbox提供的强大对齐属性。

The Breakdown {#the-breakdown}

You may have the overall containing body as a flex container (contained within the red border in the image below) and have the other sections of the layout split into flex-items (items 1 and 2).
您可以将整个包含主体作为Flex容器(包含在下图中的红色边框内),并将布局的其他部分拆分为flex-items(第1项和第2项)。

This makes total sense, as item 1 contains every part of the layout other than the "
这是完全合理的,因为第1项包含布局的每个部分而不是" footer" --- the section that contains the music control buttons.
---包含音乐控制按钮的部分。

Did you know that a flex-item could also be made a flex-container?
您是否知道flex-item也可以成为flex-container?

Yep, it's possible!
是的,这是可能的!

You can nest as deep as you want (though the sane thing to do is to keep this to a reasonable level).
您可以根据需要进行深度嵌套(尽管理智的做法是将其保持在合理的水平)。

So, with that new revelation comes this...
所以,随着新的启示,这......

Item 1 (the first flex-item) may also be made a flex container.
项目1(第一柔性项目)也可以制成柔性容器。

The sidebar(item 1b) and main section(item 1a) would then be flex-items.
侧栏(项目1b)和主要部分(项目1a)将是弹性项目。

You're still with me, right?
你还和我在一起,对吧?

Decomposing your layout like this gives you a really good mental model to work with.
像这样分解您的布局为您提供了一个非常好的心理模型。

When you begin building even more complex layouts with the Flexbox model, you'd see how vital this is.
当您开始使用Flexbox模型构建更复杂的布局时,您会发现它的重要性。

You do not need a fancy image like the ones above. A simple rough paper sketch should be just fine to get you going.
你不需要像上面那样的奇特图像。一个简单的粗糙纸草图应该很好,让你去。

You remember I said you could nest as deep as you wanted? It appears you may do one more nesting here.
你还记得我说过你可以根据自己的需要进行深度挖掘吗?看来你可以再在这里筑巢一次。

Take a look at the main section above (Item 1a).
看一下上面的主要部分(第1a项)。

It could also be made a flex container to house the sections highlighted below. "
它也可以制作一个弹性容器来容纳下面突出显示的部分。 " Item 1a --- A " and "
"和" Item 1a --- B "
"

You may decide not to make the main section (item 1a) a flex container and just put within it two "divs" to house the highlighted sections.
您可以决定不将主要部分(第1a项)作为弹性容器,并在其中放入两个"div"来容纳突出显示的部分。

Yes that's possible, since "
是的,这是可能的,因为" Item 1a --- A " and "
"和" Item 1a --- B " are stacked vertically.
"垂直堆放。

By default, "
默认, " divs " stack vertically. It's how the box model works.
"垂直堆叠。这是盒子模型的工作方式。

If you choose to make the main section a flex-container, you get the powerful alignment properties at your disposal. Just in case you need them at any time.
如果您选择将主要部分设置为flex-container,则可以获得强大的对齐属性。以防您在任何时候需要它们。

The "
" flex " in Flexbox means flexible.
"在Flexbox中意味着灵活。

Flex-containers are by default flexible, kind off responsive.
Flex-container默认是灵活的,有点响应。

This may be another reason to use a flex-container over regular "
这可能是使用弹性容器超过常规的另一个原因" divs ". This depends on the case scenario though.
"这取决于案例情况。

I'll touch up on some other things as you build catty music. You should get to writing some code now.
当你制作一些音乐时,我会谈谈其他一些事情。你现在应该编写一些代码了。

Basic HTML Setup {#basic-html-setup}

Start off with the basic HTML set up below.
从下面设置的基本HTML开始。

<!DOCTYPE html>  <html>  <head>  <title>Catty Music</title>  </head>  <body>

<main></main> <!--to contain the main section of the app-->

<footer></footer> <!--to contain the music control buttons and song details-->

</body></html>

So style this ...
这样风格......

html,  body {    height: 100%; /*setting this explicitly is important*/  }

body {    display: flex; /*flex superpowers activated! */    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/  }

The first step to using the Flexbox model is establishing a flex container.
使用Flexbox模型的第一步是建立一个Flex容器。

This is exactly what the code above does. It sets the body element's display property to
这正是上面的代码所做的。它将body元素的display属性设置为flex

Now you have a flex container, the body element.
现在你有了一个flex容器,即body元素。

The flex items are defined too (item 1 and item 2) --- as in the breakdown earlier done.
flex项目也被定义(第1项和第2项)---就像之前完成的细分一样。

Note that you should take another look at the images I showed in my initial breakdown earlier if this concept still seems fuzzy for you.
请注意,如果此概念对您来说仍然模糊,您应该再看一下我之前在初始分解中显示的图像。

Keeping the image of the end in view, you should get the flex-items working.
保持结尾的图像,您应该使flex项工作。

The footer which houses the music controls sticks to the bottom of the page while the main section fills up the remaining space.
容纳音乐控制器的页脚粘在页面底部,而主要部分填满剩余空间。

How do you do that?
你是怎样做的?

main {    flex: 1 0 auto; /*fill the available space*/  }

footer {    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/  }

Please see the comments in the code listing above.
请参阅上面代码清单中的注释。

Thanks to the
非常感谢flex-grow property. It's relatively easy to have the main section fill the entire space.
属性。主要部分填满整个空间相对容易。

Just set the
只需设置flex-grow value to 1. You should also set the
值为1.您还应该设置flex-shrink property to zero. Why?
财产为零。为什么?

The reason may not be evident here because the flex-direction is changed.
这里的原因可能不明显,因为弯曲方向改变了。

In some browsers, there's a bug that allows flex-items to shrink below their content size. It's quite a weird behavior.
在某些浏览器中,存在一个允许flex-items缩小到其内容大小以下的错误。这是一种非常奇怪的行为。

The workaround to this bug is to keep the
这个bug的解决方法是保持flex-shrink value at
价值在0 , not the default value of
,而不是默认值1, and also set the
,还设置了flex-basis property to
财产到auto.

It's like saying:
这就像说: "Please compute the size of the flex item automatically, but never shrink."

With this shorthand value, you still get the default behavior of flex items.
使用此简写值,您仍然可以获得弹性项的默认行为。

The flex item would shrink upon resizing the browser. The resizing isn't based on the
调整浏览器大小后,flex项会缩小。调整大小不是基于shrink property. It is based on the recomputing the width of the flex item automatically.
属性。它基于自动重新计算弹性项目的宽度。flex-basis: auto

This will cause the flex-item to be at least as big as its width or height (if declared) or its default content size.
这将导致flex-item至少与其宽度或高度(如果声明)或其默认内容大小一样大。

Please don't forget the framework for which I broke down the
请不要忘记我破坏的框架flex-shorthand properties. There's going to be a lot of shorthand stuff coming up.
属性。会有很多简写的东西出现。

Now that things are coming together, let's put in a bit of styling to define spacing and colors:
现在事情已经结束了,让我们用一些造型来定义间距和颜色:

body {    display: flex;    flex-direction: column;    background-color: #fff;    margin: 0;    font-family: Lato, sans-serif;    color: #222;    font-size: 0.9em;  }  footer {    flex: 0 0 90px;    padding: 10px;    color: #fff;    background-color: rgba(61, 100, 158, .9);  }

Nothing magical yet.
没什么神奇的。

Here's what you should have now:
这是你现在应该拥有的:

Seeing how things are beginning to take shape, you'll make it even better.
看看事情是如何开始形成的,你会让事情变得更好。

If you're coding along, update your HTML document.
如果您正在编码,请更新HTML文档。

<main>  <aside> <!--This represents the sidebar and contained in it are icon sets from font-awesome-->    <i class="fa fa-bars"></i>    <i class="fa fa-home"></i>    <i class="fa fa-search"></i>    <i class="fa fa-volume-up"></i>    <i class="fa fa-user"></i>    <i class="fa fa-spotify"></i>    <i class="fa fa-cog"></i>    <i class="fa fa-soundcloud"></i>  </aside>

<section class="content"> <!--This section will house everything other than the sidebar-->  </section>

</main>

The listing above is quite explanatory.
上面的清单很明确。

For the icon sets, I am using the popular
对于图标集,我使用的是流行的Font Awesome library.
图书馆。

Having your desired icon is as simple as just adding a CSS class. This is what I've done within the
拥有所需的图标就像添加CSS类一样简单。这就是我在内部所做的aside tag.
标签。

As explained earlier, the "
如前所述," main " section above will also be made a flex container. The sidebar (represented by the aside tag), and the section will be flex-items.
"上面的部分也将成为一个弹性容器。侧边栏(由旁边的标签代表),该部分将是flex-items。

main {  flex: 1 0 auto; /*Is a flex item*/  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/  }

Alright, this is getting interesting, huh?
好吧,这很有意思,对吧?

Now you have the main section as a flex container. Deal with one of its flex items, the sidebar.
现在您将主要部分作为Flex容器。处理其中一个弹性项目,侧边栏。

Just as you made the footer stick to the bottom of the page, you also want the sidebar to stick --- this time to the left of the page.
正如您将页脚粘贴到页面底部一样,您也希望侧边栏粘贴---这次是在页面左侧。

aside {       flex: 0 0 40px; /*do not grow or shrink. Stay fixed at 40px*/ }

The sidebar should have icons stacked vertically.
侧边栏应该有垂直堆叠的图标。

You can make the sidebar a flex-container and give it a flex-direction that lets all icons stack vertically.
您可以将侧边栏设置为弹性容器,并为其提供一个弹性方向,使所有图标垂直堆叠。

Then apply an alignment property to have the icons in position.
然后应用对齐属性以使图标处于适当位置。

See how you may do this in the listing below.
了解如何在下面的列表中执行此操作。

aside {       /* ...  */

    display: flex; /*Now a flex-container too*/          flex-direction: column; /*stack icons vertically*/          /*since direction is changed, this works on the vertical direction*/

    justify-content: space-around;   

        align-items: center; /*direction is changed! This affects the horizontal direction. Places Icons in the center*/          background-color: #f2f2f2; /*make me pretty*/  }

     aside i.fa {        font-size: 0.9em;  /*font size for the icons*/  }

I've obsessively commented through the code above and now see how pretty everything is laid out.
我已经痴迷地评论了上面的代码,现在看看一切都是如何布局的。

Super neat with few lines of codes.
超级整洁,几行代码。

Reasonable codes, no messy hacks.
合理的代码,没有杂乱的黑客。 Sidebar dealt with nicely
边栏处理得很好

The main content section is currently empty. Don't forget it's the second list-item. The sidebar is first.
主要内容部分目前是空的。不要忘记它是第二个列表项。侧边栏是第一个。

Put in some stuff there.
在那里放一些东西。

Adding content to the main section. {#adding-content-to-the-main-section-}

You may take a look at the finished project again, so you don't lose sight of where this is headed.
您可以再次查看已完成的项目,这样您就不会忽视它的发展方向。

More importantly, it'd help you understand the next code listing.
更重要的是,它可以帮助您理解下一个代码清单。

Update your HTML document and have these within the
更新您的HTML文档并在其中包含这些内容.content section.
部分。

<section class="content"> <!--This section was empty. Populating it with content-->

<div class="music-head"> <!--First list item: contains music details-->

     <img src="images/cattyboard.jpg" /> <!--Album art-->

     <section class="catty-music"> <!--other details of the album-->          <div>            <p>CattyBoard Top 100 Single Charts (11.06.36)</p>            <p>Unknown Artist</p>            <p>2016 . Charts . 100 songs</p>          </div>

         <div> <!--Music controls-->            <i class="fa fa-play">  Play all</i>            <i class="fa fa-plus">  Add to</i>            <i class="fa fa-ellipsis-h">  More</i>          </div>     </section>

 </div> <!--end .music-head-->

<!--Second list item: Contains a list of all songs displayed-->

<ul class="music-list">        <li>          <p>1. One Dance</p>          <p>Crake feat CatKid & Cyla</p>          <p>2:54</p>          <p><span class="catty-cloud">CATTY CLOUD SYNC</span></p>      </li>

      <li>          <p>2. Panda</p>          <p>Cattee</p>          <p>4:06</p>          <p><span class="catty-cloud">CATTY CLOUD SYNC</span></p>      </li>

      <li>          <p>3. Can't Stop the Feeling!</p>          <p>Catin Cimberlake</p>          <p>3:56</p>          <p><span class="catty-cloud">CATTY CLOUD SYNC</span></p>      </li>

      <li>          <p>4. Work From Home</p>          <p>Cat Harmony feat Colla</p>          <p>3:34</p>          <p><span class="catty-cloud">CATTY CLOUD SYNC</span></p>      </li>    </ul></section>

Um, I added a bit more than the last time but its pretty simple.
嗯,我比上一次增加了一点但很简单。

I populated the empty content section with a
我用一个填充空内容部分div that holds the album art and some details of the catty album.
它拥有专辑封面和catty专辑的一些细节。

The
ul holds a list of songs from the album.
保存专辑中的歌曲列表。

The
song title ,
artiste ,
duration and "
和" catty cloud sync " are contained in individual paragraphs within the list.
"列在清单中的各个段落中。

So what are you going to do with styling?
那么你打算怎么做造型呢?

See what I did?
看看我做了什么?

First off, you should make the
首先,你应该做到.content section a flex container.
一节flex容器。

.content {    display: flex;

    flex: 1 1 auto; /*this makes sure the section grows to fill the entire available space and shrinks too*/

    flex-direction: column;}

You should also deal with it's flex-items:
你还应该处理它的flex-items:

.music-head {   flex: 0 0 280px; /*Same memo, don't grow or shrink - stay at 280px*/

  display: flex;    padding: 40px;  background-color: #4e4e4e;}

.music-list {    flex: 1 0 auto;    list-style-type: none;    padding: 5px 10px 0px;}

.music-head holds the album art and other related album details.
持有专辑封面和其他相关专辑细节。

Same memo, do not grow or shrink but keep a height of 280px.
相同的备忘录,不要增长或缩小,但保持280px的高度。

Height? Not width? Yes!
高度?不是宽度?是!

The parent element already had the
父元素已经有了flex-direction switched.
切换。

Oh, you're going to need this to be a flex-container later on too. So put in
哦,你以后也需要将它作为一个弹性容器。所以投入display: flex

.music-list holds the list of songs and it fills up the remaining available space shared with
保存歌曲列表,它填满了共享的剩余可用空间.music-head above.
以上。

This doesn't feel very pretty yet but c'mon you're doing great if still following.
这感觉不是很漂亮但是如果你还在追随,那么你做得很好。

Thumbs up.
竖起大拇指。 catty music- unfinished
斤音乐 - 未完成

There are a few problems here.
这里有一些问题。

  1. The list of songs look terrible.

list of songs
歌曲列表

  1. The section containing the music art has really ugly looking text . Ugly looking music art texts

Again, I'll walk you through solving these problems.
再次,我将引导您解决这些问题。

Below are the solutions I propose.
以下是我提出的解决方案。

Dealing with the list of songs {#dealing-with-the-list-of-songs}

Each list of songs contain 4 paragraphs. Song title, artiste, duration, and "catty cloud sync".
每个歌曲列表包含4个段落。歌曲标题,艺人,持续时间和"catty cloud sync"。

There's got to be a way to put all of this in one line with each paragraph taking up equal space along this line.
必须有一种方法可以将所有这些放在一行中,每一段沿着这条线占据相同的空间。

Flexbox to the rescue!
Flexbox救援!

The concept here is the same employed in many grid systems.
这里的概念与许多网格系统中使用的概念相同。

Translate that to code.
将其转换为代码。

li {  display: flex; /*Paragraphs are now displayed on one line*/  padding: 0 20px; /*Some breahing space*/  min-height: 50px;}

li p {  flex: 0 0 25%; /*This is the sweet sauce*/}

You see what's happening there with the paragraphs?
你看到段落里发生了什么?

flex: 0 0 25%;

"Don't grow or shrink but each paragraph should take up 25% of the available space" .

The space is shared equally among the paragraphs.
这些空间在各段之间平均分配。

Using this Technique {#using-this-technique}

This technique is invaluable. You can use it to create unequal content areas. Say, a 2 column view.
这种技术非常宝贵。您可以使用它来创建不相等的内容区域。比如,一个2列视图。

One section can take up 60% of the available space, and the other 40%
一部分占用可用空间的60%,另一部分占40%

.first-section: 0 0 60%;

.second-section: 0 0 40%;

You can use this technique for making grid systems.
您可以使用此技术制作网格系统。

Here is how the lists should look now.
这是列表现在应该如何看待。 List of songs fixed
歌曲列表已修复

Give the lists alternating colors, deal with the "catty cloud sync" label too.
给列表交替颜色,也处理"catty cloud sync"标签。

li span.catty-cloud {  border: 1px solid black;  font-size: 0.6em;  padding: 3px;}

li:nth-child(2n) {  background-color: #f2f2f2;}

So, you're killing it, and really getting to understand the
所以,你要杀了它,真正了解它 flexbox lingo better.
更好。

This is what you should have now.
这就是你现在应该拥有的。 Catty music --- almost done
卡蒂音乐---差不多完成了

The second problem will be dealt with now.
第二个问题现在将处理。

Making the album details text look prettier. {#making-the-album-details-text-look-prettier-}

Really simple stuff going on below.
下面真的很简单。

.catty-music{  flex: 1 1 auto;  display: flex;  flex-direction: column;  font-weight: 300;  color: #fff;  padding-left: 50px;}

.catty-music div:nth-child(1){  margin-bottom: auto;}

.catty-music div:nth-child(2){  margin-top: 0;}

.catty-music div:nth-child(2) i.fa{  font-size: 0.9em;  padding: 0 0.7em;  font-weight: 300;}.catty-music div:nth-child(1) p:first-child{  font-size: 1.8em;  margin: 0 0 10px;}

.catty-music div:nth-child(1) p:not(:first-child){  font-size: 0.9em;  margin: 2px 0;}

and you did it.
你做到了

You're pretty much done.
你已经完成了很多工作。 Music art texts looking much better
音乐艺术文本看起来好多了

A quick exercise {#a-quick-exercise}

I've saved the footer for you to work on as an exercise.
我已经保存了页脚作为练习。

Try fixing the footer yourself. Just employ the same techniques. You can do this you know?
尝试自己修复页脚。只需采用相同的技术。你知道吗?

If you get stuck, you can always check out the full source code for catty music.
如果你遇到困难,你可以随时查看catty音乐的完整源代码。

You may break the entire footer into flex-items too, and get going from there.
您也可以将整个页脚打破为flex-items,然后从那里开始。 Footer explained
页脚解释道

Wow. I can't believe you got to this point. That's great! You're becoming a Flexbox ninja now.
哇。我无法相信你达到了这一点。那很棒!你现在正成为Flexbox忍者。

Next, you will see how Flexbox helps with responsive designs.
接下来,您将看到Flexbox如何帮助响应式设计。

Responsive design with Flexbox {#responsive-design-with-flexbox}

Books have been written on responsive design, good books at that.
关于响应式设计的书籍,以及好书。

Since this article focuses on the Flexbox model, I wouldn't be taking a deep plunge into the general state of responsive designs.
由于本文主要关注Flexbox模型,因此我不会深入了解响应式设计的一般状态。

Like I stated somewhere earlier, we do get some responsiveness out of the box with the Flexbox model.
就像我之前所说的那样,我们确实得到了Flexbox模型开箱即用的响应能力。

Flexbox as in "
Flexbox在" flexible box ".
"。

However, it is possible to target various screen sizes via media queries and then change the flex behavior.
但是,可以通过媒体查询来定位各种屏幕大小,然后更改弹性行为。

Here's an example.
这是一个例子。

The handy unordered list comes to the rescue again.
方便无序的清单再次拯救。

<ul>    <li>Home</li>    <li>About</li>    <li>Contact</li>    <li>Register</li>    <li>Login</li>  </ul>

and with a bit of styling...
并带有一些造型......

ul {        list-style-type: none;        display: flex;        border: 1px solid #4e4e4e;    }

li {        flex: 0 0 auto;        padding: 10px;        margin: 10px;        background-color: #8cacea;        color: #fff;        font-size: 1em;    }

You're a pro at this flex stuff now, so you understand what's going on up there.
你现在是这个灵活的东西的专业人士,所以你了解那里正在发生的事情。

Here's how the navigation bar looks.
这是导航栏的外观。 Flexbox Navigation
Flexbox导航

While this may be cool for desktops and tablets, at certain screen sizes it particularly doesn't look good.
虽然这对台式机和平板电脑来说可能很酷,但在某些屏幕尺寸下,它看起来并不好看。

On mobile, you'd want to stack the nav items vertically.
在移动设备上,您需要垂直堆叠导航项。

Then comes in media queries.
然后是媒体查询。

@media screen and (max-width: 769px) {

/* code here only applies to screen devices that have a width lesser than 769px*/         ul {        flex-direction: column; /* On smaller devices, switch the direction*/    }

}

Navigation bar for mobile devices
移动设备的导航栏

If you knew a few things about responsive designs before now, that's great.
如果您之前了解有关响应式设计的一些内容,那就太棒了。

Just transpose the Flexbox model unto your existing knowledge and you're good to go.
只需将Flexbox模型转换为您现有的知识,就可以了。

By the way, I made the assumption that you understand what media queries are.
顺便说一句,我假设您了解媒体查询是什么。

If you don't, see the quick brief below.
如果不这样做,请参阅下面的简要说明。

Media Queries {#media-queries}

Media queries are at the heart of responsive design. They let you target specific screen sizes and specify codes to be run on the devices alone.
媒体查询是响应式设计的核心。它们允许您定位特定的屏幕大小,并指定仅在设备上运行的代码。

The most popular form in which media queries are used is something called the
使用媒体查询的最流行的形式是所谓的 @media rule .

It looks like this:
它看起来像这样:

@media screen and (max-width: 300px) {  /*write your css in this code block*/}

Looking at it, you can almost guess what that does.
看着它,你几乎可以猜到它是做什么的。

"For a screen device with a maximum width of 300px ... do this and that "
"

Any styles within the code block will only apply to devices that match the expression, "
代码块中的任何样式仅适用于与表达式匹配的设备," screen and (max-width: 300px)"

I guess that helped clear up some confusion.
我想这有助于消除一些困惑。

Quick Exercise {#quick-exercise}

Catty music is displayed differently on mobile devices. That's great news. What's even better is you should try to recreate this.
Catty音乐在移动设备上的显示方式不同。这真是个好消息。什么是更好的是你应该尝试重新创建这个。 mobile catty music
移动catty音乐

In the event that you get stuck, the link to the repository for this tutorial is in the next section. The solution to this is also in the repo.
如果您遇到困难,本教程的存储库链接将在下一节中介绍。对此的解决方案也在回购中。

You're almost at the end!
你快要结束了!

In the concluding section, I'll discuss browser support, helpful links and resources to get you moving.
在结束部分,我将讨论浏览器支持,有用的链接和资源,以帮助您移动。

Conclusion {#conclusion}

You've learned how to use the flex-container and flex-item alignment properties.
您已经学习了如何使用flex-container和flex-item对齐属性。

I walked you through an understanding of absolute and relative flex, auto-margin alignments and switching flex direction.
我带您了解绝对和相对弯曲,自动边距对齐和切换弯曲方向。

You also had a chance to apply your "
你也有机会申请" flex skills" to building
建设 Catty Music and then I touched up on responsive design too.
然后我也提到了响应式设计。

It's been a long ride indeed.
这确实是一个漫长的旅程。

Now, I'd explain some final concepts to you. Help you with resources and links I think you'll find very helpful.
现在,我将向您解释一些最终概念。帮助您获得资源和链接我认为您会发现非常有帮助。

How's the browser support for Flexbox? {#how-s-the-browser-support-for-flexbox}

This is a common question asked when looking to use the Flexbox model in production.
在生产中使用Flexbox模型时,这是一个常见的问题。

I can't answer the question perfectly, but the
我不能完美地回答这个问题,但是caniuse website does justice to this.
网站对此公正。

Here's a screenshot from
这是一张截图 caniuse , and browser support is quite impressive. You may see for yourself
,浏览器支持令人印象深刻。你可能会亲眼看到here.

Early in my career, I glanced over
在我职业生涯的早期,我瞥了一眼 caniuse many times and still could not grasp what the data represented meant. So here's a brief explanation.
很多次,仍然无法掌握数据所代表的含义。所以这里有一个简短的解释。

At the right bottom of the
在右下角 caniuse website is a legend.
网站是一个传奇。
caniuse legend
传说

Take a look at the image above, or just visit the site, find the legend and you'd be good to go.
看看上面的图片,或者只是访问网站,找到传奇,你就会好起来。

That's actually all there is to it.
实际上这就是它的全部内容。

Additional resources {#additional-resources}

I hope you find these helpful:
我希望你发现这些有用:

  1. Get the entire Understanding Flexbox article as a PDF document--- direct link
  2. The Flexbox Interactive Course
  3. Play with the Catty Music code online
  4. The Repo for the entire "Understanding Flexbox" tutorial
  5. Flexbox Froggy: A Cool Flexbox Game

Finally, I must say thanks for following along.
最后,我必须感谢你们的追随。

Want to become Pro? {#want-to-become-pro}

Download my free CSS Grid cheat sheet, and also get two quality interactive Flexbox courses for free!
下载我的免费CSS Grid备忘单,并免费获得两个高质量的互动Flexbox课程!
Get the Free CSS Grid Cheat sheet + Two Quality Flexbox Courses for free!

Get them now

中英文模式阅读
中文模式阅读
英文模式阅读

查看英文原文

查看更多文章

公众号:银河系1号
公众号:银河系1号

联系邮箱:public@space-explore.com
联系邮箱:public@space-explore.com

(未经同意,请勿转载)
(未经同意,请勿转载)