一. 什么是弹性布局?
1. 弹性布局的概念:
① 弹性布局也称为 Flex 布局(Flexbox),Flex是Flexible Layout的缩写,意为"弹性布局",也叫作伸缩布局 ,是一种用于设计Web页面布局的CSS技术,是一种新的布局模式;
② 弹性布局主要是用于移动端布局,它为盒模型提供了最大的灵活性,即可以应用于容器中,也可以应用于行内元素,可以在不同屏幕尺寸和设备上简便、高效、完整、响应式地创建各种复杂的布局结构,还可以对一个容器中的元素进行排列、齐和分配空白空间,并且对于响应式设计具有良好的支持;
③ 弹性布局的核心思想是通过指定容器(flex container)和其内部的子元素(flex item)来实现灵活的元素排列和分布。容器是添加弹性布局的父元素,而子元素则是弹性布局容器中的每一个子元素。
2. 弹性布局的基本概念包括:
① 主轴:在弹性布局中,子元素在主轴上的排列方向可以是水平或垂直,这可以通过flex-direction属性来规定;
② 交叉轴:与主轴垂直的另一方向,称为交叉轴;
③ 弹性容器的直接子元素:会受到弹性布局的影响,成为弹性项目。
④ 主轴交叉轴示意图:
2. 弹性布局的优缺点:
(1)优点:
① 适应性强,在做不同屏幕分辨率的界面时非常实用;
② 可以随意按照宽度、比例划分元素的宽高;
③ 可以轻松改变元素的显示顺序;
④ 自适应布局实现快捷,易维护。
(2)缺点:
① PC段浏览器支持情况较差;
② IE11或更低版本,不支持或仅部分支持
3. 弹性布局简单的示例代码:
★ 注:在这个例子中,.container
类使用 display: flex
属性启用弹性布局。.item1
, .item2
, .item3
类使用 flex
属性定义了它们在主轴方向上的伸缩比例,这个布局使得 .item2
占据的空间是 .item1
和 .item3
的两倍。
二. 如何应用弹性布局?
1. 弹性盒子( display:flex;):
① 如果想使用弹性布局,那么,就必须将父元素做成弹性空间,这样,子元素就可以变成弹性盒子,需要注意的是,一个盒子如果变成弹性容器,那么此盒子就具有了两个轴:主轴、交叉轴;
② 弹性盒子是 CSS3 的一种新的布局模式,是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间;
③ 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成,弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器,弹性容器内包含了一个或多个弹性子元素;
注意: 弹性容器外及弹性子元素内是正常渲染的,弹性盒子只是定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
以下是示例代码,展示了弹性子元素在一行内显示,方向从左到右: