父元素设置display:flex;
子元素自动成为其成员，仅子元素；
父元素6个属性
- flex-direction
子元素排列方向 - flex-wrap
子元素超出父元素是否换行 - flex-flow
上面两个属性的缩写 - justify-content
子元素在横轴的对其方式（左对齐右对齐等） - align-items
子元素在竖轴的对齐方式（上中下）设置为上对其时，每行均匀占比高，然后所有的子元素在每行中上对其 - align-content
子元素在竖轴上的对其方式（主要作用于多行），设置为上对其时，所有子元素往上靠
子元素6个属性
- order
子元素的排列顺序，默认为0.小的显示在前面 - flex-grow
放大比例，多行没排满的情况下也有效 - flex-shrink
缩小比例，多行情况下不存在空间不够的情况，不起作用 - flex-basis
在设置放大缩小的时候，可以设置一个值用来作为放大缩小的值而省略掉元素本身设置的宽或者高；其缩放效果与直接设置宽高的效果一样 - flex
以上3个的缩写 - align-self
设置单个子元素垂直方向对其属性，覆盖align-items的值
网友评论