开始之前先讲一讲flex的内容；
首先，flex是一个用于布局的元素，也可以用于整页布局(虽然一开始不是有意如此)。
flex存在三个版本：
- 2009 display:box;
- 2011 display:flexbox("tweener" ,supported only by IE10(笑))
- 2016：display:flex ；
我们只专注于版本3也就是2016版本
当然对于兼容性问题、前缀问题，还是让Sass等好朋友来帮忙吧。(不考虑向后兼容性hack和前缀问题等)
跨浏览器支持的前缀一般还是需要添加，不过内容过于繁杂，变化过于迅速，and kind of futile。
flexbox的特点
基本上，flex的操作思路就是一个容器，包含一些元素，两者缺一不可；
在容器上操作排列方式，在元素上操作宽度高度等等。
advantage:
垂直居中简单了许多,请指出为什么？(think!)
and 还记得float中的元素高度不同导致的问题吗？ flex中会好很多，而且不需要JS。
还能设置order，（也许很有用，这个就好像z-index！）
可以类比float ，float 中有 row,有 浮动元素。还有清除浮动。在浮动中，row的核心是什么？请思考！
缺点：indeed still hack but a pervasive hack (Bootstrap4)
1.首先本意不是用于整个页面的布局。 只在1 个尺度上工作。
2.浏览器支持度不好说，如果进行兼容调试，请查阅 can i use.
在flex中，
- 有父元素，或者叫容器，容器中的css的要素会有些不同，比如规定子元素会是flex的，规定水平、垂直对齐(or justify-contents、align-items and so on)，规定main-axis的方向。注意简写属性flex-flow。
- 子元素的要素主要是grow0/shrink1/width。width很重要，所以请回想这个width和float中的width的区别，以及，为什么不要给flex元素规定width?这点尤其重要！
- width is absolute ,they do conflict；
- basis的百分比是相对的，可能与预估的不一样。
simple demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox</title>
<!-- <link href="css/boxes.css" rel="stylesheet"> -->
<style>
body {
font-family:consolas;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
border: 1px dotted red;
display:flex;
flex-flow: row wrap
}
li {
border: 1px solid #999;
margin: 0.5em;
padding: 0.5em;
}
</style>
</head>
<body>
<ul>
<li class="flex1">1 Lorem ipsum dolor sit amet.</li>
<li class="flex1">2 Illum facere saepe nam praesentium.</li>
<li class="flex2">3 Vero quia possimus unde sint!</li>
<li class="flex1">4 Cupiditate, ab molestias aliquam cum.</li>
<li class="flex2">5 Recusandae inventore distinctio reiciendis id.</li>
<li class="flex1">6 Laboriosam iure saepe distinctio, sunt.</li>
</ul>
</body>
</html>示例力求简便，float 需要的浮动、清除浮动变成了此处的 flex和 规定主轴、以及元素是否可以换行。
some more demo
上面的snippet就是把容器上加了一个flex，然后(块级)元素就会在一行（或两行）上排列，下面的属性继续增强对布局的控制
like
flex-flow上面的简写包含了下面的属性
flex-direction: column-reverse;
flex-wrap: wrap注意此时，flex元素的宽度还和其内容宽度一致(expansion)，会换行。
那么是否可以设定flex元素的宽度？
yes ,you can ,but no ,not directly using width property like ususal.
下面说一说水平、垂直对齐方式。
然后注意这个height的设定，（可能）不是必须的。
ul {
list-style-type: none;
padding: 0;
margin: 0;
border: 1px dotted red;
display:flex;
flex-flow: row wrap;
height:600px;
justify-content:space-between;//水平分散对齐 main axis
align-items: center //垂直居中 cross axis
}下面好简单就完成了水平垂直对齐
justify-content:center;
align-items: center小结1
所以上面的介绍是容器元素的几个flex设定
包括两个对齐方式，规定布局的主轴方向，规定了换行模式，然后最基本的设定是 显示模式设定为flex；
individual items
全员如下：
order:1;
flex-grow: 0;
flex-shrink: 1;
flex-basis: 25%;basically, grow和shrink就是规定了元素在空间中怎么缩放
but ，一般我们这么写；
.flex1{
order:1;
flex:0 1 25%;
}那么这里就要着重指出，flex-basis是什么？
it's width!
注意一点，这里的25%只会 相对准确
可以写作px,vh之类的值，但是为了flex，应该想写哪个很明显。 请指出要写哪个？vh vw 是什么，请思考一下！
上面简略介绍了flex,下面用flex就可以重新写一个响应式的页面了。
之前已经多次提到，响应式设计的三个要点
- 有响应式的栅格系统
- 有可变尺寸图片
- 有媒体查询
下面把已有的float范例拿过来重新用flex 写一下。
注意一个细节，这里规定了不同的row-，因为理论上，通过容器规定布局方式；但也可以不规定，在一开始采用flex+wrap的方式；很灵活。下面是html布局：
<!DOCTYPE html>
在CSS中，我用到了justify-content来使元素居中，效果并不好，这点很重要！
一般的效果还是单纯使用margin，这样更严格，效果更好。
如果不使用margin，那么每行元素是无法正常对齐的。
| | <==这是我需要的形式 使用margin
如果使用justify-content ，就出现下面的情况。
| |
| |
/* Border box declaration
我觉得最有意思的细节就是，虽然flex中有justify-content这样的属性，但是，因地制宜的，为了让多行布局对齐，还是采用更加严格、不灵活的margin来控制宽度。
那么页面是什么样的呢？其实还是跟float一样的。因为本应如此。
所以还是三个要素
- media query
- resize image
- flexible grid sys
431
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
