弹性盒模型
弹性盒模型是CSS3新增的属性，设置display属性值为flex的元素为弹性盒模型对象。弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成，弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器，弹性容器内包含了一个或多个弹性子元素。如果元素不是弹性盒模型对象的子元素，则 flex 系列属性不起作用。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS3 弹性盒子</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{box-sizing: border-box;}
.flex-wrap{
display: flex;
}
.flex-content{
background-color: #f0f;
margin: 10px;
}
</style>
</head>
<body>
<h2>弹性盒子</h2>
<div class="flex-wrap">
<div class="flex-content">android</div>
<div class="flex-content">java</div>
<div class="flex-content">html</div>
<div class="flex-content">css</div>
<div class="flex-content">javascript</div>
</div>
</body>
</html>
弹性容器外及弹性子元素内是正常渲染的，弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示，默认情况每个容器只有一行。以下元素展示了弹性子元素在一行内显示，从左到右。
排列与对齐
弹性容器常用的排列子元素的属性：
- flex-wrap：设置子元素是否可用换行，横向排列下，子元素超出容器换行很有必要。
- flex-direction：设置子元素的排列方式。
- justify-content：设置横轴上的对齐方式（元素对齐）。
- align-content：设置纵轴上的对齐方式（行对齐）。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS3 弹性盒子</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{box-sizing: border-box;}
.flex-wrap{
display: flex;
/* flex-wrap: wrap; */
justify-content: center;
align-items: center;
flex-direction: column;
}
.flex-content{
background-color: #f0f;
margin: 10px;
}
</style>
</head>
<body>
<h2>弹性盒子</h2>
<div class="flex-wrap">
<div class="flex-content">android</div>
<div class="flex-content">java</div>
<div class="flex-content">html</div>
<div class="flex-content">css</div>
<div class="flex-content">javascript</div>
</div>
</body>
</html>
常用属性：
| 属性 | 描述 |
|---|---|
| display | 指定 HTML 元素盒子类型。 |
| flex-direction | 指定了弹性容器中子元素的排列方式 |
| justify-content | 设置弹性盒子元素在主轴（横轴）方向上的对齐方式。 |
| align-items | 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。 |
| flex-wrap | 设置弹性盒子的子元素超出父容器时是否换行。 |
| align-content | 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐 |
| flex-flow | flex-direction 和 flex-wrap 的简写 |
| order | 设置弹性盒子的子元素排列顺序。 |
| align-self | 在弹性子元素上使用。覆盖容器的 align-items 属性。 |
| flex | 设置弹性盒子的子元素如何分配空间。 |
网友评论