flex布局

目录

rem文字适配

rem单位

flex定义

flex父容器

flex父容器属性

布局子项目 

属性

案例

案例相关代码

案例效果图

rem文字适配

rem单位

1、rem是一个相对于根元素字体大小的单位

2、利用flexible.js插件修改字体大小（字体大小随屏幕的大小而改变）

flex定义

flex翻译为“弹性”，通过给元素设置display属性，属性值为flex或inline-flex。使其变成弹性容器，容器中的直系子元素就会变成弹性元素。弹性容器可以直接控制子元素的位置。

flex父容器

flex父容器属性

flex-direction：设置主轴方向

justify-content：用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
提示：使用align-content属性对齐交叉轴上的各项（垂直）。

 

 flex-wrap：设置子元素是否换行。

 align-items：设置元素在侧轴上的排列方式（单行）

 align-content:设置子元素在侧轴上的排列方式（多行）。

布局子项目 

属性

flex：子项目占的份数
如：flex:1;

align-self：控制子项目自己在侧轴的排列方式

 order：定义子项的排列顺序（前后顺序)
如：order:1;

案例

案例相关代码

案例效果图