flex布局入门讲解

flex布局

特点

• 开启了flex布局的元素叫flex container（弹性容器）
• flex container里面的直接子元素叫做flex item（弹性项目）

当flex container中的子元素变成了flex item时，具有以下特点

• flex item的布局将受flex container属性的设置来进行控制和布局
• flex item 不再严格区分块级元素和行内元素
• flex item默认情况下时包裹内容的，但是可以设置宽度和高度

设置display属性为flex或者inline-flex可以成为flex container

• flex： flex container以block-level形式存在
• inline-flex： flex container以inline-level形式存在

flex item的宽度

flex container的属性

flex-direction

设置主轴的方向：

• row(默认)：主轴从左往右
• row-reverse：主轴从右往左
• co