flexbox:1.0.0_了解Flexbox：您需要了解的一切

flexbox:1.0.0

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 download link — no strings attached, & if you want a more immersive experience, use the interactive course — it is free. No strings attached.

如果您希望在一個.pdf文檔中閱讀整個教程，請訪問以下下載鏈接 -不附帶任何條件；如果您想獲得更身臨其境的體驗，請使用交互式課程 -免費。 沒有任何附加條件。

關于Flexbox學習曲線的說明 (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)

I’ll first walk you through the basics of Flexbox. I believe any attempt at understanding Flexbox must begin here.

我將首先向您介紹Flexbox的基礎知識。我相信任何了解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布局的音樂應用程序來完成所有工作。

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在響應式Web設計中的作用。

I’m excited to show you all this.

很高興向您展示所有這些。

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)

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編寫智能頁面布局似乎已經持續了太長時間，這使我們許多人編寫了拙劣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!

我們總是不得不處理花車，桌子上的桌子亂碼以及它們帶來的后果。如果您有一段時間寫過CSS，則可能與此有關。如果沒有，歡迎來到一個更美好的世界！

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.

現在我們都可以放棄那些駭人聽聞CSS技巧。不再過多使用浮點數，表格單元格顯示。

It’s time to embrace a cleaner modern syntax for crafting intelligent layouts. Welcome the CSS Flexbox model.

現在該采用更簡潔的現代語法來制作智能布局了。歡迎使用CSS Flexbox模型。

什么是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，還是剛剛開始，都將感到賓至如歸。

如何開始使用Flexbox模型？ (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 flex-container.

要開始使用Flexbox模型，您需要做的就是首先定義一個Flex容器。

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).

如果您看了一眼，您肯定已經看到無序列表( ul )容納了列表元素( li )。

You’d call the ul the parent element, and the li the child element.

您將ul稱為父元素，而li稱為子元素。

To use the Flexbox model, you must make a parent element a flex container (AKA flexible container).

要使用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.

您可以通過設置display: flex或display: inline-flex來實現內聯變化。就是這么簡單，然后您就可以使用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:

這是您應該擁有的：

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’.

請記住，“ li”元素本質上是塊元素，這意味著它們是垂直堆疊的，這適用于其他CSS塊元素，例如“ div”。

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.

但是，通過包含簡單的一線display:flex ，您可以立即看到布局的變化。

The list elements are now stacked horizontally, from left to right. Just like they would if you used float.

現在，列表元素從左到右水平堆疊。就像您使用float一樣。

The Flexbox model kicks in as soon as you introduce the “flex display” on any parent element.

一旦在任何父元素上引入“ flex display” ，就會啟動Flexbox模型。

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.

了解“ flex display”的加入是從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 flex container and the child elements (in this case, the list elements li) become flex items.

一旦將display屬性設置為flex，無序列表將自動成為flex容器 ，子元素(在這種情況下為list元素li )將成為flex項目 。

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.

我使用了兩個關鍵詞，我想更加強調它們。他們對于了解未來將至關重要。

Flex container : The parent element you’ve set display: flex on.
Flex容器 ：您設置的父元素display: flex on。
Flex items : The children elements within a Flex container.
Flex項目 ：Flex容器中的子元素。

This is the foundation for using the Flexbox model.

這是使用Flexbox模型的基礎。

