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


本文将介绍使用CSS Flexbox模型获得好处所需的所有基本概念。这是一个很长的,所以我希望你已经准备好了。


如果您希望在单个.pdf文档中阅读整个教程,请参阅download link
---没有任何附加条件,如果你想要更加身临其境的体验,请使用the interactive course
--- it is free. No strings attached.

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


这是Philip Roberts发来的一条推文,我非常尊重这位开发人员:


学习Flexbox一开始可能并不好玩。它将挑战你对CSS中布局的了解。但那没关系。值得学习的一切都是这样开始的。


Flexbox当然是你应该认真对待的东西。它为现代的布局内容铺平了道路,并且它不会很快消失。它已成为一种新标准。所以伸出双臂,拥抱它!

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


我将首先向您介绍Flexbox的基础知识。我相信任何理解Flexbox的尝试都必须从这里开始。
Flexbox基础知识


学习基础知识很酷。更酷的是应用这些基础知识来构建真实世界的应用程序。


我会引导你建造很多"小东西"。之后,我将用这个完全由Flexbox布局的音乐应用程序进行整理。
音乐应用布局


这看起来不漂亮吗?


当您学习构建音乐应用程序布局时,我将深入了解Flexbox的内部工作原理。您还可以了解Flexbox在响应式网页设计中的作用。


我很高兴向您展示这一切。
GIF由Jona Dinges


但在开始构建用户界面之前,我将首先引导您完成一些练习。这可能看起来很无聊,但这都是让你熟练掌握Flexbox的过程的一部分。


让我们开始吧。

