我的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布局个人还是要需要花时间去实战了解。