Flex容器屬性 (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.

在以上部分中，我建立了一些基本原則。什么是彈性容器和彈性項目，以及如何啟動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: 200px, there are 6 different properties the flex container can take on.

就像您將block元素的width屬性定義為width: 200px ，flex容器可以采用6種不同的屬性。

The good news is that defining these properties doesn’t require a different approach from what you’re already used to.

好消息是，定義這些屬性不需要使用與您已經習慣的方法不同的方法。

1.伸縮方向 (1. Flex-direction)

The Flex-direction property controls the direction in which the flex-items are laid along the main axis.

Flex-direction屬性控制柔性項目沿主軸放置的方向。

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.

用外行的話來說， flex-direction屬性讓您決定彈性項目的布局方式。水平，垂直或雙向反轉。

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.

默認情況下， flex-direction屬性設置為row ，并且使flex-item沿著主軸對齊。這說明了本文開頭對無序列表的處理方式。

Even though the flex-direction property wasn't explicitly set, it took on the default value of row.

即使未明確設置flex-direction屬性，它仍采用row.的默認值row.

The flex items were then laid across the main-axis, stacking horizontally from left to right.

然后，將彈性項目橫穿主軸放置，從左到右水平堆疊。

If the flex-direction property is changed to column, the flex-items will be aligned along the cross axis.

如果flex-direction屬性更改為column,則flex-items將沿橫軸對齊。

They would stack from top to bottom, not from left to right any longer.

它們將從上到下堆疊，不再從左到右堆疊。

2.軟包裝 (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.

我將通過一個示例來解釋flex-wrap屬性的工作方式。

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

幸運的是，彈性容器可以適應新的彈性項目

Go a bit further.

再走一點。

Add a ridiculous amount of flex-items to the parent element. Make it a total of 10 items.

向父元素添加大量的flex-items。總共使10件。

What happens?

怎么了？

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-wrap屬性默認為nowrap 。這將導致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.

no-wrap不是鐵定的價值。可以更改。

With that number of flex-items, you certainly want the flex-items to “wrap” within the flex-container.

有了這么多的彈性項目，您當然希望彈性項目能夠“ 包裹”在彈性容器中。

“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.

“包裝”是一個奇特的說法，“當柔性容器中的可用空間無法再以默認寬度容納柔性項目時，分成多行。

This is possible with the wrapvalue.

使用wrap值可以做到這一點。

ul {    flex-wrap: wrap;}

With this, the flex-items now break up into multiple lines when needed.

這樣，彈性項目現在可以在需要時分成多行。

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.

請注意，彈性項目現在以其默認寬度顯示。無需將多個彈性項目強制設置為一行。

There’s one more value, wrap-reverse.

還有一個值， wrap-reverse 。

Yes, you guessed right. It lets the flex items break unto multiple lines, but in the reverse direction.

是的，你猜對了。它使flex項分解為多行，但方向相反。

3.柔性流 (3. Flex-flow)

The flex-flow is a shorthand property which takes flex-direction and Flex-wrap values.

flex-flow是一種速記屬性，它采用flex-direction和Flex-wrap值。

Ever used the border shorthand property? border: 1px solid red.

曾經使用過border速記財產嗎？ 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.*/}

Try out the other combinations this could take. flex-flow: row nowrap, flex-flow: column wrap, flex-flow: column nowrap

試用這可能需要的其他組合。 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.

產生的結果與您在flex-direction和flex-wrap值中看到的沒什么不同。

I'm sure you understand what those would produce.

我確定您了解這些會產生什么。

Give them a try.

試試看。

4.證明內容合理 (4. Justify-content)

Life’s really good with the Flexbox model. If you still doubt that, the justify-content property may convince you.

Flexbox模型的生活真的很好。如果您仍然對此表示懷疑，那么justify-content屬性可能會說服您。

The justify-content property takes on any of the 5 values below.

justify-content屬性采用以下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?

justify content屬性到底能帶來什么？

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 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:

你應該有這個：

With the justify-content property, the three flex-items may be aligned across the main-axis in whatever way you desire.

使用justify-content property ，可以按照您希望的方式在主軸上對齊三個彈性項目。

Here's the breakdown of what's possible.

這是可能的細分。

(i)彈性啟動 ((i) Flex-start)

The default value is flex-start.

默認值為flex-start 。

flex-start groups all flex-items to the start of the main axis.

flex-start將所有flex-item分組到主軸的起點。

ul {    justify-content: flex-start;  }

(ii)彈性端 ((ii) Flex-end)

flex-end groups the flex-items to the end of the main axis.

flex-end將flex-item分組到主軸的末端。

ul {    justify-content: flex-end;  }

(iii)中心 ((iii) Center)

Center does just what you'd expect: it centers the flex items along the main axis.

Center可以滿足您的期望：將flex項沿主軸居中。

ul {    justify-content: center;  }

(iv)間隔 ((iv) Space-between)

Space-between keeps the same space between each flex item.

Space-between間距在每個彈性項目Space-between保持相同的間距。

ul {    justify-content: space-between;  }

Um, did you notice anything different here?

嗯，你注意到這里有什么不同嗎？

Take a look at the descriptive image below.

看看下面的描述性圖像。

(v)環繞 ((v) Space-around)

Finally, space-around keeps the same spacing around flex items.

最后， space-around空格在彈性項目之間保持相同的間距。

ul {    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.對齊項目 (5. Align-items)

The align-items property is somewhat similar to the justify-content property.

align-items屬性有點類似于justify-content屬性。

Having understood the justify-content property, this should be easier to take in.

了解了justify-content屬性后，應該會更容易接受。

Align-items can be set to any of these values: flex-start || flex-end || center || stretch || baseline

可以將flex-start || flex-end || center || stretch || baseline Align-items設置為以下任意值： flex-start || flex-end || center || stretch || baseline 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 cross axis. This is the difference between the align-items property and justify-content.

它定義了彈性項在橫軸上的布局方式。這是align-items屬性和justify-content之間的區別。

Below is how the different values affect flex items.

以下是不同的值如何影響彈性項目。

Do not forget the direction being affected by these properties. The cross-axis.

不要忘記方向受這些屬性的影響。橫軸。

(i)伸展 ((i) Stretch)

The default value is stretch. This will “stretch” the flex-items so they fill the entire height of the flex container.

默認值為stretch. 這將“ 拉伸”彈性項目，以便它們填充彈性容器的整個高度。

(ii)彈性啟動 ((ii) Flex-start)

The flex-start does what you expect. It groups the flex items to the start of the cross-axis.

flex-start可以滿足您的期望。它將彈性項目組合到橫軸的起點。

(iii)彈性端 ((iii) Flex-end)

As expected, flex-end groups the flex items to the end of the cross-axis.

如預期的那樣， flex-end將flex項目分組到橫軸的末端。

(iv)中心 ((iv) Center)

The center value is equally predictable. It aligns the flex items to the center of the flex-container.

center值同樣可以預測。它將彈性項目與彈性容器的中心對齊。

(v)基準 ((v) Baseline)

And the baseline value?

和基線值？

It aligns flex-items along their baselines.

它將彈性項目沿其基線對齊。

“Baseline” really sounds fancy.

“ 基準 ”確實聽起來很花哨。

The result appears to look just like flex-start but it is subtly different.

結果看起來像flex-start但是有細微的差別。

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”?

注意所有彈性項目如何對齊以使其內容位于“基線”上？

6.內容一致 (6. Align-content)

While discussing the wrap property, do you remember what happened when you added more flex-items to the flex-container?

在討論wrap屬性時，您還記得在flex容器中添加更多flex項目時會發生什么情況嗎？

You got a multi-line flex container.

您有一個多行 flex容器。

The align-content property is used on multi-line flex-containers.

align-content屬性用于多行撓性容器。

It takes the same values as align-items apart from baseline.

除baseline外，它的取值與align-items相同。

By definition, it controls how the flex-items are aligned in a multi-line flex container.

根據定義，它控制在多行flex容器中如何對齊flex-items。

Just like align-items, the default value is also stretch

就像align-items ，默認值也是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.

這些是您現在應該熟悉的值。因此，這就是它們如何影響具有10個flex-items的多行 flex-container。

(i)伸展 ((i) Stretch)

With stretch, the flex items are “stretched” to fit the available space along the cross-axis.

使用stretch ，可將彈性項目“拉伸”以適應橫軸上的可用空間。

The spacing you see between the flex items below is owing to the margin set on the items.

您在下面的彈性項目之間看到的間距是由于在項目上設置的margin所致。

(ii)彈性啟動 ((ii) Flex-start)

You’ve seen the flex-start value before.

您之前已經看過flex-start值。

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)彈性端 ((iii) Flex-end)

The flex-end value aligns the flex items to the end of the cross-axis.

flex-end值將flex項目與橫軸的末端對齊。

(iv)中心 ((iv) Center)

Like you may have guessed, center aligns the flex-items to the center of the cross-axis.

就像你可能已經猜到了， center對齊柔性項的十字軸的中心。

That’s the last of the flex-container properties.

這是flex容器屬性的最后一個。

You now understand how to use the various flex-container properties.

現在，您了解了如何使用各種flex容器屬性。

You’ll use these to work through the practical sections coming up.

您將使用它們來完成接下來的實際部分。

彈性項目屬性 (The Flex Item Properties)

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

In the previous section, I explained flex-containers and their alignment properties.

在上一節中，我解釋了伸縮容器及其對齊屬性。

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.

現在，我將注意力從柔韌性容器上移開，并帶您逐步了解柔韌性項目及其對齊屬性。

Like flex-containers, a couple alignment properties are also made available on all flex-items, too.

像彈性容器一樣，所有彈性項目也都具有一對對齊屬性。

Let me walk you through them.

讓我一窺你。

1.訂購 (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屬性將彈性項目從一個位置移動到另一個位置。就像您要處理“可排序”列表一樣。

This is done without affecting the source code. Which means the position of the flex items in the HTML source code isn’t changed.

這樣做不會影響源代碼。這意味著flex項在HTML源代碼中的位置未更改。

The default value for the order property is 0. It may take on either negative or positive values.

order屬性的默認值為0。它可以采用負值或正值。

It’s worth noting that flex items are re-ordered based on the number values of the order property. From lowest to highest.

值得注意的是，彈性商品是根據order屬性的數字值重新排序的。從最低到最高。

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 order value of 0.

默認情況下，彈性商品的order值均為0 。

Just as you expected, you get this (see below) after some basic styling.

正如您所期望的，經過一些基本的樣式設置后，您將獲得此效果(請參見下文)。

The Flex items are displayed just as specified in the HTML source order. Flex item 1, then 2, 3, and 4.

Flex項目的顯示與HTML源順序中指定的一樣。彎曲項目1，然后2，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?

如果出于某種原因您希望彈性項目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.

現在，這是order屬性的來源。

All you need to do is make the order value of flex-item 1 higher than that of other list items.

您需要做的就是使flex-item 1的order價值高于其他列表項目的order價值。

If you ever used the z-index property on block elements, you'd be familiar with this sort of thing.

如果您曾經在塊元素上使用過z-index屬性，您會很熟悉這種事情。

/*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.

現在，彈性項目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.

彈性項目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 order value.

是的，你猜對了。它也在堆棧上。現在，它表示具有最高order值的彈性項目。

And what happens when two flex items have the same order value?

當兩個彈性商品具有相同的訂單值時會發生什么？

In the example below, flex-item 1 and 3 are given the same order values

在下面的示例中，彈性項目1和3被賦予相同的order值

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

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

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).

這次，彈性項目3出現在最后，因為它在源文件(HTML文檔)中的彈性項目1之后。

The re-ordering is based on the positions in the source file, when two or more flex items have the same order value.

當兩個或更多彈性項目具有相同的訂購值時，重新排序基于源文件中的位置。

That was a lot of explanation.

那是很多解釋。

I’d move on to some other property.

我將繼續其他財產。

2.彎曲生長和彎曲收縮 (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.

flex-grow和flex-shrink屬性使我們可以更多地利用這種“ 靈活性” 。

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-grow和flex-shrink屬性控制彈性項目在有多余空間的情況下應“增長”(擴展)多少，在沒有多余空間的情況下應“收縮”多少。

They may take up any values ranging from 0 to any positive number. 0 || 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.

有了更多的樣式，它看起來像這樣。

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-grow屬性設置為0 。言外之意，彈性項目不會增長以適應整個可用空間。

The value 0 is like a “turn-off” switch. The flex-grow switch is turned off.

值0就像一個“關閉”開關。 flex-grow開關已關閉。

However, if you changed the flex-grow value to 1, here's what happens.

但是，如果將flex-grow值更改為1 ，則會發生這種情況。

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.

如果您嘗試調整瀏覽器的大小，則彈性項目也會“縮小”以適應新的屏幕寬度。

Why? By default, the shrink property is set to 1. Which means the flex-shrink switch is also turned on!

為什么？默認情況下， shrink屬性設置為1。這意味著flex-shrink開關也已打開！

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.

我將仔細研究一下flex-grow和flex-shrink屬性，以防您仍然對自己的理解沒有信心。

3.彈性基礎 (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.

還記得我怎么說彈性項目的美是“靈活的”嗎？好吧，看來您對此也有控制權。

The flex-basis property specifies the initial size of a flex-item. Before the flex-grow or flex-shrink properties adjust it's size to fit the container or not.

flex-basis屬性指定彈性項目的初始大小。在flex-grow或flex-shrink屬性調整之前， flex-grow調整大小以適合容器。

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

默認值為flex-basis: auto 。 Flex-basis可以采用您在常規width屬性中使用的任何值。也就是說， percentages || ems || rems || pixels percentages || ems || rems || pixels percentages || ems || rems || pixels等

Note that when trying to set the basis property to a zero based value, use the unit also. Use flex-basis: 0px not just flex-basis: 0

請注意，嘗試將基本屬性設置為從零開始的值時，請同時使用單位。使用flex-basis: 0px不僅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.

默認情況下，彈性項目的初始寬度受默認值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).

flex-item的寬度是根據內容大小“ 自動 ”計算的(顯然，還要加上您設置的任何填充)。

This means if you increased the content in the flex-item, it automatically resizes to fit.

這意味著，如果您增加彈性項目中的內容，它將自動調整大小以適合。

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

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.

現在，彈性項目已被限制為150px的寬度。

It’s getting even more interesting.

它變得越來越有趣。

4. flex的簡寫 (4. The flex shorthand)

The flex shorthand allows you set the flex-grow, flex-shrink and flex-basis properties all at once.

flex簡寫允許您一次設置flex-grow ， flex-shrink和flex-basis屬性。

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

上面的代碼等于設置三個屬性： flex-grow: 0; flex-shrink: 1; flex-basis: auto 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.

先flex-shrink Flex-grow ，然后flex-shrink ，然后flex-basis 。首字母縮寫詞， GSB可能會有所幫助。

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.

如果僅設置flex-grow和flex-shrink值，則flex-basis將默認為零。

This is called an absolute flex. And when you set only the flex-basis, you get a relative flex.

這稱為絕對撓曲 。當您僅設置flex-basis ，您將獲得一個相對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.

這與編寫flex: default相同，它是所有flex項目的默認行為。

Let me break this down, just a bit.

讓我分解一下。

It’s easier to understand this by taking a look at the flex-basis property first.

首先查看flex-basis屬性會更容易理解這一點。

The flex-basis is set to auto, which means the initial width of the flex-item will be automatically determined based on the size of the contents.

flex-basis設置為auto ，這意味著flex-item的初始寬度將根據內容的大小自動確定。

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.

轉到下一個屬性， flex-grow值為零。這意味著flex-grow屬性不會篡改flex項目的初始寬度。

The grow switch is off.

增長開關關閉。

Since flex-grow controls the “growth” of the flex-items and it’s set to zero, the flex-items will not “grow” to fit the screen.

由于flex-grow控制flex-item的“ 增長 ”并將其設置為零，因此flex-items將不會“增長”以適合屏幕。

Finally, the flex shrink value is 1. It says this — “shrink the flex-item when it is necessary”

最后，flex收縮值為1。它說- “在必要時收縮flex-item”

Here is what this looks like when applied to some flex items.

這是應用于某些彈性項目時的外觀。

Notice how the flex items don’t grow. The width is computed automatically, and they shrink upon resizing the browser — if necessary.

請注意彈性項目如何不增長。寬度是自動計算的，并且在調整瀏覽器大小時會縮小(如有必要)。

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.

這與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速記如何影響兩個flex項目。一個容納比另一個容納更多的內容。

The first thing you should notice is, the flex items both have different widths.

您應該注意的第一件事是，伸縮項目都具有不同的寬度。

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.

嘗試調整瀏覽器的大小，您會注意到彈性項目不會隨其寬度縮小。它們從父元素中彈出，您必須水平滾動瀏覽器才能查看所有內容。

No worries, I’ll show you how to deal with this weird behavior later.

不用擔心，稍后我將向您展示如何處理這種奇怪的行為。

3. `Flex: 1 1 auto` (3. `Flex: 1 1 auto`)

This is same as flex: auto.

這與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.

增長和收縮開關打開，寬度自動計算。

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: “positive number” 1 0 。

flex: 2 1 0is the same as writingflex:2 2 represents any positive number.

flex: 2 1 0與寫flex:2 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”

按照我之前建立的相同框架，它說：“ 將flex項目的初始寬度設置為零(ehm，沒有寬度？)，增加項目以填充可用空間，并在可能的情況下最終收縮項目”

With the flex items having “no width”, how’s the width computed?

如果flex項目具有“ no width ”，那么如何計算寬度？

The flex-grow value takes over, and determines the extent the flex item “widens”.

flex-grow值將接管，并確定flex項目“ 拓寬 ”的程度。

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-basis are set to any zero based values e.g. 0px

當您有多個flex項目的初始寬度flex-basis設置為任何基于零的值(例如0px)時，使用此flex速記更為實用

What really happens is, the widths of the flex items are computed based on the ratios of the flex-grow value.

實際發生的是，根據flex-grow值的比率來計算彈性項目的寬度。

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-grow : 1可以使flex-item填充可用空間。增長開關已打開。

Here you have two flex-items. One has aflex-grow property of 1 and the other 2, what then happens?

在這里，您有兩個彈性項目。一個具有flex-grow的特性1 ，另2 ，什么接下來會發生？

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.

基本數學比率。 individual ratio / total ratio我希望您不要跳過那些數學課程。

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.自我調整 (5. Align-self)

The align-self property takes a step further in giving us so much control over flex items.

align-self屬性進一步使我們對flex項有了很多控制。

You already saw how the align-items property helps in collectively aligning all flex-items within a flex-container.

您已經了解了align-items屬性如何幫助將Flex容器內的所有flex-item統一對齊。

What if you wanted to change the position of a single flex-item along the cross-axis, without affecting the neighboring flex-items?

如果您想更改單個彈性項目沿橫軸的位置而不影響相鄰的彈性項目怎么辦？

This is where the align-self property comes to the rescue.

這就是align-self屬性得到拯救的地方。

It may take on any of these values: auto || flex-start || flex-end || center || baseline || stretch

它可以采用以下任何一個值： auto || flex-start || flex-end || center || baseline || stretch 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.

目標彈性項目為紅色。

1.彈性端 (1. Flex-end)

flex-end aligns the targeted item to the end of the cross axis.

flex-end將目標項目與橫軸flex-end對齊。

`2. Center` (`2. Center`)

center aligns the targeted item to the center of the cross axis.

center將目標項目與十字軸的center對齊。

`3. Stretch` (`3. Stretch`)

stretch “stretches” the targeted flex item to fill up the available space along the cross axis.

stretch “拉伸”目標柔性項目以沿橫軸填充可用空間。

`4. Baseline` (`4. Baseline`)

baseline aligns the targeted flex item along the baseline.

baseline將目標彈性項目沿baseline對齊。

It does look like the same result as flex-start but I’m sure you understand what the baseline is.

它看起來確實與flex-start相同，但我確定您了解基線是什么。

I explained that much earlier.

我早就解釋了。

`5. auto` (`5. auto`)

auto sets the value of the targeted flex item to the parent’s align-items value or stretch if the element has no parent.

auto將目標彈性項目的值設置為父align-items的align-items值，或者在元素沒有父align-items的情況下align-items stretch 。

In the case below, the flex-container has an align-items value of flex-start

在以下情況下，flex容器的flex-start的align-items值

This aligns all the flex-items to the start of the cross-axis.

這會將所有彈性項目與橫軸的起點對齊。

The targeted flex-item now inherits the flex-start value — the parent’s align-items value.

現在，目標彈性項目會繼承flex-start值-父級的align-items值。

This is the base styling on the flex-items used above. Just so you understand what’s going on even better.

這是上面使用的彈性項目的基本樣式。只是為了讓您更好地了解正在發生的事情。

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.)

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?

絕對彈性項目和相對彈性項目之間的真正區別是什么？

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.

相對彈性項目內的間距是根據其內容大小計算的。在絕對彈性項目中，它完全基于“彈性”，而不是內容。

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

如果您已經忘記，則flex: 1 1 auto與設置相同： flex-grow: 1 flex-shrink: 1和flex-basis: auto

Using the framework I established earlier, the initial widths of the flex-items are automatically computed flex-basis: auto, and then they "grow" to fit the available space flex-grow: 1.

使用我之前建立的框架，可以自動計算flex-items的初始寬度flex-basis: auto ，然后對其進行“ 增長 ”以適應可用空間flex-grow: 1 。

When flex-items have their widths computed automatically, flex-basis: auto, it is based on the size of the content contained within the flex-items.

當flex-item的寬度自動計算時， flex-basis: auto ，它基于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-item沒有相同大小的內容。因此，彈性項目的大小將不相等。

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 relative flex-items.

上例中的flex-item是相對 flex-item。

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?

您是否看到這兩個彈性項目的寬度相同？

The initial widths of the flex-items is zero flex-basis: 0, and then they “grow” to fit the available space.

flex-items的初始寬度為零flex-basis: 0 ，然后它們“ 增長”以適應可用空間。

When there are two or more flex-items with zero based flex-basis values, they share the spacing available based on the flex-grow values.

當有兩個或多個彈性項目的flex-basis值為零時，它們共享基于flex-grow值的可用間距。

I talked about this earlier.

我剛才談到了這一點。

Now the widths aren’t computed based on content size. The widths are based on the flex value specified.

現在，不再根據內容大小來計算寬度。寬度基于指定的柔韌性值。

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)

當心`margin: auto`在彈性項目上`margin: auto`對齊。 (Beware of `margin: auto` alignment on flex items.)

When you use margin: auto on flex-items, things can look quite weird.

當您使用margin: auto在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 auto will take up any empty spaces available.

當您在彈性項目上使用margin: auto時，值為auto的方向(左，右或兩個方向)將占用任何可用的空白空間。

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.

請參閱下面的結果。

There are a couple of things to note here:

這里有幾件事要注意：

The flex-grow value is set to zero. This explains why the list items don't grow
flex-grow值設置為零。這解釋了為什么列表項沒有增長
The flex-items are aligned to the start of the main-axis (the default behavior)
彈性項目與主軸的起點對齊(默認行為)
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.

現在，在第一個列表項(品牌)上使用margin: auto ，看看會發生什么。

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

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 valueauto will take up any empty spaces available.

在彈性項目上使用margin:auto時，值為auto的方向(左，右或兩個方向)將占用任何可用的空白空間。

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}

Now the space is distributed across both sides of the flex-item.

現在，空間分布在彈性項目的兩側。

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 justify-content property no longer works.

在彈性項目上使用自動邊距對齊時， justify-content屬性不再起作用。

For instance, setting a different alignment option on the flex-container above via the justify-content property, has no impact on the layout.

例如，通過justify-content屬性在上方的flex-container上設置其他對齊選項不會對布局產生影響。

ul {    justify-content: flex-end;}

實際用例 (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 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

我建議您實際編寫代碼作為一種練習。我在這里寫了一個實用指南：用Flexbox創建的最受歡迎的導航欄

Go take a look.

快去看看

I’ll wait.

我會等。

切換彈性方向時會發生什么？ (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.

我敢打賭，“ flex world”的許多新來者也是如此。

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.

如前一節所述，這正是使用flex-direction: column時發生的情況。

When you use flex-direction: column, the main and cross axis are changed as seen below.

當您使用flex-direction: column ，主軸和交叉軸將如下所示進行更改。

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!

但是，將flex方向切換為column ，它不再遵循“ English Language ”模式，而是遵循日語！

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.)

如果您用日語寫過任何文字，就會很熟悉。 (For the record, I've never written any text in Japanese.)

Japanese text is traditionally written from top to bottom! Not so weird, huh?

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.

Take a look at this example. The standard unordered list with 3 list items, except this time I’ll change the flex-direction.

Take a look at this example. The standard unordered list with 3 list items, except this time I'll change the flex-direction.

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

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

Here’s the look before the change in direction:

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.

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.

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.

…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.

I was wrong — or better put, I was thinking in “English”. Let’s switch to Japanese for a bit.

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”.

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.

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.

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 “move the flex-items to the center of the main-axis”.

In English language, which is how you've dealt with flex-containers until now. That'd mean “ move the flex-items to the center of the main-axis ”.

So, you’d have used justify-content: center

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.

Since the direction's changed, the center is along the cross-axis — not the main-axis.

Take a look again:

So please think in terms of Japanese text.

So please think in terms of Japanese text .

The main-axis is from top-to-down, you don’t need that.

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.

瞧！ You've got the flex-items centered.

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.

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 flex-direction that’s in place.

It's worth understanding that all Flexbox properties work based on the 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 :-)

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.

Philip Walton, in his solved-by-flexbox project lists 6 classic problems (as of this writing).

Philip Walton , in his solved-by-flexbox project lists 6 classic problems (as of this writing).

He extensively discusses the previous limitations with CSS, and the current solution Flexbox provides.

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.

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.

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 repository.

If you're the not the type of person who writes CSS in their dreams, you may want to watch this github repository .

Some people who are smarter than I am curate a list of Flexbox bugs and their workarounds there.

It’s the first place I look when something isn’t working as I expect.

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.

I'll be working you through some prominent bugs in the practical section coming next too.

So you’re covered!

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'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.

I call it catty music .

Maybe by 2036, we’d have cats singing in rock bands somewhere in Mars :-)

Maybe by 2036, we'd have cats singing in rock bands somewhere in Mars :-)

Here’s what the finished layout looks like, and it is completely laid out with Flexbox.

Here's what the finished layout looks like, and it is completely laid out with Flexbox.

You can view it online here.

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.

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 got a confession to make though.

I’ve done something considered wrong by many.

I've done something considered wrong by many.

I’ve completely built the overall layout with Flexbox.

I've completely built the overall layout with 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.

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.

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.

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 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

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.

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.

Everything in Catty Music is laid out using the Flexbox model — this is intentional to show off what's possible.

So let’s get this thing built!

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.

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.

You then leverage the powerful alignment properties Flexbox makes available.

細目分類 (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).

This makes total sense, as item 1 contains every part of the layout other than the “footer” — the section that contains the music control buttons.

This makes total sense, as item 1 contains every part of the layout other than the “ footer” — the section that contains the music control buttons.

Did you know that a flex-item could also be made a flex-container?

Yep, it’s possible!

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.

The sidebar(item 1b) and main section(item 1a) would then be flex-items.

You’re still with me, right?

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.

When you begin building even more complex layouts with the Flexbox model, you'd see how vital this is.

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).

It could also be made a flex container to house the sections highlighted below. “Item 1a — A” and “Item 1a — B”

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.

Yes that’s possible, since “Item 1a — A” and “Item 1a — B” are stacked vertically.

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.

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.

The “flex” in Flexbox means flexible.

The “ flex ” in Flexbox means flexible.

Flex-containers are by default flexible, kind off responsive.

This may be another reason to use a flex-container over regular “divs”. This depends on the case scenario though.

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.

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.

<!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.

This is exactly what the code above does. It sets the body element’s display property to flex

This is exactly what the code above does. It sets the body element's display property to flex

Now you have a flex container, the body element.

The flex items are defined too (item 1 and item 2) — as in the breakdown earlier done.

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.

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 flex-shrink property to zero. Why?

Just set the flex-grow value to 1. You should also set the flex-shrink property to zero. 為什么？

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.

In some browsers, there's a bug that allows flex-items to shrink below their content size. It's quite a weird behavior.

The workaround to this bug is to keep the flex-shrink value at 0 , not the default value of 1, and also set the flex-basis property to auto.

The workaround to this bug is to keep the 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.”

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 shrink property. It is based on the recomputing the width of the flex item automatically. flex-basis: auto

The flex item would shrink upon resizing the browser. The resizing isn't based on the 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.

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.

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:

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:

Here's what you should have now:

Seeing how things are beginning to take shape, you’ll make it even better.

Seeing how things are beginning to take shape, you'll make it even better.

If you’re coding along, update your HTML document.

If you're coding along, update your HTML document.

<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 aside tag.

Having your desired icon is as simple as just adding a CSS class. This is what I've done within the 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.

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.

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.

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.

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.

The main content section is currently empty. Don’t forget it’s the second list-item. The sidebar is first.

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.

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.

More importantly, it'd help you understand the next code listing.

Update your HTML document and have these within the .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.

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.

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.

.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:

You should also deal with it's 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.

Height? Not width? Yes!

Height? Not width? 是!

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.

This doesn't feel very pretty yet but c'mon you're doing great if still following.

Thumbs up.

There are a few problems here.

The list of songs look terrible.
The list of songs look terrible.

2. The section containing the music art has really ugly looking text.

2. The section containing the music art has really ugly looking text .

Again, I’ll walk you through solving these problems.

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”.

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.

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!

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?

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”.

“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.

One section can take up 60% of the available space, and the other 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.

Give the lists alternating colors, deal with the “catty cloud sync” label too.

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.

So, you're killing it, and really getting to understand the flexbox lingo better.

This is what you should have now.

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.

You're pretty much done.

A quick exercise (A quick exercise)

I’ve saved the footer for you to work on as an 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.

You may break the entire footer into flex-items too, and get going from there.

Wow. I can’t believe you got to this point. That’s great! You’re becoming a Flexbox ninja now.

哇。 I can't believe you got to this point. 那很棒！ You're becoming a Flexbox ninja now.

Next, you will see how Flexbox helps with responsive designs.

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.

Since this article focuses on the Flexbox model, I wouldn't be taking a deep plunge into the general state of responsive designs.

Like I stated somewhere earlier, we do get some responsiveness out of the box with the Flexbox model.

Flexbox as in “flexible box”.

Flexbox as in “ 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.

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.

Here's how the navigation bar looks.

While this may be cool for desktops and tablets, at certain screen sizes it particularly doesn’t look good.

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.

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*/    }

If you knew a few things about responsive designs before now, that’s great.

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.

Just transpose the Flexbox model unto your existing knowledge and you're good to go.

By the way, I made the assumption that you understand what media queries are.

If you don’t, see the quick brief below.

If you don't, see the quick brief below.

媒體查詢 (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.

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 music is displayed differently on mobile devices. 這真是個好消息。 What's even better is you should try to recreate this.

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!

You're almost at the end!

In the concluding section, I’ll discuss browser support, helpful links and resources to get you moving.

In the concluding section, I'll discuss browser support, helpful links and resources to get you moving.

結論 (Conclusion)

You’ve learned how to use the flex-container and flex-item alignment properties.

You've learned how to use the flex-container and flex-item alignment properties.

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.

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.

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.

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.

I can’t answer the question perfectly, but the caniuse website does justice to this.

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.

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.

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.

Take a look at the image above, or just visit the site, find the legend and you’d be good to go.

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.

That's actually all there is to it.

額外資源 (Additional resources)

I hope you find these helpful:

Get the entire Understanding Flexbox article as a PDF document — direct link
Get the entire Understanding Flexbox article as a PDF document — direct link
The Flexbox Interactive Course
The Flexbox Interactive Course
Play with the Catty Music code online
Play with the Catty Music code online
The Repo for the entire “Understanding Flexbox” tutorial
The Repo for the entire “Understanding Flexbox” tutorial
Flexbox Froggy: A Cool Flexbox Game
Flexbox Froggy: A Cool Flexbox Game

Finally, I must say thanks for following along.