个人CSS Flex印象

具体的属性说明，请查看网上各大教程。推荐飘零雾雨整理的CSS参考手册。
本文是对于我在使用flexbox过程当中的碰到的一些问题的记录，留下来的印象。

默认

以下默认的代码结构，当flex-wrapper这个容器设置为display: flex以后，其子元素flex-item即便未显式的声明flex属性，都会默认为flex元素，使用默认值，值为：0 1 auto（该值在 Chrome 55.0.2883.87 m 经过window.getComputedStyle($0, null)['flex'];取得）。

它的表现为全部子元素的宽度都是它自身内容即content-box的宽度(不使用box-sizing来改变盒模型)，且不换行。

https://jsfiddle.net/lyplba/f...

换行

先上一个咱们以往简单的多列布局（注意：只做为实现，不附加其余条件），会自动换行（实际上是被撑下去了），而使用flex布局的形式，你会发现，怎么不会自动换行了？即便你把宽度设为100%也于事无补，flex它会自动均分父容器的宽度，结果就以下示例同样：

float和flex设置的width是一致的，都为25%

https://jsfiddle.net/lyplba/a...

那么，怎么去换行？这时候就是使用flex-wrap的时候了，不单只这个，还涉及到width和flex-basis。这个的话请参考Stackoverflow上的问答。

flex-basis会设置flex元素（不是包裹flex元素的容器，而是该容器内的flex子元素）的宽或者高（取决于flex-direction是row仍是column），所以会致使宽度变高度，高度变宽度，确切的状况下才用，否则我我的通常才用width来设置。

经过设置flex-wrap的值为wrap，就能够实现和float同样的效果了，以下：

https://jsfiddle.net/lyplba/o...

文本省略截取

当被截取的内容被flex所包含的时候，会发现文本截取没法正常生效。

具体的解释见Stackoverflow上的回答。

更深刻的了解为何即便一个flex元素和一个固定宽度的非flex元素并行的时候，flex元素内容一多就会撑开固定宽度的元素，直至占满，这里有更深刻的解释说明为什么会这样：Flexbox Implied Minimum Size

结构以下：

<div class="container">
  <div class="flex">
    <div class="inner">
      <div class="title">这块使用flex布局的结构，会使内部的子元素没法被正常截取</div>
    </div>
  </div>
</div>

示例结果：
https://jsfiddle.net/lyplba/r...

flex居右

这个需求特别是在弄用户卡片的时候特别须要这样的设置（是我这边哈~），看以下截图：

能够看到关注按钮在右侧，flex布局的好处之一就是能够很是方便的处理居中问题，假设如今咱们把手机号下的日期去掉，按照常规的作法无法居中且还要特别设置或者用其余方法来居中(display: table)之类的。

具体的解决方法仍是点这里看 StackOverflow 上的(果真是面向 Google 编程~)

归纳

flex的优点在于布局方式，任意的上中下、左中右对齐方式、位置调整、自适应那是至关的赞，能够尽量的减小使用float、position这种不布局方式，使他们回归本质，就像之前的table，关于flex布局我的仍是要须要花时间去实战了解。