蓝桥杯——弹性布局

• flex-direction 属性，它指定了弹性子元素在父容器中的排列方向和顺序。
• flex-wrap 属性，它指定了弹性盒子的子元素换行方式。
• justify-content属性， 项目在主轴（水平）方向的对齐方式
• align-items 属性，它设置或检索弹性盒子元素在轴上对齐方式。
• align-content 属性，它是用于控制多行的对齐方式。

一，设置为弹性盒子

distyle:flex;

二，容器的两个轴

主轴和垂直的交叉轴，项目默认沿主轴排列

二，容器属性——父容器

2.1 flex-direction 项目的排列方向

2.2 flex-wrap 换行

flex-wrap:nowwrap;//不换行
flex-wrap:wrap;//换行
flex-wrap:wrap-revere;//换行，在第一行下方

2.3 justify-content 项目在主轴（水平）方向的对齐方式

justify-content:center;//居中
justify-content:flex-start;//左对齐，默认
justify-content:flex-end;//右对齐
justify-content:space-between;//两端对齐，项目之间间隔相等
justify-content:space-around;//每个项目两侧的间隔相等，所以项目之间的间隔比边框间隔大一倍

2.4 flex-flow

2.5 aline-items——项目在垂直方向的对齐方式

align-items 属性是用来设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

2.5 aline-content

align-content 属性可以用于控制多行的对齐方式，如果只有一行则不会起作用。

三，子项目属性

3.1 order 排序顺序

3.2 flex-graw 

3.3 flex-shrink 

3.4 flex-basis

3.5 flex 

3.6 aline-self——子项目垂直对齐 

四，例子——水果拼盘

垂直排列，换行， 水果在水平方向居中

display:flex;
flex-direction:column;
flex-wrap:wrap;

总结

       水平居中很容易实现，但是一般垂直居中好像不是很好实现，般我们都会用position、left等等进行定位;但是flex很好的解决了这个问题