flex布局的重要概念

两个重要的概念

开启了flex布局的元素叫flex container
flex container 里面的直接子元素叫做flex item

当flex container中的子元素变为flex item时，具备以下特点

flex item 的布局将受到flex container属性的设置来进行控制和布局
flex item 将不再严格区分块级元素和行内级元素
flex item 默认情况下是包裹内容的，但是可以设置宽度和高度

设置display属性为flex或者inline-flex可以成为flex-container

flex: flex container 以block-level形式存在
inline-flex: flex container 以inline-level形式存在

flex container的属性

flex-direction 设置主轴的方向：row, row-reverse, column, column-reverse；
flex-wrap决定了flex container是单行还是多行显示：no-wrap(默认):单行，wrap:多行，wrap-reverse: 多行（对比wrap,cross start与cross end相反）；
justify-content决定了flex items在main axis上的对齐方式：flex-start(默认)：与main start对齐,flex-end:与main end对齐，center:居中对齐，space-between:flex items之间的距离相等,与main start和main end两端对齐，space-around:flex items之间的距离相等，flex items与main start,main end之间的距离是flex items之间距离的一半；space-evenly:flex items之间的距离相等，flex items与main start ,main end之间的距离等于flex items之间的距离;
align-items决定了flex items在cross axis上的对齐方式：normal:在弹性布局中，效果和stretch一样，stretch:当flex items在cross aixs方向的size为auto时，会自动拉伸至填充flex container，flex-start：与cross start对齐，flex-end:与cross end对齐，center：居中对齐，baseline：与基准线对齐；
align-content决定了多行flex items在cross axis上的对齐方式，与justify-content用法相似，