flexbox布局是CSS3中新增的布局属性，但任何样式属性起作用的前提则是，它必须有对应的html结构。我们首先在html 文件中定义相应的结构，才能使用布局样式。我们简单地写一个ul li 列表，体验一个flex 布局的强大。新建一个index.html 书写结构，一个index.css 书写样式。
index.html , 为了以后便于说明，给每一个li 作了一个1,2,3 标记。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
index.css, 主要是提供默认样式，以便后面进行操作。
ul {
margin: 0;
padding:0;
width: 600px;
margin: 100px auto;
background: grey;
}
li {
list-style: none;
width: 100px;
height: 100px;
margin: 8px;
text-align: center;
line-height: 100px;
font-size: 20px;
}
li:nth-child(1) {
background: red;
}
li:nth-child(2) {
background: green;
}
li:nth-child(3) {
background: yellow;
}
现在在html页面中展示如下：
基本的内容已经完成，现在可以使用flexbox了。使用flex布局，首先要定义一个flex容器。容器，容器，肯定是指父元素，因为它包含子元素，可以称之为容器，在我们这个例子中就是在ul，给ul设置怎样的样式才能使之成了flex 容器，那就是display: flex, 或display:inline-flex. 设为flex 或 inline-flex 都会使ul变成了flex容器，它们的区别是设置display:flex 后，ul 仍然是块级元素，独占一行，而display:inline-flex 则使ul 成了行内元素，可以和其他行内元素进行水平排列。我们可以在ul 后面添加一个span标签实验一个，html 修改如下
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<span>测试ul 是行内元素还是块级元素</span>
给ul添加dispaly: flex 属性：
ul {
display: flex; /*增加 display: flex;属性*/
margin: 0;
padding:0;
width: 600px;
margin: 100px auto;
background: grey;
}
可以看到页面如下，给ul 设置display:flex 后，ul仍然是块级元素
把ul 的display: flex 换成display：inline-flex, 页面展示如下：
display： inline-flex , 确实使ul变成了一个行内元素，在水平方向上进行排列。
不管设置成什么，ul 都成了flex容器，因为我们发现, li元素由原来的垂直排列变成了水平排列。这时元素li也有了另外一个名称，叫flex items(flex 项目)。flex容器中的每一个元素都称之为一个flex项目。 这就是flex布局中非常重要的两个概念： flex 容器和flex 项目。
当一个元素成为了flex容器后，它默认存在两根轴上，主轴(main axis)和 侧轴(cross axis), 它就是我们平常理解的水平轴和垂直轴，因为在一个平面中，只有这两根轴，flex布局也是在平面上布局，它也不例外，那为什么不叫水平轴和垂直轴？因为主轴的方向是不固定的，它即可以是水平方向，也可以是垂直方向。当主轴是水平方向时，侧轴就是重直方向，当主轴是垂直方向时，侧轴就是水平方向。 它有两种可能，所以不能简单称之为水平轴或垂直轴。
主轴是什么方向也很重要，因为它影响了flex 项目的排列。就像上图展示，如果主轴是水平方向，flex 项目就是水平方向依次排列。如果主轴是垂直方向，那么flex项目就会沿着垂直方向依次排列。所以当一个元素成为flex 容器时，我们首先要确定的就是主轴的方向。正好flex-direction属性提供这样的设置。
flex-direction 定义了主轴的方向，相应地也确定了侧轴的方向，因为只有这两个轴且它们是垂直关系。它有四个属性值：row || row-reverse || column || column-reverse。
row: 主轴为水平方向，元素从左边开始排列。
row-reverse: 主轴方向为水平方向，不过元素从右向左开始排列。
column: 主轴为垂直方向，元素从上到下排列。
column-reverse: 主轴为垂直方向，不过元素是从下向上排列。
reverse是反转的意思,row-reverse 就是表示，在row的基础进行反转，原来是从左到右排列，那么现在是从右到左, column-reverse 就表示从下到上。
它的默认值是row , 甚至我们不设置这个属性，它的值也是row. 这也就解释了上面，当我们只给ul 设置display：flex, 时，所有的li 横向排列。
除了flex-direction之外，还有5个属性可以用到flex 容器上，就是父元素上，它们是: flex-wrap, flex-flow, Justify-content, Align-items, Align-content。下面 我们一一介绍
flex-wrap: 它定义了当我们的flex项目非常多时，在flex容器中一行放不下时，元素怎么排列，到底换不换行。 它有三种属性值： nowrap, wrap 和wrap-reverse;
nowrap 是它的默认值，表示不换行，这么多项目始终在一行排列，这就导致了所有的项目都要进行缩小处理。
wrap 表示可以换行，那么一行放不下的元素，就会放到下一行，形成了多行。
wrap-reverse , 可能你已经猜到了，它也是表示可以换行，不过方向相反而已。
我们给ul 元素分加别添加 这三个属性试一试， 这时我们设置方轴方向为row， flex-drection: nowrap
ul {
display: flex; /*增加 display: flex;属性*/
flex-direction: row; /*设置主轴方向*/
flex-wrap: nowrap; /*设置是否多行显示*/
margin: 0;
padding:0;
width: 600px;
margin: 100px auto;
background: grey;
}
由于li元素也较少，能在一行放下，我们再写几个li， 使flex 项目在一行放不下。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
这时页面展示如下，在no-wrap 下，无论flex项目有多少，它都不会换行，每个项目只会进行缩小来适应整个容器的宽度。
现在把flex-wrap:nowrap 改成flex-wrap:wrap, 可以看到以下展示，两行显示，flex项目换行了。
现在再把flex-wrap: wrap 换成 flex-wrap: wrap-reverse, 可以看到 元素换行，且第一行在下面，对上面的图进行了反转
flex-flow: 它是上面两个属性的简写，flex-flow: flex-direction 的取值 flex-wrap 的取值, 如： flex-flow: row wrap, 这时就不介绍了。
Justify-content: 它定义了flex items 在主轴上怎样进行排列。 Flex-start , flex-end, center, space-between, space-around
Align-items 定义了flex items 在侧轴cross axis上怎么进行排列。 Flex-start , flex-end, center ,stretch, baseline. 默认取值 stretch. Baseline
Align-content: 只有在flex-warp: wrap 形成多行时才起作用。它和aling-item 设置，多行时，元素在侧轴上怎么排列。
用在单个flex 项目上的属性：Order || Flex-grow || Flex-shrink || Flex-basis
Order 顺序，重新排列每一个flex item 顺序。默认属性是0,也就是每一个flex items 按照它们在html中定义的结构进行排列。
Just content 定义的元素在主轴上怎么排列，是在容器的左边，右边还是中间。
Align items 定义的项目在侧轴上怎么排列。它有两个值strech base。Strech 就默认属性，如果我们的item 没有设置高度或高度为auto, 那么它会在侧轴方向上进行提伸，占满整个侧轴的空间。
Baseline 主要指的是如是flex-item 中有p , p标签中的下面对齐， 如果没有p标签，则元素的底部对齐。
Align self： 主要对一个元素在侧轴上的对齐方式进行设置，默认属性是auto，所以不设置的话，它跟align-item属性一致。 如果进行设置，它不会覆盖掉align-item属性。
单个flex item 属性的设置
Flex-basis：控制每一个flex-item默认尺寸大小，在其它属性之前，它和item的宽度或高度相互换，如果我们设置的主轴是水平方向flex-direction row, 它就和元素的宽度相互换，如果我们设置的主轴方向是垂直方向flex-direction column, 它就和元素的高度相互换。
Flex-grow: 它指的是当flex-item没有占满整个flex-contain 的空间时，每一个元素怎么变化，要不要变大去占据空间，grow 就是生长，长大的意思，它的默认值是0，不会进行变化。 这时我们把每一个flex-item的flex-grow值设为1, 可以看到它占满了整个flex container的空间， flex-grow 的值覆盖了width的值。 那么这个属性值1 代表什么呢/? 我们把所有的值都设为999， 它的形为和刚才设为1 没有什么区别。
现在我们把其中一个flex-item的值改为flex-grow 改为2， 可以发现这个元素变大了，再改3, 它更大了，从这里可以看出它不是一个绝对值，它是相对值，是某个元素相对其化元素的比例。当设置每一个项目的flex-grow 为1时，一共有6 个元素，那么就是6，整个flex-container会被分成6份，每一个flex-item 各占一份，所以都相同。如果我们其中一个flex-flow设为2. 还是6个元素，那么整个flex container 就分成1+1+2+1+1+1 = 7份，其余5个各1/7, 而第三个占2/7,所以第三个就相对变大了， flex-grow 设置的某个或某些项目相对于其他项目的比例。
Flex-shrink : shrink 收缩，当每一个flex item 的宽度总和超过 flex-contaier容器的时候，每一个项目都会进行收缩。它的默认值是1, 表示每一个元素都会比例收缩。 如果把某个元素的flex-shrink 设为0, 它就不会进行收缩。 如果把它设置3，和flex-grow 一样，它也是比例，每一个flex item收缩1, 它收缩3， 它比别的项目收缩更严重。
Flex： 是上面三个属性简写，像边框border属性一样。 Flex: flex-grow flex-shrink flex-basis
它的默认取值为0 1 auto，这和我们平时没有设置这个属性表现一致，flex-basis: auto 表示，它和元素的宽度或高度保持一致，flex-grow等于0， 表示 如果父元素有剩余空间，它并不会扩大，
Flex-shrink， 如果父元素空间不足，它会进行收缩。
现在我们设置两个元素，一个是flex: 2 1 300px; 一个是1 2 300px; 父元素的宽度为640px;正好放下这个元素。
现在我们看一下flex-shrink是怎么工作的？当我们把容器宽度改为430px; 整个容器损失了210px的空间，由于第一个元素的flex-shrink 是1， 第二个shrink是2, 所以这损失的210px， 分成了3份，第一个元素占1份，也就是70px, 所以第一个元素损失了70px,宽度变为了300-70 =230px; 第二个元素占两份，也就是140px, 所以第二个元素损失了140px;宽度变为了300-140= 160px; flex-grow 的工作原理也是一样，当我们把容器宽度增大到940px;时， 它多获得了300px的空间，每一个元素都会增大，由于第一个是flex-flow是2, 第二个flex-flow是1, 所以这多出来的300px, 也是分成了3份，第一个项目占2份，200px, 宽度增大到300+200 =500px; 第二个占1份，100px, 宽度增大到300+100 =400px;