flexbox弹性盒子布局

web:https://www.imooc.com/video/9574

论align-items和align-content的区别：https://www.softwhy.com/article-10111-1.html

html无法充满整个浏览器：

html的height设置为100%

不定宽高的水平垂直居中：

.parent{

justify-content:center;//子元素水平居中

align-items:center;//子元素垂直居中

display:-webkit-flex;

flex-direction:row/column;//子元素布局方向：横向布局或者竖向布局 默认横向布局

-webkit-flex-wrap:nowrap/wrap;//子元素宽度超过父元素宽度时是否换行 默认不换行,不换行有利于页面自适应

}

父元素justify-content取值详解：

flex-start:子元素从左边开始排列  相当于float:left

flex-end:子元素从右边开始排列

center:水平居中

space-between:两边对齐

space-around:子元素有间距的排列

.child{

flex:1;//子元素所占份额

}

子元素align-self取值详解：

定义flex子项单独在侧轴（纵轴）方向上的对齐方式

元素继承了它的父容器的 align-items 属性

flex-start/flex-end/center/auto/stretch/baseline......

子元素order属性：要想让某个元素排在前面，可设置为-1