Flex 笔记

很早在笔记本里记下的笔记，分享出来

容器属性

display: flex || inlineflex
flex-direction: row || row-reverse || column || column-reverse
flex-wrap: nowrap || wrap || wrap-reverse
flex-flow: flex-direction | flex-wrap
justify-content: flex-start | flex-end | center | space-between | space-around
align-items: flex-start | flex-end | center | stretch | baseline
align-content: flex-start | flex-end | center | stretch | space-around | space-between //多根轴线的对齐方式

项目属性

order: n //数值越小，排列越靠前
flex-grow: n // 项目放大比例 ，默认为0，即不放大
flex-shrink: n // 项目缩放比例， 默认为1，即2空间不足将缩小， 若为1 则不缩小
flex-basis: length | auto
flex: flex-grow | flex-shrink | flex-basis 默认两个快捷键 auto(1 1 auto) none(0 0 auto)
align-self: auto | flex-start | flex-end | center | baseline | stretch

Flex Example

/* 0 0 auto */
flex: none;

/* One value, unitless number: flex-grow (flex-basis changes to 0) */
flex: 2;

/* One value, width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: auto;
flex: content;

/* Two values: flex-grow | flex-basis */
flex: 1 30px;

/* Two values: flex-grow | flex-shrink (flex-basis changes to 0) */
flex: 2 2;

/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/* Global values */
flex: inherit;
flex: initial;
flex: unset;