目录
弹性盒子布局(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