CSS3 弹性盒子(Flex Box)
一、justify-content
属性定义了项目在主轴上的对齐方式。
.box { justify-content: flex-start | flex-end | center | space-between | space-around; }
它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
flex-start
(默认值):左对齐flex-end
:右对齐center
: 居中space-between
:两端对齐,项目之间的间隔都相等。space-around
:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
二、align-items:属性定义项目在交叉轴上如何对齐。
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐。
- center:交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
.box { align-items: flex-start | flex-end | center | baseline | stretch; }
三、align-content属性
align-content
属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。所以,容器必须设置flex-wrap:···;多行
.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }
该属性可能取6个值。
flex-start
:与交叉轴的起点对齐。flex-end
:与交叉轴的终点对齐。center
:与交叉轴的中点对齐。space-between
:与交叉轴两端对齐,轴线之间的间隔平均分布。space-around
:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。stretch
(默认值):轴线占满整个交叉轴。
<!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=edge">
<title>Document</title>
<style>
#box4 {
width: 300px;
height: 300px;
border: 1px black solid;
margin: 20px auto;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: flex-start;
align-content: space-around;
}
#box4 div {
width: 50px;
background: red;
}
</style>
</head>
<body>
<div id="box4">
<div>测试文本</div>
<div>测试文本测试文本</div>
<div>测试文本测试文本测试文本</div>
<div>测试文本</div>
<div>测试文本</div>
<div>测试文本测试文本</div>
<div>测试文本测试文本测试文本</div>
<div>测试文本</div>
</div>
</body>
</html>