CSS弹性盒子布局flex

参考：https://juejin.im/post/5e8ae27df265da47f144a8db      阮一峰的flex分析

<div class="container">
    <div class="flex flex1">1</div>
    <div class="flex flex2">2</div>
    <div class="flex flex3">3</div>
</div>

.container作为父容器的属性有：

• flex-direction定义主轴的方向，取值有(row|row-reserve|column|column-reserve)
• flex-wrap 设置子元素排列是否换行，取值有（nowrap|wrap|wrap-reserve）
• flex-flow  是flex-direction与wrap的简写 (row nowrap)表示主轴为x轴并且不换行
• justify-content:flex-start|flex-end|center|space-between(子item两端对齐，中间的间距相同)|space-round(子item的两端的间距是item之间间距一半)
• align-items:flex-start|flex-end|center|baseline（子item的第一行文字对齐）|stretch(如果项目未设置高度或设为auto，将占满整个容器的高度)交叉轴上的对齐方式
• align-content 多根轴线的对齐方式

.flex作为子项目的属性有： 

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

 

总结一下要点：

• 开启 flex 布局使用display: flex属性。
• flex 布局有主轴和交叉轴，分别使用justify-content和align-items控制对齐方式。
• 支持按行或列进行排列，使用flex-direction，另外也支持row-reverse和column-reverse反向排列。
• 子元素可以通过flex简写形式，或者flex-grow，flex-shrink，flex-basis 来调整元素的空间占比和缩放。
• 通过flex-wrap可以设置 flex 子元素折行显示。
• 嵌套flex容器的缩放问题:用min-width:0解决子项目是flex容器的占比问题。