Flex布局学习笔记

认识Flex布局

• flex布局（Flexible布局，弹性布局）
• 目前特别在移动端用的最多，PC端也越来越多

两个重要概念

• 开启flex布局的元素叫flex container
• flex container里面的子元素叫flex items

开启Flex布局

display属性设置为 flex（块级元素）或 inline-flex（行内元素）

Flex布局模型

应用在Flex-container（容器）的属性

display

• 作用：指定flex属性
• 取值：flex | inline-flex
• flex：将对象作为弹性伸缩盒展示，相当于块级属性，有默认宽度100%
• inline-flex：将对象作为内联块级弹性伸缩盒展示，即行级元素，没有默认宽度

flex-direction

作用：指定容器的主轴方向，主轴默认为水平向右方向，item排列的方向
取值：row | row-reve