移动端入门知识(3)

flex布局

flex即Flexible Box&＃xff0c;其含义就是弹性盒子&＃xff0c;简称”容器”。它的所有子元素自动成为容器成员&＃xff0c;称为Flex项目&＃xff0c;主要用来为盒状模型提供最大的灵活性。容器默认存在两个根轴&＃xff1a;主轴和交叉轴

注意&＃xff1a;任何一个容器都可以定义为弹性盒子&＃xff01;

语法&＃xff1a;display:flex;

注意&＃xff1a;Webkit内核的浏览器&＃xff0c;必须加上-webkit前缀。

一、flex-direction的属性

flex-direction属性决定主轴的方向&＃xff08;也可称之为排列顺序&＃xff09;&＃xff0c;它有以下4个值&＃xff1a;

 案例&＃xff1a;

运行结果&＃xff1a;二、主轴(X轴)对齐方式 

语法&＃xff1a;justify-content&＃xff1a;&＃xff1b;

其有6个值&＃xff1a;

 案例&＃xff1a;

 执行效果&＃xff1a;

 三、交叉轴&＃xff08;Y轴&＃xff09;对齐方式

 语法&＃xff1a;align-items: ;

其有5个值&＃xff1a;

代码大家可以参考上方代码以及图片。

四、换行方式

当容器空间不足时&＃xff0c;项目会等比例缩小&＃xff0c;空间有剩余时&＃xff0c;项目不会放大。

语法&＃xff1a;flex-wrap: ;

其有3个值&＃xff1a;

案例&＃xff1a;

 效果图&＃xff1a;

 注意观察项目的宽度&＃xff01;

五、align-content的属性

align-content用来定义多根轴线的对齐方式&＃xff0c;其值有以下6种&＃xff1a;

下面的代码是上方的一部分&＃xff1a;

效果图&＃xff1a;

 六、flex-flow

flex-flow是flex-direction和flex-wrap的简写&＃xff0c;这个用的不多&＃xff0c;大家了解一下即可。