rem文字适配及flex布局

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 一、rem单位
• 二、怎么设置flex布局
• 三、布局父项常见属性
• 四、布局子项常见属性

一、rem单位

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

html{

            font-size: 12px;//根元素字体大小为12px

     }

p{

            font-size: 2rem;//p元素的字体大小为24px

     }

二、怎么设置flex布局

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

    div{

            display: flex;//变成弹性盒

     }

  弹性盒子可以直接控制子元素的位置

三、布局父项常见属性

flex-direction：设置主轴的方向

justify-content：设置主轴上的子元素排列方式

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

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

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

flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

四、布局子项常见属性

flex子项目占的份数

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

order属性定义子项的排序顺序（前后顺序）