一维布局模型:一次只能处理一个维度(一行或者一列)上的元素布局
属性名称 | 取值 | 默认值 |
---|---|---|
flex-direction | row row-reverse column column-reverse |
row |
flex-wrap | nowrap wrap wrap-reverse |
nowrap |
flex-flow | (flex-direction flex-wrap ) |
|
justify-content | flex-start flex-end center space-between space-around space-evenly |
flex-start |
align-items | stretch flex-start flex-end center baseline |
stretch |
align-content | flex-start flex-end center space-between space-around stretch |
flex-start |
属性名称 | 取值 | 默认值 |
---|---|---|
order | integer |
0 |
flex-grow | number |
0 |
flex-shrink | number |
1 |
flex-basis | length auto |
auto |
flex | (flex-grow flex-shrink flex-basis ) |
0 1 auto |
align-self | auto flex-start flex-end center baseline stretch |
auto继承父元素align-items |
flex属性一些简写
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];
flex: 1 = flex: 1 1 0%
flex: 2 = flex: 2 1 0%
flex: auto = flex: 1 1 auto;
flex: none = flex: 0 0 auto; // 常用于固定尺寸 不伸缩
- flex支持程度 (IE10+)