弹性盒子布局（display:flex）

目录

弹性盒子布局（display:flex）

1.基本概念

 2.容器属性

（1）flex-direction

（2）justify-content 属性

 （3）flex-wrap 属性

（4） align-content 属性

 （5）align-items 属性

 3.实例

1.基本网格布局

2.圣杯布局 

---

弹性盒子布局（display:flex）

1.基本概念

Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。

它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大的方式

• 在不同方向排列元素
• 重新排列元素的显示顺序
• 更改元素的对齐方式
• 动态地将元素装入容器

在 Flexbox 模型中，有三个核心概念：

– flex 项（注：也称 flex 子元素），需要布局的元素

– flex 容器，其包含 flex 项

– 排列方向（direction），这决定了 flex 项的布局方向

 2.容器属性

（1）flex-direction

flex-direction 属性指定了弹性子元素在父容器中的位置。

flex-direction的值有:

•  row：默认值，主轴为水平方向(水平布局),起点在左端
•   row-reverse：主轴为水平方向(水平布局),起点在右端
•  column：主轴为垂直方向(垂直布局),起点在上沿
• column-reverse：主轴为垂直方向(垂直布局),起点在下沿

 

 

（2）justify-content 属性

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

• justify-content：对齐方式
• flex-start：默认值,左对齐
• flex-end：右对齐
• center：居中
• s