CSS伸缩布局
发布时间
阅读量：
阅读量
CSS伸缩布局解析
CSS flex 是一种具备高度适应性的布局方式，以往若想将块级元素排列于同一行，通常依赖 display、position 或 float 等方法实现，而 flex 布局则为网页设计提供了更为灵活的模型。所谓弹性布局，即能够依据容器与子元素的空间大小进行自动调整与伸缩。
与 flex 相关的属性如下：
1、display：flex；在父级容器中设置该属性后，其子元素方可应用 flex 相关特性
2、flex：none |flex-grow flex-shrink flex-basis 用于设定子元素的伸缩比例，可同时指定多个参数或单独设定某一参数。（所有数值均不得为负数）
（1）none 等同于 flex：0 0 auto；
（2）flex-grow 用于定义元素在空间充足时的扩展比例。
代码示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie全部评论 (0)
还没有任何评论哟~