提供一种更加有效的方式开对一个容器中的子元素进行排列、对齐和分配空白空间。
flex container 标准属性
display: flex;
flex-direction: row | row-reverse | colum |colum-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: flex-direction 和 flex-wrap 的简写,default: row nowrap
flex-flow:
justify-content: flex-start | flex-end | center | space-between | space-around; items 在主轴上的对齐方式;
align-items: flex-start | flex-end | center | baseline | sretch; items 在交叉轴上的对齐;
align-content: flex-start | flex-end | center | space-between | space-around | stretch; 定义多根轴线的对齐方式,如果只有一根轴线,改属相不起作用(类似于align-items,但是它不是设置弹性子元素的对齐,而是设置各个行的对齐);
flex item
order:
flex-grow: 放大比率;
flex-shink: 收缩比率,空间不足,项目将缩小;
flex-basic: 定义在分配多余空间之前;
flex: auto | initial | none | inherit | [flex-grow] || [flex-shrink] || [flex-basis] 指定弹性盒子如何分配空间,是flex-grow,flex-shrink 和 flex-basic 的简写
auto: 计算值为 1 1 auto ???? 0 0 auto;
initial : 计算值为0 1 auto
align-self: auto | flex-start | flex-end | center | baseline | strect;
进化史
webkit-box;
flex-box;
-webkit-flex;
flex;
标准写法
1
2
3
4
5
6
7
8
9
10
11
12
13
14 .flex-contaier {
display: flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: wrap | nowrap;
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | strect;
align-content: flex-start | flex-end | center | baseline | strect;
}
.flex-item {
order: 1;
flex: auto | none | inherit | [flex-grow] || [flex-shrink] ||[flex-basic];
align-self:
}
兼容写法
类名定义:
flex-container 定义flex 布局
flex-h-center 水平居中
flex-h-between 水平两边
flex-v-center 垂直居中
flex-v-stretch 垂直拉伸
flex-v-end 垂直下对齐
1 | .flex-container { |