Flex弹性盒子布局详解

Flex弹性盒子布局详解

 

目录

Flex弹性盒子布局详解

1、什么是 flex 布局

2、基本概念

3、容器的属性

4、项目的属性

---

1、什么是 flex 布局

Flex 是 Flexible Box 的缩写，意为"灵活的盒子"或"弹性的盒子"，所以 flex 布局一般也叫作"弹性布局"。

2、基本概念

2.1、什么是 flex 容器（flex container）？

采用 flex 布局的元素，称为 flex 容器：

.box { 
    display: flex | inline-flex; 
}

2.2、什么是 flex 项目（flex item）？

flex 容器的所有子元素自动成为容器成员，称为 flex 项目。

项目默认沿主轴排列。

3、容器的属性

3.1、display 属性

display 属性决定是否使用flex布局：

.box { 
    display: flex | inline-flex; 
}

flex：将对象作为弹性伸缩盒显示

 

 inline-flex：将对象作为内联块级弹性伸缩盒显示

3.2、flex-direction 属性

flex-direction 属性决定主轴的方向（即项目的排列方向）：

.box { 
    flex-direction: row | row-reverse | column | column-reverse; 
}

 row（默认值）：主轴为水平方向，起点在左端

row-reverse：主轴为水平方向，起点在右端

column：主轴为垂直方向&