Flex弹性盒布局
本章目标
会使用flex实现页面布局
会使用容器属性
会使用项目属性
能够解决flex布局中遇到的问题
思考：
为什么出现flex弹性盒布局
分析：
垂直居中并不容易实现
Flex定义
flex是Flexible Box的缩写 意思为"弹性布局"，
用来为盒状模型提供最大的灵活性
弹性盒子由弹性容器（Flex container）和弹性子元素（Flex item）组成
弹性容器通过设置display 属性的值为flex 或 inline-flex 将其定义为弹性容器
弹性容器包含了一个或多个弹性子元素
注意：
弹性容器外以及弹性子元素内是正常渲染的，弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
作用：
它能够更加高效方便的控制元素的对齐/排列
可以自动计算布局内元素的尺寸，无论这个元素的尺寸是固定的还是动态的
控制元素在页面的布局方向
按照不同DOM所指定排序方式对屏幕上的元素重新排序
布局方式分类
行内级/块级布局
表格布局
浮动/定位布局
Flex布局
网格矩阵形式的布局
应用场景
使用在现代浏览器中
有一定宽容度要求的设计中
相对
宽容度要求较高
绝对
宽容度较低，100%还原设计稿
示例：以下元素展示弹性子元素在一行内显示，从左到右
示例：
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>
扫一扫
521
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
