记flex弹性布局之理论和实践

这里仅记录常用的属性，因为常用的也就那几个，记录太多了反而很杂，自己也记混了。
1.通常我们会给要使用弹性盒子布局的外容器加上display:flex;属性开启flex布局；外容器开启了flex布局后，其内部的子元素都会成为其一个个item,你会发现原本自成一行的快级元素也会在一行并排显示，直接达到了float:left的效果；
2.接着我们看看父元素上可以加的一些属性：

• 2.1： justify-content:flex-start center flex-end space-between space-around
• （定义子元素在垂直主轴上的排列或对齐方式：左对齐 居中 右对齐 两端分布 子元素两侧距离对等）
• 2.2：align-items:flex-start center flex-end space-between space-around
• （定义子元素在水平主轴上的排列或对齐方式：左对齐 居中 右对齐 两端分布 子元素两侧距离对等）
• 2.3：flex-wrap:Nowrap wrap wrap-reverse
  （子元素是否在一行还是换行显示）

3.定义在子元素的属性
align-self:flex-start flex-end center 子元素可以有自己的对齐方式,设置后会覆盖掉align-items属性；

实践：实现子元素在父元素的水平垂直居中：

.parent{
display:flex;
justify-content:center;
algin-items:center;
}

子元素等分空间且文本居中对齐，适合于导航内的文字字数一样的水平排列

.parent{
display:flex;
}
.son{
felx:1;
text-align:center;
}
比较简单常用的属性互相搭配就可以实现常用的大部分效果，取代浮动 定位等布局方式。