Introduction {#introduction}


CSS在过去几年中发展了很多。设计人员喜欢引入滤波器,转换和变换。但缺少一些东西。我们都渴望的东西。


使用CSS制作智能页面布局似乎已经持续了太长时间,这让我们很多人编写了hacky CSS。


我们总是不得不处理浮动,桌面展示黑客以及它们带来的后果。如果你已经写了一段时间,你可能会与此有关。如果没有,欢迎来到一个更美好的世界!


看起来我们的祈祷作为设计师和前端开发人员终于被听到了。这一次,盛大的风格。


现在我们都可以放弃那些hacky CSS技巧。不再使用浮子,台式电池显示器。


现在是时候采用更清晰的现代语法来制作智能布局。欢迎使用CSS Flexbox模型。

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


根据规范,Flexbox模型提供了一种在文档中元素之间布局,对齐和分配空间的有效方法 - 即使视口和元素的大小是动态的还是未知的。


如果这听起来太正式,我理解这种感觉。稍等一下,我将用简单的英语解释这意味着什么。


无论您是在梦中编写CSS,还是刚开始使用CSS,您都会感到宾至如归。

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


这是每个人都提出的第一个问题,答案比你想象的要简单得多。


要开始使用Flexbox模型,您需要做的就是首先定义一个 flex-container.


在常规HTML中,布局一个简单的项目列表采用以下形式:

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

如果你看了一眼,你必须看到无序列表(ul
容纳列表元素(li
)。


你打电话给ul
parent
元素,和li
child
元件。


要使用Flexbox模型,必须将父元素设置为Flex容器(AKA flexible container
)。


你可以通过设置来完成display: flex
要么display: inline-flex
对于内联变体。就这么简单,从那里你就可以使用Flexbox模型了。


实际发生的是,立即启动Flexbox格式化上下文。


告诉你,它没有你想象的那么困难。


使用无序列表和一堆列表元素,下面是启动Flexbox格式化上下文的内容。

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

对列表项进行一些设置样式,这样您就可以看到这里发生了什么。

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

这是你应该拥有的:
Flexbox已激活


你可能没有注意到,但已经发生了一些事情。现在启动Flexbox格式化上下文。


请记住,&#39;li&#39;元素本质上是块元素,这意味着它们是垂直堆叠的,这适用于其他CSS块元素,例如&#39;div&#39;。
默认查看&#39;divs&#39;


上图是您可能希望得到的结果。


但是,加上那个简单的单线程,display:flex
,你可以立即看到布局的变化。


列表元素现在从左到右水平堆叠。就像你使用它们一样 float.

Flexbox已启用


一旦您介绍"Flexbox模型"就会启动 flex display"
在任何父元素上。


您可能无法理解为什么列表元素的方向发生了变化。我保证很快就会进入那种内部运作。目前,盲目信任就足够了。


理解包含" flex display"
从Flexbox模型开始。


还有一件事我需要引起你的注意。


只要将display属性设置为flex,无序列表就会自动成为 flex container
和子元素(在这种情况下,列表元素li
成为 flex items


当我向您介绍Flexbox模型所具有的一些更有趣的内容时,这些术语会一次又一次地出现。


我用了两个关键词,我想更加重视它们。它们对于理解未来的发展至关重要。

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


这是使用Flexbox模型的基础。

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

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


在上面的部分中,我建立了一些基本原则。什么是flex-container和flex-items,以及如何启动Flexbox模型。


现在是将所有这些充分利用的好时机。


将父元素设置为Flex容器后,可以在Flex容器上使用几个对齐属性。


就像你在块元素上定义width属性一样width: 200px
,flex容器可以采用6种不同的属性。


好消息是,定义这些属性并不需要采用与您已习惯的方法不同的方法。

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


Flex-direction
property控制flex项目沿着方向放置的方向 main axis


它可能需要四个值中的任何一个。

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

用外行人的话说,flex-direction
属性让你决定如何布置弹性项目。或 horizontally
vertically
要么 reversed
在两个方向。


从技术上讲," horizontal
"和" vertical
"这不是所谓的方向 "flex world"


这些被描述为 main-axis
cross axis.
默认值如下所示。


再次以外行人的话说,主轴的默认方向感觉就像" horizontal.
" 从左到右。


横轴感觉就像" vertical.
" 从上到下。


默认情况下flex-direction
属性设置为row
并且它沿主轴对齐柔性项目。这解释了本文开头的无序列表发生了什么。


即便如此flex-direction
属性未显式设置,它采用默认值row.


然后将柔性物品铺设在主轴上,从左到右水平堆叠。
柔性物品堆叠在主轴上


如果flex-direction
财产改为column,
flex项目将沿横轴对齐。


它们将从上到下堆叠,而不是从左到右堆叠。
横跨轴堆叠的柔性物品

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


flex-wrap属性可以采用以下三个值中的任何一个:

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

我会解释一下flex-wrap
物业的工作原理通过一个例子来指导你。


尝试将更多列表项添加到无序列表中。


你怎么看? 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>

幸运的是,flex-container适应新的flex-items
另外3个flex-items添加到无序列表中


走得更远。


向父元素添加一些荒谬的flex项。共计10项。


怎么了?
添加更多列表项后


同样,即使浏览器需要水平滚动,Flex容器也能适应所有孩子。


这是每个Flex容器的默认行为。一个弹性容器将继续在一条线上容纳更多的柔性物品。


这是因为flex-wrap
属性默认为nowrap
。这会导致Flex容器不会换行。

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

no-wrap
不是铁的价值。它可以改变。


有了这么多的flex项,你当然希望flex-items能够" wrap"
在flex容器中。


"Wrap"是一个奇特的词,"当flex-container中的可用空间不能再以其默认宽度容纳flex-items时,可以打破多行。


这是可能的wrap
值。

ul {    flex-wrap: wrap;}

有了这个,flex-items现在可以在需要时分成多行。


在这种情况下,当一行不能再包含其默认宽度的所有列表项时,它们会分成多行。即使在调整浏览器大小。


这就是它的样子。


请注意,弹性项目现在以默认宽度显示。不需要将多个弹性项强制为一行。
flex-wrap已启动


还有一个价值,wrap-reverse


是的,你猜对了。它允许弹性项目突破多行,但反向。
flex-items包装相反

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


flex-flow
是一个简写的属性flex-direction
Flex-wrap
值。


曾经使用过border
速记财产?border: 1px solid red


这是相同的概念。在一行中声明的多个值。


请参阅下面的示例。

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


flex-flow分解成碎片


试试这可能采取的其他组合。flex-flow: row nowrap
flex-flow: column wrap
flex-flow: column nowrap


产生的结果与您所看到的结果没有什么不同flex-direction
flex-wrap
值。


我相信你明白那会产生什么。


试一试。

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


Flexbox模型的生活非常好。如果你仍然怀疑,那justify-content
财产可能会说服你。


justify-content
property取以下5个值中的任何一个。

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

究竟是什么呢justify content
物业带来了什么?


好吧,它可能会提醒你text-align属性。


justify内容属性定义了如何在其上布置弹性项目 main axis


一个简单的例子。


考虑下面简单的无序列表。

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

添加一些基本样式。

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

你应该这样:
"启动"flexbox后的默认视图


随着justify-content property
,三个柔性物品可以以您想要的任何方式在主轴上对齐。


这是可能的细分。

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


默认值为flex-start

flex-start
将所有flex-items分组到 start
主轴。

ul {    justify-content: flex-start;  }


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

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

flex-end
将flex-items分组到 end
主轴。

ul {    justify-content: flex-end;  }


justify-content:flex-end

(iii) Center {#-iii-center}

Center
可以满足您的期望:它将Flex项目沿主轴居中。

ul {    justify-content: center;  }


辩解内容:中心

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

Space-between
在每个弹性项目之间保持相同的空间。

ul {    justify-content: space-between;  }


辩解内容:间隔


嗯,你注意到有什么不同吗?


看一下下面的描述性图片。

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


最后,space-around
在flex项目周围保持相同的间距。

ul {    justify-content: space-around;  }


辩解内容:空间


第二眼看起来没有伤害。


请参阅下面的描述性图片。


不要担心,如果这些似乎太过分了。通过一些练习,您将对语法非常熟悉。


请务必了解它们如何影响沿主轴的柔性项目的显示。

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


align-items
财产有点类似于justify-content
属性。


了解了justify-content
财产,这应该更容易接受。

Align-items
可以设置为以下任何值:flex-start || flex-end || center || stretch || baseline

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

它定义了flex-items的布局方式 cross axis
。这是之间的区别align-items
财产和justify-content


以下是不同值对Flex项目的影响。


不要忘记受这些属性影响的方向。横轴。

(i) Stretch {#-i-stretch}


默认值为stretch.
这将 " stretch"
flex-items使它们填充flex容器的整个高度。
align-items:拉伸

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


flex-start
做你期望的。它将弹性项目分组到横轴的起点。
align-items:flex-start

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


正如所料,flex-end
将弹性项目分组到横轴的末尾。
align-items:flex-end

(iv) Center {#-iv-center}


center
价值同样可以预测。它将flex项目与flex-container的中心对齐。
align-items:center

(v) Baseline {#-v-baseline}


和基线值?


它沿着它们对齐flex-items baselines

align-items:baseline


" Baseline
"真的很奇特。


结果看起来就像flex-start
但它略有不同。


什么是"基线"?


下面的图片应该有所帮助。


请注意所有flex项目如何对齐以使其内容位于"基线"上?

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


在讨论时wrap
属性,你还记得当你向flex-container添加更多flex项时发生了什么吗?


你有一个 multi-line
弹性容器。


align-content
财产用于 multi-line
弯曲的容器。


它采用相同的值align-items
除了baseline


根据定义,它控制flex-items在多行Flex容器中的对齐方式。


就像align-items
,默认值也是stretch


这些是您现在应该熟悉的值。所以,这是他们如何影响一个 multi-line
flex-container有10个flex-items。

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


stretch
,flex项被"拉伸"以适应沿横轴的可用空间。


您在下面的弹性项目之间看到的间距是由于margin
设置项目。

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


你见过了flex-start
之前的价值。


这次它对齐了中的项目 multi-line
集装箱到 start
的横轴。


请记住,默认的横轴是从上到下。


因此,柔性物品与柔性容器的顶部对齐。

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


flex-end
value将flex项目对齐到横轴的末尾。

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


就像你可能已经猜到的那样center
将flex-items对齐到 center
的横轴。


这是最后一个flex-container属性。


您现在已经了解了如何使用各种flex-container属性。


您将使用这些来完成实际的部分。

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

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


在上一节中,我解释了flex-containers及其对齐属性。


确实美丽。


当然,你已经了解了未来的发展。


我现在将我的注意力集中在flex-containers上,并引导您完成flex-items及其对齐属性。


与flex-containers一样,也可以在所有flex-items上提供一些对齐属性。


让我带你走过他们。

1. Order {#1-order}


order属性允许重新排序容器中的flex项。


基本上,使用order属性,您可以将flex项目从一个位置移动到另一个位置。就像你对"可排序"列表一样。


这样做不会影响源代码。这意味着HTML源代码中flex项的位置不会更改。


订单属性的默认值为0.它可以采用负值或正值。


值得注意的是,Flex项目是根据订单属性的数值重新排序的。从最低到最高。


一个例子总是这样做。考虑下面的无序列表:

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

默认情况下,flex项都有order
的价值0


正如您所期望的那样,您可以在一些基本样式之后得到这个(见下文)。
默认查看


Flex项目的显示方式与HTML源顺序中的指定一致。 Flex项目1,然后是2,3和4。


如果出于某种原因你想让flex-item 1出现在最后?不改变HTML文档中的源顺序?


" Without changing the source order
"意味着你不能这样做:

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

现在那就是了order
物业进来。


你需要做的就是做order
flex-item 1的值高于其他列表项的值。


如果你曾经使用过z-index
块元素的属性,你会熟悉这种东西。

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

然后,弹性项目从最低到最高重新排序。


不要忘记,默认情况下,列表项2,3和4都具有0的订单值。


现在,flex-item 1的订单值为1。
更改1的订单值后的新外观


Flex-items 2,3和4的订单值均为0.因此,保留了HTML源订单 - 不对默认显示进行任何修改。


如果您为flex-item 2提供了2的订单值,该怎么办?


是的,你猜对了。它也在堆栈上升。它现在代表最高的flex项order
值。
Flex-item 2现在具有更高的订单价值


当两个flex项具有相同的订单价值时会发生什么?


在下面的示例中,flex-item 1和3的含义相同order

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

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


Flex-item 1和3具有相同的订单值


这些项目仍按从最低到最高的顺序排列。


这次,flex-item 3最后出现,因为它出现在源文件(HTML文档)中的flex-item 1之后。


当两个或多个flex项具有相同的订单值时,重新排序基于源文件中的位置。


这是很多解释。


我转到其他一些房产。

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


柔性物品的美感是"灵活的"。


flex-grow
flex-shrink
属性让我们玩这个" flexibility"
更。


flex-grow
flex-shrink
如果有额外的空格,属性控制flex-item应该"增长"(扩展)的程度,如果没有额外的空格,则控制"缩小"。


它们可以占用从0到任何正数的任何值。0 || positive number


让我揭开神秘面纱。


考虑下面简单的无序列表。它只包含一个列表项。

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

ul {    display: flex;}

有了更多的造型,它看起来像这样。
简单的flex项目


默认情况下flex-grow
属性设置为0
。通过暗示,flex-item不会增长到适合整个可用空间。


价值0
就像一个"关闭"开关。该flex-grow
开关已关闭。


但是,如果你改变了flex-grow
价值1
,这就是发生的事情。
flex项目增长以填充可用空间


灵活项目现在" grows"
占据所有可用空间。开关打开!


如果您尝试调整浏览器的大小,flex-item也会"收缩"以适应新的屏幕宽度。


为什么?默认情况下shrink
属性设置为1.这意味着flex-shrink
开关也打开了!


我会仔细看看flex-grow
flex-shrink
如果您仍然对自己对此的理解不满意,请稍微考虑一下属性。

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


还记得我怎么说flex-items的美感是"灵活的"?好吧,看起来你也可以控制它。


flex-basis
property指定flex项的初始大小。之前flex-grow
要么flex-shrink
属性调整它的大小以适应容器或不。


之前的陈述非常重要 - 所以我花了一点时间来加强这一点。


默认值为flex-basis: auto
Flex-basis
可以采用您在普通宽度属性上使用的任何值。那是,percentages || ems || rems || pixels
等等


请注意,在尝试将基础属性设置为基于零的值时,也请使用该单位。采用flex-basis: 0px
不只是flex-basis: 0


我再次带回"一个列表"的例子。

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

ul {    display: flex}

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

默认情况下,弹性项的初始宽度受默认值的影响,flex-basis: auto


灵活项目的宽度计算" automatically
"基于内容大小(显然,加上你设置的任何填充)。
默认查看


这意味着如果您增加了flex项中的内容,它会自动调整大小以适应。

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


宽度自动计算


但是,如果要将弹性项设置为固定宽度,还可以执行以下操作:

li {    flex-basis: 150px;}

现在,flex-item被限制为150px的宽度。
具有约束宽度的flex-item


它变得更有趣了。

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


flex
简写允许你设置flex-grow
flex-shrink
flex-basis
属性一次性。


在适当的时候,我建议您使用flex速记一次设置所有三个属性,而不是单独设置。

li {  flex: 0 1 auto;}

上面的代码等于设置三个属性:flex-grow: 0; flex-shrink: 1; flex-basis: auto


请注意订单。

Flex-grow
首先,然后flex-shrink
, 接着flex-basis
。首字母缩略词, GSB
可能有帮助。


如果您未能在flex-shorthand中设置其中一个值,会发生什么?


如果你只设置了flex-grow
flex-shrink
flex-basis
将默认为零。


这被称为 absolute flex
。当你只设置了flex-basis
你得到一个 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*/}

我知道你在想什么。这是什么目的 relative
absolute
柔性?


我在本文后面回答了这个问题。再一次,盲目信任就足够了。


让我们来看看一些非常有用的flex速记值。

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

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

这与写作相同flex: default
这是所有弹性项目的默认行为。


让我分解一下吧。


通过查看,更容易理解这一点flex-basis
物业第一。


flex-basis
被设置为auto
,这意味着flex项的初始宽度将是 automatically
根据内容的大小确定。


知道了?


转到下一个属性,flex-grow
值为零。这意味着flex-grow
属性不会篡改弹性项目的初始宽度。


成长开关关闭。


由于flex-grow控制" growth
"flex-items并且它设置为零,flex-items不会"增长"以适应屏幕。


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


以下是应用于某些弹性项目时的样子。
flex: 0 1 auto


注意flex项如何不增长。宽度是自动计算的,如果需要,它们会在调整浏览器大小时缩小。

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

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

li {  flex: 0 0 auto;}

这和flex: none


使用我之前建立的相同框架,自动计算宽度但是flex项不会增长或缩小(它们都设置为零)。


增长和收缩开关都关闭了。


它本质上是一个固定宽度的元素,其初始宽度基于flex项目中的内容大小。


了解此弹性缩写如何影响两个弹性项目。一个住房比另一个住房更多。
Flex: 0 0 auto


您应该注意的第一件事是,flex项目具有不同的宽度。


这是预期的,因为宽度是根据内容大小自动计算的。


尝试调整浏览器的大小,您会注意到flex项目的宽度不会缩小。它们弹出父元素,您必须水平滚动浏览器才能查看所有内容。


不用担心,我会告诉你如何处理这种奇怪的行为。
在调整浏览器大小时,flex-items不会缩小。相反,它们从弹性容器中弹出。

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


这和flex: auto


使用我之前建立的框架。


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


打开增长和缩小开关,并自动计算宽度。
Flex: 1 1 auto


这一次,项目填满了可用空间,并且在调整浏览器大小时它们也会缩小。

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


哪里" positive number
"代表任何正数(不含引号)


这是一样的flex: "positive number" 1 0

flex: 2 1 0
和写作一样flex:2
2代表任何正数。

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

按照我之前建立的相同框架,这说," 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项目" no width
",如何计算宽度?


flex-grow
值接管,并确定flex项的范围" widens
"。


这照顾了 no-width
问题。


当你有多个弹性项目的初始宽度时,使用这个flex速记更实用flex-basis
被设置为任何基于零的值,例如0px


真正发生的是,弹性项目的宽度是根据的比率计算出来的flex-grow
值。


我打破了一点点。


考虑下面标记和样式化的两个列表项。

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

记住那个设定flex-grow : 1
让flex-item填满可用空间。成长开关已打开。


这里有两个弹性项目。一个有一个flex-grow
的财产1
和另一个2
然后会发生什么?


您已为两个项目启用了增长开关。但是,增长幅度不同。 1和2。


它们都扩展到填补可用空间,但在一定比例。


这是它的工作原理。


后者占可用空间的2/3,而前者占1/3。


你知道我是怎么到达那个的吗?


基础数学比率。individual ratio / total ratio
我希望你没有跳过那些数学课。
灵活的项目共享空间


你看到发生了什么?


尽管两个弹性项目具有相同大小(大约)的内容,但是它们占据不同的空间。


宽度不是基于内容大小,而是基于增长值。


一个是另一个的两倍左右。

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


align-self
property更进一步让我们对flex项目进行了如此多的控制。


你已经看过了align-items
property有助于集中对齐flex-container中的所有flex项。


如果你想改变一个位置怎么办? single
沿横轴的flex-item,不影响相邻的flex-items?


这就是align-self
财产来救援。


它可能采用以下任何值: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}

这些是您已经熟悉的值,但是作为这些值的复习,它们是如何影响特定目标项目的。


在这种情况下,容器中的第一个项目。


目标flex项目为红色。

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

flex-end
将目标项对齐到横轴的末端。
横轴末端的目标弹性项目

2. Center {#2-center}

center
将目标项目与十字轴的中心对齐。
横轴中心的目标柔性项目

3. Stretch {#3-stretch}

stretch
"拉伸"目标弹性项目以填充沿横轴的可用空间。
沿横轴伸展的目标弹性项目

4. Baseline {#4-baseline}

baseline
沿着基线对齐目标弹性项目。


它确实看起来像是一样的结果flex-start
但我相信你明白基线是什么。


我早就解释过了。
目标弹性项目沿基线对齐

5. auto {#5-auto}

auto
将目标flex项的值设置为父项align-items
价值或stretch
如果元素没有父元素。


在下面的例子中,flex-container有一个align-items
的价值flex-start


这会将所有flex项对齐到横轴的起点。


目标flex项现在继承了flex-start
价值---父母的align-items
值。
沿着横轴的起点对齐的目标弹性项目


这是上面使用的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;}

你现在正准备好迎接有趣的部分:-)

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


在前几节中已经介绍了一些基础,重要的是在这里澄清一些重要的概念。


绝对和相对的flex项目之间究竟有什么区别?


这两者之间的主要区别在于间距以及它们的计算方式。


相对弹性项目中的间距是根据其内容大小计算的。在绝对弹性项目中,它仅基于"flex",而不是内容。


考虑下面的标记。

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

两个列表元素。一个人的文本多于另一个。


添加一些样式。

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

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

这是结果:


如果你已经忘了,flex: 1 1 auto
与设置相同:flex-grow: 1
flex-shrink: 1
flex-basis: auto


使用我之前建立的框架,自动计算flex项的初始宽度flex-basis: auto
,然后他们" grow
"以适应可用空间flex-grow: 1


当flex-items的宽度自动计算时,flex-basis: auto
,它基于flex-items中包含的内容的大小。


上例中的flex-items没有相同大小的内容。因此,柔性物品的尺寸将是不相等的。


由于个别宽度首先不相等(基于内容),当项目增长时,宽度也保持不相等。


上例中的flex项目是 relative
柔性项。


让我们将flex-items设为绝对值 - 意味着这次它们的宽度应该基于"flex"而不是内容大小。


一种 " one-liner"
是魔术吗?

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

请参阅下面的结果。


你是否看到这两个flex-items具有相同的宽度?


flex项的初始宽度为零flex-basis: 0
,然后他们" grow"
以适应可用空间。


当有两个或多个基于零的弹性项目时flex-basis
值,它们共享基于的可用间距flex-grow
值。


我早些时候谈过这件事。


现在宽度不是根据内容大小计算的。宽度基于指定的flex值。


所以你明白了。对?


绝对弹性项目的宽度仅基于弹性,而相对弹性项目的宽度基于内容大小。

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

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


当你使用margin: auto
在flex-items上,事情看起来很奇怪。


你需要了解发生了什么。这可能会导致意想不到的结果,但我会解释所有这些。


当你使用margin: auto
在flex项目上,具有该值的方向(左,右或两者)auto
将占用任何可用的空白空间。


这是一个难以捉摸的问题。


这就是我的意思。


考虑下面标记和设置样式的导航栏:

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

请参阅下面的结果。
简单的导航栏


这里有几点需要注意:

  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?


现在用margin: auto
在第一个列表项(品牌)上,看看会发生什么。

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


保证金:自动适用于&#39;品牌&#39;


刚刚发生了什么?


现有的额外空间现已分配到第一个弹性项目的右侧。


你还记得我之前说过的吗?


当你使用margin:auto
在flex项目上,具有该值的方向(左,右或两者)auto
将占用任何可用的空白空间。


如果您想在弹性项目的两侧进行自动边距对齐,该怎么办?

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


保证金:自动应用于"品牌"两侧


现在,空间分布在flex项目的两侧。


那么,酷炫的自动保证金调整是否存在折衷?


它似乎有一个。如果你不注意,它可能是一种沮丧的根源。


当您在flex项目上使用自动边距对齐时,justify-content
财产不再有效。


例如,通过以下方法在上面的flex容器上设置不同的对齐选项justify-content
财产,对布局没有影响。

ul {    justify-content: flex-end;}


理由 - 内容没有影响

Practical Use cases {#practical-use-cases}


导航系统是每个网站或应用程序的重要组成部分。这个星球上的每个网站都有某种导航系统。


看看这些热门网站以及他们如何接近他们的导航系统。


您是否了解Flexbox如何帮助您更有效地构建这些布局?


仔细看看自动边距功能可能会非常方便。

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

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

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


我建议你实际上将代码编写为一种练习形式。我在这里写了一本实用指南:The Most Popular Navigation Bars Created with Flexbox


去看看。


我会等。

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


公平警告:路上有一些奇怪的东西。


在开始学习Flexbox模型时,这部分是最令人困惑的。


我敢打赌很多新人" flex world"
也是这样找到的。


你还记得当我谈到默认的主轴和横轴在"从左到右"和"从上到下"的方向时?


好吧,你也可以改变它。


这正是您使用时发生的情况flex-direction: column
如前面部分所述。


当你使用flex-direction: column
,主轴和横轴如下所示改变。
默认主轴和横轴
新的主轴和横轴


如果你曾用英语写过任何文字,那么你就已经知道这种语言是从左到右,从上到下写的。


这同样也是Flexbox默认主轴和横轴的方向。


但是,在将弯曲方向切换为column
,它不再遵循" English Language
"模式,但日本人!


哦,是的,日本人。


如果您使用日语编写任何文本,那么这将是熟悉的。 (为了记录,我从未用日文写过任何文字。)


日语文本传统上是从中写的 top to bottom
!不是很奇怪,是吧?


这就解释了为什么这对英国作家来说有点混乱。
新的主轴和横轴


看看这个例子。带有3个列表项的标准无序列表,除了这次我将改变flex方向。

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

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

这是改变方向之前的样子:


然后:


所以发生了什么事?


"文本"现在用日语写成---从上到下(主轴)。


你可能会发现有趣的东西,我想指出。


你看到物品的宽度填满了空间,对吧?


如果你之前要改变它,你只需处理flex-basis
和(或)flex-grow
属性。


让我们看看它们如何影响我们的新布局。

li {    flex-basis: 100px;}

......这就是你得到的。


哇---什么?高度会受到影响,但不会影响宽度?


正如我之前所说,flex-basis属性定义了每个flex-item的初始宽度。


我错了 - 或者说更好,我在思考" English
"。让我们换一点日语吧。


它并不总是必须是"宽度"。


在切换弯曲方向时,请注意,影响主轴的每个属性现在都会影响到 new
主轴。


像这样的财产flex-basis
影响沿主轴的flex项目宽度现在影响高度NOT宽度。


方向已切换!


所以,即使你使用了flex-grow
财产,它也影响高度。


基本上,在水平轴(当时的主轴)上运行的每个柔性属性现在都垂直运行,即新的主轴。


这只是方向的转换。


这是另一个例子。我保证在这之后你会有更好的理解。


减少我们之前看过的柔性物品的宽度,它们不再填满整个空间:

li {    width: 200px;}


如果要将列表项移动到屏幕中心怎么办?


在英语中,这就是你到目前为止处理flex-containers的方式。那意味着" move the flex-items to the center of the main-axis
"。


所以,你已经习惯了justify-content: center


但现在这样做是行不通的。


由于方向改变,中心沿着横轴而不是主轴。


再看看:
新的主轴和横轴


所以请考虑一下 Japanese text


主轴是从上到下,你不需要那样。


横轴从左到右。听起来像你需要的。


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


任何弹性容器属性都会响铃吗?


是的,align-items
财产。


align-items
属性处理横轴上的对齐。


所以要将它们移到中心,你会这样做:

ul {    align-items: center;}

瞧!你的flex项目居中。
flex-items以新方向为中心


我知道,它可能会有点混乱。如果需要的话,再过一次吧。


在研究Flexbox模型时,我注意到很多CSS书都跳过了这一部分。


一点思考 Japanese
text
会有很长的路要走。


值得了解的是,所有Flexbox属性都基于flex-direction
那就到位了。


我相信你会再次学到新东西。我很乐意解释这个。我希望你也玩得开心:-)

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


许多设计人员使用CSS遇到的一些经典问题已经通过Flexbox轻松解决。

Philip Walton
, 在他的solved-by-flexbox project
列出了6个经典问题(撰写本文时)。


他广泛讨论了CSS以前的局限性,以及Flexbox提供的当前解决方案。


我建议你看看完这篇文章。


在即将发布的实用部分中,我将向您介绍一些他在使用Flexbox构建音乐应用布局时所提出的概念。

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


如果你不是那种在他们的梦中写CSS的人,你可能想看看这个githubrepository


有些比我聪明的人会列出一些Flexbox错误及其解决方法。


这是我看不到的东西时的第一个地方。


我将在接下来的实用部分中介绍一些突出的错误。


所以你被覆盖了!

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


在走过无聊严谨的东西之后,你应该得到一些有趣的项目。


现在是时候走过一个实际的例子,并应用你新收购的 Flexbox skills


我花了几天时间才想出一个好项目。


由于缺乏创意选项,我想出了一个适合猫的音乐应用布局。


我叫它 catty music


也许到2036年,我们会让猫在火星的某个地方的摇滚乐队里唱歌:-)


这是完成的布局的样子,它完全用Flexbox布局。


您可以在线查看here


如果您在移动设备上查看它,您的外观会略有不同。这是你将在本文的响应式设计部分工作的东西。


我虽然承认了。


我做过许多人认为错误的事情。


我已经使用Flexbox完全构建了整体布局。


由于许多原因,这可能并不理想。但这是在这种情况下的故意。我打算向您展示您可以使用Flexbox完成的所有事情,所有这些都包含在一个项目中。


如果您对使用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


在那里,我把它从胸前拿走了。现在我确定读完之后没有人会对我大喊大叫。


Catty Music中的所有内容都使用Flexbox模型进行布局 - 这是为了展示可能的内容。


所以让我们建造这个东西吧!


与任何合理的项目一样,一些计划在很长一段时间内解决效率低下的问题。


让我带你完成一个有计划的方法来构建catty音乐布局。

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


每当使用Flexbox构建布局时,您应该首先查看布局的哪些部分可以作为flex-containers突出。


然后,您可以利用Flexbox提供的强大对齐属性。

The Breakdown {#the-breakdown}


您可以将整个包含主体作为Flex容器(包含在下图中的红色边框内),并将布局的其他部分拆分为flex-items(第1项和第2项)。


这是完全合理的,因为第1项包含布局的每个部分而不是" footer"
---包含音乐控制按钮的部分。


您是否知道flex-item也可以成为flex-container?


是的,这是可能的!


您可以根据需要进行深度嵌套(尽管理智的做法是将其保持在合理的水平)。


所以,随着新的启示,这......


项目1(第一柔性项目)也可以制成柔性容器。


侧栏(项目1b)和主要部分(项目1a)将是弹性项目。


你还和我在一起,对吧?


像这样分解您的布局为您提供了一个非常好的心理模型。


当您开始使用Flexbox模型构建更复杂的布局时,您会发现它的重要性。


你不需要像上面那样的奇特图像。一个简单的粗糙纸草图应该很好,让你去。


你还记得我说过你可以根据自己的需要进行深度挖掘吗?看来你可以再在这里筑巢一次。


看一下上面的主要部分(第1a项)。


它也可以制作一个弹性容器来容纳下面突出显示的部分。 " Item 1a --- A
"和" Item 1a --- B
"


您可以决定不将主要部分(第1a项)作为弹性容器,并在其中放入两个"div"来容纳突出显示的部分。


是的,这是可能的,因为" Item 1a --- A
"和" Item 1a --- B
"垂直堆放。


默认, " divs
"垂直堆叠。这是盒子模型的工作方式。


如果您选择将主要部分设置为flex-container,则可以获得强大的对齐属性。以防您在任何时候需要它们。


" flex
"在Flexbox中意味着灵活。


Flex-container默认是灵活的,有点响应。


这可能是使用弹性容器超过常规的另一个原因" divs
"这取决于案例情况。


当你制作一些音乐时,我会谈谈其他一些事情。你现在应该编写一些代码了。

Basic HTML Setup {#basic-html-setup}


从下面设置的基本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>

这样风格......

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

使用Flexbox模型的第一步是建立一个Flex容器。


这正是上面的代码所做的。它将body元素的display属性设置为flex


现在你有了一个flex容器,即body元素。


flex项目也被定义(第1项和第2项)---就像之前完成的细分一样。


请注意,如果此概念对您来说仍然模糊,您应该再看一下我之前在初始分解中显示的图像。


保持结尾的图像,您应该使flex项工作。


容纳音乐控制器的页脚粘在页面底部,而主要部分填满剩余空间。


你是怎样做的?

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

请参阅上面代码清单中的注释。


非常感谢flex-grow
属性。主要部分填满整个空间相对容易。


只需设置flex-grow
值为1.您还应该设置flex-shrink
财产为零。为什么?


这里的原因可能不明显,因为弯曲方向改变了。


在某些浏览器中,存在一个允许flex-items缩小到其内容大小以下的错误。这是一种非常奇怪的行为。


这个bug的解决方法是保持flex-shrink
价值在0
,而不是默认值1
,还设置了flex-basis
财产到auto


这就像说: "Please compute the size of the flex item automatically, but never shrink."


使用此简写值,您仍然可以获得弹性项的默认行为。


调整浏览器大小后,flex项会缩小。调整大小不是基于shrink
属性。它基于自动重新计算弹性项目的宽度。flex-basis: auto


这将导致flex-item至少与其宽度或高度(如果声明)或其默认内容大小一样大。


请不要忘记我破坏的框架flex-shorthand
属性。会有很多简写的东西出现。


现在事情已经结束了,让我们用一些造型来定义间距和颜色:

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);  }

没什么神奇的。


这是你现在应该拥有的:


看看事情是如何开始形成的,你会让事情变得更好。


如果您正在编码,请更新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>

上面的清单很明确。


对于图标集,我使用的是流行的Font Awesome
图书馆。


拥有所需的图标就像添加CSS类一样简单。这就是我在内部所做的aside
标签。


如前所述," main
"上面的部分也将成为一个弹性容器。侧边栏(由旁边的标签代表),该部分将是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*/  }

好吧,这很有意思,对吧?


现在您将主要部分作为Flex容器。处理其中一个弹性项目,侧边栏。


正如您将页脚粘贴到页面底部一样,您也希望侧边栏粘贴---这次是在页面左侧。

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

侧边栏应该有垂直堆叠的图标。


您可以将侧边栏设置为弹性容器,并为其提供一个弹性方向,使所有图标垂直堆叠。


然后应用对齐属性以使图标处于适当位置。


了解如何在下面的列表中执行此操作。

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

我已经痴迷地评论了上面的代码,现在看看一切都是如何布局的。


超级整洁,几行代码。


合理的代码,没有杂乱的黑客。
边栏处理得很好


主要内容部分目前是空的。不要忘记它是第二个列表项。侧边栏是第一个。


在那里放一些东西。

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


您可以再次查看已完成的项目,这样您就不会忽视它的发展方向。


更重要的是,它可以帮助您理解下一个代码清单。


更新您的HTML文档并在其中包含这些内容.content
部分。

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

嗯,我比上一次增加了一点但很简单。


我用一个填充空内容部分div
它拥有专辑封面和catty专辑的一些细节。


ul
保存专辑中的歌曲列表。


song title
artiste
duration
和" catty cloud sync
"列在清单中的各个段落中。


那么你打算怎么做造型呢?


看看我做了什么?


首先,你应该做到.content
一节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;}

你还应该处理它的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
持有专辑封面和其他相关专辑细节。


相同的备忘录,不要增长或缩小,但保持280px的高度。


高度?不是宽度?是!


父元素已经有了flex-direction
切换。


哦,你以后也需要将它作为一个弹性容器。所以投入display: flex

.music-list
保存歌曲列表,它填满了共享的剩余可用空间.music-head
以上。


这感觉不是很漂亮但是如果你还在追随,那么你做得很好。


竖起大拇指。
斤音乐 - 未完成


这里有一些问题。

  1. The list of songs look terrible.


歌曲列表

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

再次,我将引导您解决这些问题。


以下是我提出的解决方案。

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


每个歌曲列表包含4个段落。歌曲标题,艺人,持续时间和"catty cloud sync"。


必须有一种方法可以将所有这些放在一行中,每一段沿着这条线占据相同的空间。


Flexbox救援!


这里的概念与许多网格系统中使用的概念相同。


将其转换为代码。

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

你看到段落里发生了什么?

flex: 0 0 25%;

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


这些空间在各段之间平均分配。

Using this Technique {#using-this-technique}


这种技术非常宝贵。您可以使用它来创建不相等的内容区域。比如,一个2列视图。


一部分占用可用空间的60%,另一部分占40%

.first-section: 0 0 60%;

.second-section: 0 0 40%;

您可以使用此技术制作网格系统。


这是列表现在应该如何看待。
歌曲列表已修复


给列表交替颜色,也处理"catty cloud sync"标签。

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

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

所以,你要杀了它,真正了解它 flexbox lingo
更好。


这就是你现在应该拥有的。
卡蒂音乐---差不多完成了


第二个问题现在将处理。

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


下面真的很简单。

.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;}

你做到了


你已经完成了很多工作。
音乐艺术文本看起来好多了

A quick exercise {#a-quick-exercise}


我已经保存了页脚作为练习。


尝试自己修复页脚。只需采用相同的技术。你知道吗?


如果你遇到困难,你可以随时查看catty音乐的完整源代码。


您也可以将整个页脚打破为flex-items,然后从那里开始。
页脚解释道


哇。我无法相信你达到了这一点。那很棒!你现在正成为Flexbox忍者。


接下来,您将看到Flexbox如何帮助响应式设计。

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


关于响应式设计的书籍,以及好书。


由于本文主要关注Flexbox模型,因此我不会深入了解响应式设计的一般状态。


就像我之前所说的那样,我们确实得到了Flexbox模型开箱即用的响应能力。


Flexbox在" flexible box
"。


但是,可以通过媒体查询来定位各种屏幕大小,然后更改弹性行为。


这是一个例子。


方便无序的清单再次拯救。

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

并带有一些造型......

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

你现在是这个灵活的东西的专业人士,所以你了解那里正在发生的事情。


这是导航栏的外观。
Flexbox导航


虽然这对台式机和平板电脑来说可能很酷,但在某些屏幕尺寸下,它看起来并不好看。


在移动设备上,您需要垂直堆叠导航项。


然后是媒体查询。

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

}


移动设备的导航栏


如果您之前了解有关响应式设计的一些内容,那就太棒了。


只需将Flexbox模型转换为您现有的知识,就可以了。


顺便说一句,我假设您了解媒体查询是什么。


如果不这样做,请参阅下面的简要说明。

Media Queries {#media-queries}


媒体查询是响应式设计的核心。它们允许您定位特定的屏幕大小,并指定仅在设备上运行的代码。


使用媒体查询的最流行的形式是所谓的 @media rule


它看起来像这样:

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

看着它,你几乎可以猜到它是做什么的。

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


代码块中的任何样式仅适用于与表达式匹配的设备," screen and (max-width: 300px)"


我想这有助于消除一些困惑。

Quick Exercise {#quick-exercise}


Catty音乐在移动设备上的显示方式不同。这真是个好消息。什么是更好的是你应该尝试重新创建这个。
移动catty音乐


如果您遇到困难,本教程的存储库链接将在下一节中介绍。对此的解决方案也在回购中。


你快要结束了!


在结束部分,我将讨论浏览器支持,有用的链接和资源,以帮助您移动。

Conclusion {#conclusion}


您已经学习了如何使用flex-container和flex-item对齐属性。


我带您了解绝对和相对弯曲,自动边距对齐和切换弯曲方向。


你也有机会申请" flex skills"
建设 Catty Music
然后我也提到了响应式设计。


这确实是一个漫长的旅程。


现在,我将向您解释一些最终概念。帮助您获得资源和链接我认为您会发现非常有帮助。

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


在生产中使用Flexbox模型时,这是一个常见的问题。


我不能完美地回答这个问题,但是caniuse
网站对此公正。


这是一张截图 caniuse
,浏览器支持令人印象深刻。你可能会亲眼看到here


在我职业生涯的早期,我瞥了一眼 caniuse
很多次,仍然无法掌握数据所代表的含义。所以这里有一个简短的解释。


在右下角 caniuse
网站是一个传奇。
caniuse
传说


看看上面的图片,或者只是访问网站,找到传奇,你就会好起来。


实际上这就是它的全部内容。

Additional resources {#additional-resources}


我希望你发现这些有用:

  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

最后,我必须感谢你们的追随。

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


下载我的免费CSS Grid备忘单,并免费获得两个高质量的互动Flexbox课程!
Get the Free CSS Grid Cheat sheet + Two Quality Flexbox Courses for free!

Get them now

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

查看英文原文

查看更多文章


公众号:银河系1号


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


(未经同意,请勿转载)