一篇掌握Flex 布局方式及其所有属性

目录

传统盒模型

Flexbox 布局方式

Flexbox 核心概念

Flex 容器属性

• flex-direction ：项目元素排列的方向

• flex-wrap ：项目元素排列方式

• justify-content ： 项目在主轴上的对齐方式

• align-items ：项目在交叉轴上的对齐方式

• align-content ：多行项目的排列方式

Flex 项目属性

• order ：项目的排列顺序
• flex-grow ： 项目的放大比例

• flex-basis ：项目在主轴上的空间

• align-self ：项目的对齐方式

正文

• 传统盒模型 ：通过 display、float等参数来配置具体的布局，这种方式代码简单，但是在处理实现诸如垂直居中、弹性宽度和高度等特性时会极为麻烦。

• Flexbox 布局方式 ：可以快速的实现上述各种场景，以及更多非常常用的排版需求，例如：

  — 竖排元素
  — 元素左侧/右侧竖向对齐

Flexbox 核心概念

• 在进行Flexbox 布局时，核心的属性包括容器和项目：

— 容器 ： Flexbox 中外部的容器
— 项目 ： Flexbox 中内部的项目

通过设置容器的参数，来实现内部项目按一定的顺序来进行排布：

• 通过设置 Flex 容器的属性，可以设置容器内各项目的样式

— flex-direction ：项目元素排列的方向

① 值为 row： 内部项目从左向右排列

② 值为 row-reverse ：内部项目反转横向排列

③ 值为 column ：内部项目纵向对齐

④ 值为 column-reverse ：内部项目反转纵向对齐

— flex-wrap ：项目元素排列方式
① 值为 nowrap ： 项目元素不会溢出，也不会自动换行

— justify-content ： 项目在主轴上的对齐方式

① 值为 flex-start ：项目从主轴的开始位置对齐

② 值为 flex-end ： 项目从主轴的结束位置对齐

③ 值为 center ：项目从主轴的中间开始对齐

④ 值为 space-between ：各项目之间保持相同的距离进行排布

— align-content ：多行项目的排列方式（定义多跟轴线的对齐方式，如果项目只有一根轴线，该属性不起作用）
① 值为 flex-start ：与交叉轴的起点对齐

② 值为 flex-end ：与交叉轴的终点对齐

③ 值为 center ：与交叉轴的中点对齐

Flex 项目属性

• 通过设置 flex 项目属性，我们可以控制各项目自己的属性

— order ：项目的排列顺序 （值越小，排列越靠前，默认为0）

— flex-basis ：项目在主轴上的空间 （默认为auto，即项目本来的大小），它可以设为跟 width 或 height 一样的
值，如 150px ，则项目将占据固定空间。