css弹性盒子

css中弹性盒子

display:flex; 实现了真正的弹性盒子；

flex-direction: 弹性盒子的排列方式；

row:从左到右；

row-reverse:从右向左；

column:从上往下；

column-reverse：从下往上；

flex-warp：设置项目的换行方式；

warp：超出一行自动换行；

nowarp：不换行，自适应；

warp-reverse：将内容颠倒换行；

justify-content:内容的对齐方式；

flex-start：内容靠左对齐；

flex-end：内容向右对齐；

center：内容居中对齐；

space-between：两端对齐，两端固定值，中间平分；

space-around：两端居中对齐，每个div两端效果都是一样的；

align-items:容器内额外空间的处理

flex-start:向右对齐；

flex-end：向左对齐；

flex-center：居中对齐；

base-line：效果同flex-start；

stratch:默认效果；

flex：让容器按比例分配

值：直接写数字

例如：

flex：2；意思是一行排只能排两个元素；

order：排序；

值：数字

例如：

order：2；意思就是这个标签显示出来的顺序

//本期的教程到了这里就结束啦,是不是很简单!是不是很棒!让我们一起努力走向巅峰!