|
本文将会涵盖能让你出色使用CSS 的Flexbox模块所有的基础概念。它会比较长，所以我希望你做好心理准备哦。 Flexbox学习曲线忠告 Philip Roberts是一个我十分敬重的开发人员，他曾经发了这样一个推文：
（推文：我知道flexbox模块功能强大并且很棒，但是天呐，每次我尝试和使用它的时候，总是一脸懵逼。） 学习Flexbox一开始并不有趣。它很考验你对CSS布局的认识。但是没关系，所有值得学习的东西都是这么开始的。毫无疑问它值得你下点功夫。它能为你时尚的内容布局创造条件，而且它一时半会儿也不会过时。它已经作为一个新的标准出现了。所以，张开你的双臂，拥抱Flexbox吧！ 你将会学到以下内容 我首先会跟你大致讲一下Flexbox的基础原理。我相信任何人要想理解Flexbox都必须要从这里开始。 flexbox的主要知识结构 学习Flexbox的基本原理是很酷的，更酷的是用这些基本原理创建实用的app。我会和你一起创建许多“小东西”。之后我会把这些东西整理成一个完全用Flexbox布局的音乐APP。 音乐app布局 看起来漂亮吧！当你学习创建音乐APP布局的同时，我会带你深入Flexbox的内部运作。你也会了解到Flexbox在自适应页面设计中的地位。想想我将要给你们展现的东西，我就兴奋不已。 GIF by Jona Dinges 但在你开始创建用户界面之前，我得先给你大致讲一些操作。这看起来可能比较没意思，但这是你通往精通Flexbox道路上的必要部分。咱们开始吧！ 引言 过去几年，CSS已经取得了长足发展。设计者们很热衷于使用滤镜、过度和转换，但是一些我们十分渴求的功能却丢失了。我们使用CSS制作智能页面已经太久了，这使得我们大多数人要去写hacky CSS。我们总是要去处理浮动，表显示技术以及它们所带来的影响。有时候如果你用CSS，你就可能涉及到这个，如果没有，那你的生活是美好的。这次，似乎设计师和前端开发人员的祈祷终于有了作用，而且效果明显。现在我们都可以摆脱那些hacky CSS伎俩了，不需要再无休止的使用浮动和表格显示。是时候拥抱一个更加洁净而时尚的智能布局制作语法了。那么，欢迎来到CSS的Flexbox模块。 Flexbox是什么？ 正式的说明解释是，Flexbox可以为你文档内的元素提供高效的布局、对齐和空间分配方式；即使当你文档元素的视区和尺寸是动态的或者未知的时也可以。如果你感觉上边的解释内容太过正式，我能理解你的这种想法。稍后，我会给你做通俗的解释。无论你是打算写CSS还是刚开始动手，你都会觉得使用Flexbox会十分顺手。 怎么开始使用Flexbox模块呢？ 这是每个人首先问的问题，事实上，答案比你想的简单得多。要想使用Flexbox模块，你只需要去定义一个弹性容器（flex-container）。在一般的HTML中，布局一个简单的元素列表的方式如下： 稍微瞥一眼你就会看到无序的列表（ul）包含了列表元素（li）。我们把ul称作母元素，li称作子元素。要使用Flexbox模块，你必须把母元素变成一个flex container(换句话说就是弹性容器)。你可以通过display: flex 或者 display: inline-flex设定内行变量。就这么简单，之后你就完成了使用Flexbox模块的全部设置。设置好后，一个Flexbox格式化范围就立即产生了。怎么样，简单吧。 “使用display:flex || inline-flex方式创建一个特定的母元素作为一个弹性容器” 使用一个无序列表和一些列表元素，下边的代码就可以初始化一个Flexbox格式化区域。 稍微加入一些样式，你就会明白是怎么回事了。 下边是你会得到的结果： 激活后的Flexbox 或许你没有注意到，但是Flexbox格式化区域已经初始化了。切记，“divs”在CSS栈中是默认是自上而下垂直排列的，如下：
‘divs’的默认视图 上面的图片展示的结果就是你的预期效果。可是，使用了 display:flex你就会立即看到布局的变化。这些列表元素现在是从左到右水平存储的。正如像你使用浮动（float）一样。
Flexbox 实现的效果 在任何母元素上，只要你引入“弹性显示”（display:flex），Flexbox模块就会立即执行。你可能不理解为什么那会改变列表元素的方向。不过我们很快就会涉及到更深层次的内容。现在，相信我就可以了。不过你要明白，“弹性显示”包含的内容是从Flexbox模块开始的。还有一件事我的提醒你一下，一旦你将显示属性设置为弹性，无序列表就会自动变成弹性容器（flex container） 并且其子元素（在这个例子中，是列表元素li）变成弹性盒子元素（flex items）。随着我们学习更多关于Flexbox模块更有趣的内容，和上面相似的情况会不断出现。上面我已经用了两个关键词，但是我还要再强调一下他们。他们对于马上要学习的内容至关重要。 1、弹性容器：也就是你设置了display: flex的母元素。 2、弹性盒子元素：即包含在弹性容器中的子元素。
（弹性容器：包含弹性盒子元素的母元素；弹性盒子元素：弹性容器的子部分） 这是使用Flexbox模块的基础。 弹性容器的属性 Flex-direction || Flex-wrap || Flex-flow || Justify-content || Align-items || Align-content
在上边的部分，我们已经学会了一些基本的内容。即什么是弹性容器，什么是弹性盒子元素以及如何初始化Flexbox模块。现在是时候把他们都付诸实践了。我已经设置了一个母元素作为一个可伸缩容器，一些对齐属性在这个可伸缩容器中已经可以使用。和你将一个区块的宽度属性定义为width: 200px一样，在这个可伸缩容器中有6中不同的属性可以使用。让人欣慰的是，定义这些属性和你已经习惯的属性是一致的。 1.伸缩方向（Flex-direction） 这个Flexbox-direction属性控制的是可伸缩项目沿着主轴（main axis）的方向。 它需要四个取值：
用外行话说就是 flex-direction 属性能使你决定弹性盒子元素如何呈现。水平、垂直或者颠倒方向。咱们再用通俗点的话说吧，就是主轴的默认方向是水平的从左到右。纵轴则是垂直的，从顶到底。
default main and cross axis 默认地，flex-direction 属性是设置行（row），把可伸缩的项目沿着主轴对齐。这就解释了本文开头讲到无序列表的处理。 尽管flex-direction 属性设置并不明确，但是它取的是行（row）的默认值。弹性盒子元素沿着主轴，从左到右水平存储。
flex-items stacked across the main-axis 如果 flex-direction属性改为列（column），那么弹性盒子元素就会沿着纵轴对齐。它们会从上到下而不再是从左到右存储。
flex-items stacked across the cross-axis 2.弹性换行（Flex-wrap） flex-wrap属性有三个取值：
我将会用一个例子给你们大致讲一下flex-wrap属性的作用机制。把一些列表项目放进无序列表。你觉得会发生什么？这个flex容器会自动调整大小以容纳更多项目呢？还是它会把列表项目分拆到其他行？
幸运的是，弹性容器会去调整自身以容纳新的弹性盒子元素。
再深入一点。在母元素中增加大量的可伸缩项目。我们加到了10个，会怎么样呢？
After adding even more list-items 再次强调，弹性容器会自动适应所有的子元素，即使浏览器需要使用水平滚动条。这是每一个弹性容器的默认行为。一个弹性容器会在一个单行上不断适应更多的可伸缩项。这是因为 flex-wrap属性默认的是不换行（nowrap）。这就导致弹性容器不会换行。
但是no-wrap是可变的。弹性盒子元素太多的话，你肯定想要弹性盒子元素在弹性容器中换行。“Wrap”是一个很有趣的词，当弹性容器中的有效空间无法按照它默认的宽度存储弹性盒子元素的时候，就会分拆为多行。用wrap就可以实现了。
这样，弹性盒子元素现在可以按照需要分拆为多行了。在这个例子中，当一个单行的默认宽度不够容纳所有的列表项时，它就会分拆为多行，甚至会调整浏览器。下面是显示的结果。注意，可弹性盒子元素现在是按照默认宽度显示的。没有必要强制多个弹性盒子元素排列到一行。
flex-wrap initiated 还有另外一个wrap-reverse。哈哈，你猜对了，它会使可伸缩项分拆为多行后颠倒显示。
flex-items wrap in reverse 3.弹性流（Flex-flow） flex-flow（弹性流）是flex-direction和flex-wrap两个属性的简写。你使用过border吗？border: 1px solid red。两者的概念是一样的。即把多个值声明到一行。示例如下：
flex-flow broken down in bits 你还可以试一下其他组合：flex-flow: row nowrap, flex-flow: column wrap, flex-flow: column nowrap。它们得到的结果和flex-direction 和 flex-wrap并无二致。我想你应该能理解它们的作用，试一试吧！ 4.内容对齐（Justify-content） 有了Flexbox模块，那你的生命中就有了太阳。不信吗？justify-content属性会让你对此深信不疑的。如下，justify-content属性有五个取值。
使用justify-content属性会发生什么呢？可能你会由它想到文本对齐属性。内容对齐属性定义了可伸缩项在主轴（main axis）的布局。可以参考下面的简单无序列表的例子。
加入一些基本的样式后：
default view after “initiating” flexbox 使用justify-content 属性后，这三个弹性盒子元素就会沿着主轴按照你想要的方式对齐。下面讲一下不同取值的具体使用。 (i) Flex-start 默认的取值是flex-start，flex-start可以使所有弹性盒子元素向主轴起始位置对齐。
justify-content: flex-start (default behavior) (ii) Flex-end flex-end可以使所有弹性元素向主轴结束位置对齐。
justify-content: flex-end (iii) Center Center如你所料，是把弹性元素沿着主轴居中。
justify-content: center (iv) Space-between Space-between 是使每个弹性元素平均分布在一行的空间中。
justify-content: space-between 注意到什么不一样了吗？看下图：
(v) Space-around 最后一个是space-around ，使弹性盒子元素周围的空间一样大。
justify-content: space-around 再看一下下图你就明白了：
是不是觉得这些太多太难掌握了，没关系，多练几次你就习惯这种语法了。一定要搞明白他们是对沿着主轴的弹性盒子元素产生作用的。 英文原文：https://medium./understanding-flexbox-everything-you-need-to-know-b4013d4dc9af#.w3kslst1g |
|
|
来自： 飞球大的波波 > 《Html/Css》
