CSS-弹性布局2-交叉轴
2017-06-18 本文已影响0人
Java小工匠
4.5 align-items
该属性定义项目在交叉轴上如何对齐。
| 属性值 | 说明 |
|---|---|
| stretch（默认值） | 如果项目未设置高度或者设为auto，将占满整个容器高度 |
| baseline | 项目的第一行文字的基线对齐 |
| flex-start | 交叉轴的起点对齐 |
| flex-end | 交叉轴的终点对齐 |
| center | 交叉轴的中点对齐 |
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex-wrap</title>
<style type="text/css">
.wrap{
width: 200px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 200px;
align-items: stretch;
border: 1px solid red;
}
div{
width: 20px;
margin : 5px;
}
.div1{
padding-top: 10px;
background: red;
}
.div2{
background: blue;
}
.div3{
background: yellow;
}
</style>
</head>
<body>
<div class="wrap">
<div class="div1">测试文字1</div>
<div class="div2">测试文字22</div>
<div class="div3">3</div>
</div>
</body>
</html>
stretch运行结果
stretch运行结果
baseline运行结果
baseline运行结果
flex-start运行结果
flex-start运行结果
flex-end运行结果
flex-end运行结果
center运行结果
center运行结果
**4.7 align-content **
该属性定义了多跟轴线的对齐方式。如果项目只有一根轴线，则该属性不起作用。
| 属性值 | 说明 |
|---|---|
| stretch(默认值) | 轴线占满整个交叉轴 |
| flex-start | 交叉轴的起点对齐 |
| flex-end | 交叉轴的终点对齐 |
| center | 交叉轴的中点对齐 |
| space-between | 与交叉轴两端对齐，轴线之间的间隔平均分布 |
| space-around | 每根轴线两侧的间隔都相等。所以轴线之间的间隔比边框的间隔大一倍 |
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex-wrap</title>
<style type="text/css">
.wrap{
width: 200px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 200px;
align-content: stretch;
border: 1px solid red;
}
div{
width: 50px;
margin:5px;
}
.div1{
background: red;
}
.div2{
background: blue;
}
.div3{
background: yellow;
}
.div4{
background: green;
}
.div5{
background: gray;
}
</style>
</head>
<body>
<div class="wrap">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
</div>
</body>
</html>
stretch运行结果：
stretch运行结果
flex-start运行结果：
flex-start运行结果
flex-end运行结果：
flex-end运行结果
center运行结果：
center运行结果
space-between运行结果：
space-between运行结果
space-around运行结果：
space-around运行结果
