【Web前端】CSS3 (Flex Box)弹性盒子详解
文章目录
前言
弹性盒子是一种新类型的盒子模型，也有书上称作弹性伸缩盒布局，旨在提供一个更加有效的方式来布置，对齐和分布在容器之间的各项内容，即使它们的大小是未知或者动态变化的。
弹性布局的主要思想是让容器有能力来改变项目的宽度和高度，以填满可用空间（主要是为了容纳所有类型的显示设备和屏幕尺寸）的能力。
- 应用恰当的弹性布局对用户十分友好。页面中所有元素可以随着用户的偏好缩放。
- 对于同时喜欢流动和定宽布局的设计师来说，弹性布局是完美的，因为前两种布局的优点在弹性布局中都能找到。
正文
一、CSS3弹性盒子内容
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
以下元素展示了弹性子元素在一行内显示，从左到右:
<!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>
运行结果：
当然我们可以修改排列方式。
如果我们设置 direction 属性为 rtl (right-to-left),弹性子元素的排列方式也会改变，页面布局也跟着改变:
body {
direction: rtl;
}
.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;
}运行结果：
二、CSS3弹性盒子属性
下图列出了在弹性盒子中常用到的属性：
align-content 属性
align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
语法：
align-content: flex-start | flex-end | center | space-between | space-around | stretch各个值解析：
stretch：默认。各行将会伸展以占用剩余的空间。flex-start： 各行向弹性盒容器的起始位置堆叠。flex-end： 各行向弹性盒容器的结束位置堆叠。center：各行向弹性盒容器的中间位置堆叠。space-between：各行在弹性盒容器中平均分布。space-around：各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
align-items 属性
align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
语法：
align-items: flex-start | flex-end | center | baseline | stretch各个值解析：
- flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
- flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
- center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
- baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
- stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
flex-wrap 属性
flex-wrap 属性用于指定弹性盒子的子元素换行方式。
语法：
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;各个值解析：
- nowrap ：默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
- wrap：弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
- wrap-reverse：反转 wrap 排列。
三、使用弹性盒子创建响应式页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
}
.flex-container > * {
padding: 10px;
flex: 1 100%;
}
.main {
text-align: left;
background: cornflowerblue;
}
.header {background: coral;}
.footer {background: lightgreen;}
.aside1 {background: moccasin;}
.aside2 {background: violet;}
@media all and (min-width: 600px) {
.aside { flex: 1 auto; }
}
@media all and (min-width: 800px) {
.main { flex: 3 0px; }
.aside1 { order: 1; }
.main { order: 2; }
.aside2 { order: 3; }
.footer { order: 4; }
}
</style>
</head>
<body>
<div class="flex-container">
<header class="header">头部</header>
<article class="main">
<p>欢迎大家和我一起学习前端知识</p>
</article>
<aside class="aside aside1">边栏 1</aside>
<aside class="aside aside2">边栏 2</aside>
<footer class="footer">底部</footer>
</div>
</body>
</html>
运行结果：
总结
弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
- 点赞
- 收藏
- 关注作者
评论（0）