弹性盒子(Flex Box)详解
·
1 . 弹性盒子的特点
- 弹性盒子是 CSS3 的一种新的布局模式。
- CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
- 主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
- 交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
特点:
- 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
- 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
- 弹性容器内包含了一个或多个弹性子元素。
注意：
-
弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
-
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
-
设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
1 . 1 弹性布局与浮动相比
-
弹性布局与浮动相比，不但可以实现多个块元素共存于一行，而且对父元素没有不好的影响，同时实现子元素等距分隔，或等距环绕并不需要人为的计算。弹性布局会自动计算。
-
使用浮动元素会脱离标准流影响后面的盒子布局 , 但是使用弹性布局就不会
2 . 主轴对齐
主轴对齐方式 :justify-content
| 属性值 | 作用 |
|---|---|
| flex-start | 默认值, 起点开始依次排列 |
| flex-end | 终点开始依次排列 |
center | 沿主轴居中排列 |
space-around | 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧 |
space-between | 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间 |
space-evenly | 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等 |
重点记住标红的。如果非要问我那个常用，我只能说是 space-between
2 . 1 space-between
- 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。
justify-content: space-between;
显示效果：两侧没缝隙
2 . 2 space-around
- 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
justify-content: space-around;
效果如下： 记住2倍
2 . 3 space-evenly
- flex 项都沿着主轴均匀分布在指定的对齐容器中。相邻 flex 项之间的间距，主轴起始位置到第一个 flex项的间距，主轴结束位置到最后一个 flex 项的间距，都完全一样。
justify-content: space-evenly;
效果如下： 记住空隙一样大
2 . 4 center
justify-content: center;
效果如下： 经常用于让一个盒子水平居中
3 . 侧轴对齐
3 . 1 单行侧轴对齐方式 : align-items
| 属性值 | 作用 |
|---|---|
| flex-start | 起点开始依次排列 |
| flex-end | 终点开始依次排列 |
center | 沿侧轴居中排列 |
| stretch | 默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器 |
flex-start
- 元素向侧轴起点对齐。
flex-end
- 元素向侧轴终点对齐。
center
- 元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。
3 . 2 多行侧轴对齐方式align-content
注意:
- 此处设置侧轴多行的垂直对齐方式。
align-content（少） - 和前面学过的
align-items（侧轴单行垂直对齐） （多） - align 垂直 比如 align-items 垂直对齐 align-content 多行垂直对齐
- content 主轴 justify-content align-content 侧轴多行对齐
align-content：center；
| 属性值 | 作用 |
|---|---|
| flex-start | 默认值, 起点开始依次排列 |
| flex-end | 终点开始依次排列 |
| center | 沿主轴居中排列 |
| space-around | 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧 |
| space-between | 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.f {
width: 400px;
height: 400px;
background-color: red;
margin: 0 auto;
display: flex;
justify-content: center;
/* align-items: center; */
/* 居中 */
/* align-content: center; */
/* 只对多行有效 */
align-content: space-around;
flex-wrap: wrap;
}
.s {
width: 100px;
height: 100px;
background-color: blue;
}
.s:nth-child(2n) {
background-color: yellow;
}
</style>
</head>
<body>
<div class="f">
<div class="s"></div>
<div class="s"></div>
<div class="s"></div>
<div class="s"></div>
<div class="s"></div>
<div class="s"></div>
<div class="s"></div>
</div>
</body>
</html>
flex-start
- 所有行从垂直轴起点开始填充。第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行。
flex-end
- 所有行从垂直轴末尾开始填充。最后一行的垂直轴终点和容器的垂直轴终点对齐。同时所有后续行与前一个对齐。
center
- 所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点边和最后一行的距离。
space-between
- 所有行在容器中平均分布。相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的边对齐。
space-around
- 所有行在容器中平均分布，相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。
space-evenly
- 所有行沿垂直轴均匀分布在对齐容器内。每对相邻的项之间的间距，主开始边和第一项，以及主结束边和最后一项，都是完全相同的。
3.3 设置弹性元素自身在侧轴（纵轴）方向上的对齐方式
align-self属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。
flex-start：
- 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：
- 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：
- 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：
- 如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
stretch：
- 如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
4 . flex实现盒子居中
4 . 1 flex布局设置居中
-
利用弹性布局(flex)，实现水平居中，
-
写在父元素上这就是定义了一个伸缩容器 justify-content主轴对齐方式，
-
默认是横轴 align-items 纵轴对齐方式，默认是纵轴 优点： 简单、方便、快速，三行代码搞定
.f {
width: 400px;
height: 400px;
background-color: red;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.s {
width: 200px;
height: 200px;
background-color: blue;
}
<div class="f">
<div class="s"></div>
</div>
4 . 2 flex布局(子元素直接margin: auto)
<style>
.f {
width: 400px;
height: 400px;
background-color: red;
margin: 0 auto;
display: flex;
}
.s {
width: 200px;
height: 200px;
margin: auto;
background-color: blue;
}
</style>
</head>
<body>
<!-- 给容器设置 display: flex; 子项设置 margin: auto; -->
<div class="f">
<div class="s"></div>
</div>
</body>
5 设置主轴方向
主轴默认是水平方向, 侧轴默认是垂直方向
修改主轴方向属性: flex-direction
| 属性值 | 作用 |
|---|---|
row | 行, 水平(默认值) |
column | *列, 垂直 |
| row-reverse | 行, 从右向左 |
| column-reverse | 列, 从下向上 |
语法：
flex-direction：column;
修改完毕，主轴是Y轴， 侧轴是X轴。
5. 1 修改主轴经常的使用场景：
6 . 弹性子元素分配空间
- flex 属性用于指定弹性子元素如何分配空间。
auto: 计算值为 1 1 autoinitial: 计算值为 0 1 autonone：计算值为 0 0 autoinherit：从父元素继承
列题: flex数值分配空间
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.flex-container {
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
margin: 10px;
}
.item1 {
flex: 2;
}
.item2 {
flex: 1;
}
.item3 {
flex: 1;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item item1">flex item 1</div>
<div class="flex-item item2">flex item 2</div>
<div class="flex-item item3">flex item 3</div>
</div>
</body>
</html>
注意: 高是继承父元素的
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
27
0- 0
已为社区贡献4条内容
所有评论(0)