flex布局整理

折腾了好久，在仿照bootstrap官网上的案例时没有达到想要的效果

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

然而在我电脑上nav并没有居中
后来发现是把ul套在了row里，因为row自带defalut:flex属性，所以导致ul的.justify-content-center失效了，如果要修改的话就应该给row套上.justify-content-center就可以了（其实早就发现了这一点，但就是一直想找出为什么官网成功居中了我没有成功。。）

Flex布局（一：基本概念和容器属性）
Flex 布局语法教程

display:flex;
-webkit-box ,工作中的用postCss插件 可以自动添加浏览器前缀

平时如果需要水平垂直居中的话，用position写法有诸多不便。这时候用flex会方便许多，但是flex的问题在于兼容性。
如果用了flex弹性布局，那么float，clear , vertical-align等属性会失效。

控制水平对齐方式的属性：justify-content
值：center/space-between 两端对齐 /flex-start/flex-end space-around 黄金分割比排列

控制垂直对齐：align-items：center

控制子元素的排列方式（横向/纵向）：flex-direction：row/column

控制多行子元素下的属性：
flex-wrap：wrap/nowrap 控制子元素是否换行
align-content：多行情况下垂直排列 center/flex-start

flex-flow是一个复合属性：

子级属性：
flex这个属性是flex-grow、flex-shrink和flex-basis三个属性的缩写。

平分父级宽度 flex:1 1是系数，每个div占的系数 注意：弹性布局分宽度时会先把固定宽度刨了。
flex-grow:1; 定义子元素放大比例
align-self: 子级覆盖父级的align-item属性
order：排序，数值越小越靠前

https://www.cnblogs.com/ghfjj/p/6529733.html

其他：
flexbox属性justify-content失效
如使用flex布局时justify-content失效原因：
子级中使用了margin：auto；属性会导致其失效，目前仅限于margin设置了auto值 其它数值不会导致失效。