|
4. Flex: 'positive number' 这里的“正数”是指任何正数（不包括引号）。它和flex: “positive number” 1 0.是一样的。而flex: 2 1 0是和flex:2一样的，这里2就是任意的正数。 还是用我之前建立的框架，它的意思是“把弹性盒子元素的初始宽度设置为0（额，意思是没宽度？），使子元素扩展到整个可用空间，最后必要时收缩子元素”。如果没有宽度值，那么该如何计算宽度呢？ flex-grow 取值控制并决定着弹性盒子元素扩展的范围。这就解决了上面说的没有宽度的问题。当你有一个以上的弹性盒子元素，而他们的初始宽度flex-basis被设为0单位，例如0像素时，这个弹性速记就很实用了，因为这时候弹性盒子元素的宽度计算是基于flex-grow值的比率。稍后我会分解讲述。 下面是标记和样式化后的两个列表元素： 注意，设定的flex-grow : 1 能使弹性盒子元素填充到整个可用空间，即扩展阀门被打开了。这里面有两个弹性盒子元素，一个flex-grow属性值是1，另一个是2，这会怎么样呢？这里你把两个元素的扩展阀门都打开了，可是扩展量级是不一样的，一个是1，一个是2。具体形式如下： 后者占据了可用空间的2/3，前者占了1/3。你知道我是怎么算出来的吗？基本的数学比率就可以了单个的占用量除以总量就可以了 ，我希望你不要跳过哪些数学类。你明白了吗？尽管两个子元素内容大小是一样的，但是他们占据的空间却不一样。其中一个是另一个的两倍。 5. 自动对齐Align-self align-self属性给了我们进一步控制弹性盒子元素的能力。你已经明白了 align-items属性在一个弹性容器中帮助我们对齐所有的子元素。如果你想改变单个沿着纵轴对齐的弹性盒子元素的位置，而不影响其它弹性盒子元素该怎么办呢？ align-self属性就是解决这个问题的。你可以使用下面的任何一个取值：auto || flex-start || flex-end || center || baseline || stretch。 这些取值你已经比较熟悉了，但是这里我们还是以特定的目标元素为例，复习一下他们是如何起作用的。下面的例子中，弹性容器里的第一个子元素标记为红色。我们就以红色子元素目标元素。 1. Flex-end flex-end使目标元素在纵轴的结束位置对齐，如下： targeted flex item at the end of the cross axis 2. Center center 使目标元素位于纵轴的中间位置。 targeted flex item at the center of the cross axis 3. Stretch Stretch“拉伸”目标弹性盒子元素，使其沿着纵轴填充有效空间。 目标弹性盒子元素沿着纵轴拉伸 4. Baseline baseline 使目标弹性盒子元素沿着基准线对齐。它看起来和 flex-start 的效果一样，但是我觉得你一定明白什么是基准线了，因为我之前已经解释过了。 目标子元素沿着基准线对齐 5. auto auto把目标弹性盒子元素的值设置到母元素的align-items值上，或者如果该元素无母元素，就对其进行拉伸。这就使所有的子元素在纵轴的起始位置对齐，现在目标弹性盒子元素继承了 flex-start 值，即母元素的align-items 值。 targeted flex item aligned along the start of the cross-axis 以上就是弹性盒子元素用到的基本样式。看一下下面的例子，你就能更好的理解了。 现在你已经做好学习有趣内容的准备啦！:-) 绝对和相对弹性盒子元素 在前面的部分了解了一些基本内容，现在有必要明确一些重要的概念了。一个绝对和相对弹性盒子元素有什么区别呢？两者主要的区别在于如何处理空间以及如何开展计算。相对弹性盒子元素的空间计算是基于它的内容大小，绝对弹性盒子元素则是仅仅基于“弹性”，不是内容。 思考如下代码： 这里有两个元素，一个的文字比另一个要多很多，下面我们加入一点样式。
结果如下：
估计你都忘了吧，flex: 1 1 auto和flex-grow: 1flex-shrink: 1 与 flex-basis: auto效果是一样的。回顾一下我之前建立的框架，弹性盒子元素的初始宽度是由flex-basis: auto自动计算的，然后由flex-grow: 1将子元素扩展填充到可用空间。注意，上面例子中的子元素的内容大小是不一样的。因此，弹性盒子元素的大小也是不等的。由于开始每个子元素的的宽度是不一样的（因为他们不是基于内容），当子元素扩展后，他们的宽度仍旧不相等。上面的弹性盒子元素就是相对弹性盒子元素。下面让我们它改成绝对弹性盒子元素，即他们的宽度应该是基于“弹性”而不是内容大小。这里一小段代码就搞定啦！
看下面的结果：
看到两个弹性盒子元素的宽度一样了吗？弹性盒子元素的初始宽度是0 ，即flex-basis: 0，接着扩展填充所有可用空间。当两个及以上的弹性盒子元素基于flex-basis取值时，他们会基于 flex-grow取值，共享有效空间。这我之前讲过了。明白了吧！现在子元素的宽度不是基于内容大小计算而是基于制定的弹性值了。 与相对弹性盒子元素基于内容大小不同，绝对弹性盒子元素的宽度只会基于其弹性值。 边界自动对齐（Auto-margin Alignment） 注意，这里的边界是指弹性盒子元素的自动对齐界限。 当你在弹性盒子元素上使用margin: auto时，得到的结果看起来十分奇怪。你的明白是怎么回事儿。可能出乎你的意料，但是我会进行透彻的解释。当你在弹性盒子元素上使用margin: auto时，有值为 auto的方向（左，右或者两者兼有）会占据任何空白的有效空间。这可能比较难理解，下面我来细讲一下。 思考一下下面制作的和样式化的导航栏例子：
结果如下：
简单的导航栏 这里有些东西需要注意： 1.flex-grow取值是0，因此列表元素不会扩展。 2.弹性盒子元素从横轴的起始位置对齐（默认） 3.弹性盒子元素从横轴起始位置对齐后，右侧有一些多余的空间，看到了吗？
现在在第一个列表元素（branding）上使用margin: auto，看一下会怎么样。
margin: auto在“brangding”上作用的结果 发生什么啦？现在之前存在的多余空间被分配到了第一个弹性盒子元素的右边。
还记得我之前讲的吗？当在一个弹性盒子元素上使用margin: auto时，取值为 auto的方向（左、右或者两者兼有）会占据任何空白的有效空间。如果你在一个弹性盒子元素的两侧执行自动边界对齐会怎么样呢？
元素“branding”两侧执行margin: auto的结果 现在空间被分配到了子元素的两侧。那么，这么酷的边缘自动对齐是不是存在折中情况呢？答案是有一个的，如果你不注意，它可能引起你的困惑。 当你在一个弹性盒子元素上使用边缘自动对齐（auto-margin alignment）时，justify-content 属性就失效了。 比如，使用justify-content为一个弹性容器设置一个不同的对齐选项，justify-content是不起作用的。
justify-content属性没有起作用 实战练习例子（Practical Use cases） 导航系统是网站或者应用非常大的部分。地球上的每一个网站都有导航系统。看一下下面这些流行的站点是如何实现导航系统的。 你明白Flexbox是如何帮你高效建立这些布局吗？ 也仔细看一下哪里巧妙的使用了边缘自动对齐。 (i) Bootstrap Navigation
(ii) AirBnB desktop Navigation
(iii) Twitter desktop Navigation
我建议你去实际写一下代码。亲自去执行一下导航系统代码。现在你已经掌握了所有你需要的知识。鼓起勇气开始写代码吧。 咱们下一部分再见。希望你能够完成导航系统的练习 :-) 颠倒弹性方向会怎么样呢？ 郑重警告：接下来会出现一些奇怪的东西。 从开始Flexbox模块学习以来，这一部分是最容易让人产生困惑的了。我肯定许多新接触flexbox的人都会这样。 你还记得我志强讲到默认的主轴和纵轴方向是“从左到右”和“从顶到底”吗？ 事实上，你是可以改变它们的。 在之前部分讲到的flex-direction: column就可以做到。当你使用flex-direction: column时，主轴和纵轴就会产生如下变化：
默认的主轴和纵轴
新的主轴和纵轴 如果你曾经用英语写过任何文本，你就知道语言书写是从左到右，从上到下。这也是Flexbox模块默认的主轴和纵轴方向这样定义的原因。然而，当把弹性方向（flex direction）改成 column时，它就不再依照“英语语言”书写模式，而是日语书写模式了。 没错，就是日语。 如果你写过日语文本，那你就会对戏比较熟悉（说一下，我从未写过日语）。这样就解释了为什么英语书写人群会对此感到一丝困惑。
新的主轴和纵轴 看一下下面的例子，这个例子是拥有3个列表元素的标准无序列表，只是这次我要改变它的弹性方向（flex-direction）。
改变方向之前：
改变之后：
发生什么啦？“文本”现在是日语书写风格了（从上到下）。你可能发现了有趣的东西，我来给你指出来吧！看到弹性盒子元素填充空间的宽度了，对吗？如果你打算改变上面的例子，你只需要处理一下flex-basis和(或) flex-grow 属性。 我们看一下他们是如何影响我们的新布局。
这是你会得到的效果。
哇—怎么回事？高度受到了影响，宽度却没有？正如前面我说道的，flex-basis属性定义了每一个弹性盒子元素的初始宽度。 我理解错了，或者更好的解释是，我的思维是“英语”式的。让我们稍微想日语转变一下。它不总是是“横向”的。转变了弹性方向后，请记住，之前每一个作用于主轴的属性都作用于新的主轴了。例如，之前 影响着主轴方向的弹性盒子元素宽度的flex-basis 属性，现在则影响着子元素的高度而不是宽度了，因为方向被转换了。所以，即使你使用flex-grow 属性，它也是影响的高度。本质上讲，之前每一个作用于水平方向（之后的主轴）的弹性属性现在都垂直的起作用，即作用于新的主轴了。这仅仅是方向的转换。 我再举一个例子，我保证看了这个你就会有更好的理解，把前一个例子中弹性盒子元素的宽度减小，他们就不再填充整个空间了。
要是你想把列表元素移动到屏幕中间该怎么做呢？到目前为止，这在英语中就是你如何处理flexbox容器了，意思就是“把弹性盒子元素移动到主轴的中间”。如果你再使用justify-content: center就不在起作用了。因为方向已经改变了，中心位置是在纵轴而不是主轴了。 再回看一下改变后的情况：
新的主轴和纵轴 因此，请你想一下日语文本。主从上到下的主轴不是你需要的，从左到右的纵轴则正是你所需要的。你需要“把弹性盒子元素移动到纵轴的中间”在这里，有回想起任何一个弹性盒属性吗？没错，就是align-item属性。align-item属性处理的是纵轴的对齐。 所以要把它们移动到中间，你需要这样做：
瞧！到中间了吧！
在新方向上居中的弹性盒子元素 我知道你肯定还是会有点迷惑，实在不行就忘了它吧。我在学习Flexbox模块的时候，曾注意到很多CSS教材都会把这部分跳过。 稍微使用一点日语思维会对你大有帮助。明白所有的Flexbox属性是基于适当的flex-direction这一点是很有价值的。我敢肯定你已经学到了一些新东西。在解释过程中，我得到了乐趣，也希望你能得到乐趣 :-) 我的天呐！Flexbox还能这样用？如果你是在移动设备上查看，结果会有些许不同。这涉及到本文的响应设计部分。不过我有一个反思，整个布局设计完全使用的是Flexbox。综合起来看，这或许不够理想，但我是故意这样的。我的本意通过集中于一个工程，向你展示Flexbox模块能做的所有东西。如果你 对这样使用Flexbox模块是对还是错比较好奇，可以参见下面我的相关文章。 在这篇文章中我充分表达了自己的看法。现在我相信在读过文章后不会再有人对我说三道四了。在Catty Music中，所有的布局都是用Flexbox模块实现，目的就是为了展示其强大的功能。现在我们一起完成这个创建吧。 像任何合理项目一样，在漫长的实施过程中做一点小的计划可以避免很多无效工作。现在我们先做个计划。 |
|
|
来自： 飞球大的波波 > 《Html/Css》
