极客观点
项目管理
HarmonyOS
关于justify-content
justify-content：属性用来控制弹性元素在主轴方向上的排列方式,可取值有六个,默认值为flex-start。
flex-start:弹性元素靠近主轴的起边
flex-end:弹性元素靠近主轴的终边
center:弹性元素靠近主轴起边和终边中间的位置
space-around:弹性元素与主轴起边的位置和弹性元素与终边的距离是弹性元素之间外间距的1/2
space-between:首个弹性元素靠近主轴的起边，末尾弹性元素靠近主轴终边弹性元素间的距离平均分配。
space-evenly:弹性元素与主轴起边的位置和弹性元素与终边的距离与弹性元素之间距离相等，即所有间隔都是相等的。
疑问：既然是改变弹性元素在主轴上的排列方式，如果修改主轴方向为什么没有看到效果？
代码
<!DOCTYPE html>
<html>
<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>justify-content</title>
<style>
.container,.columnContainer{
display: flex;
background: #ccc;
border: 1px dashed black;
margin-bottom: 20px;
}
p{
border: 1px solid black;
background: olive;
}
.container:nth-of-type(2),.columnContainer:nth-of-type(8){
justify-content: center;
}
.container:nth-of-type(3),.columnContainer:nth-of-type(9){
justify-content: flex-end;
}
.container:nth-of-type(4),.columnContainer:nth-of-type(10){
justify-content:space-around;
}
.container:nth-of-type(5),.columnContainer:nth-of-type(11){
justify-content:space-between;
}
.container:nth-of-type(6),.columnContainer:nth-of-type(12){
justify-content:space-evenly;
}
.columnContainer{
flex-direction: column;
}
</style>
</head>
<body>
<h2>下面是方向为row的flex 盒子</h2>
<span>flex-start</span>
<div class="container">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<span>center</span>
<div class="container">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<span>flex-end</span>
<div class="container">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<span>space-around</span>
<div class="container">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<span>space-between</span>
<div class="container">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<span>space-evenly</span>
<div class="container">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<h2>下面是方向为column的flex 盒子</h2>
<span>flex-start</span>
<div class="columnContainer">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<span>center</span>
<div class="columnContainer">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<span>flex-end</span>
<div class="columnContainer">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<span>space-around</span>
<div class="columnContainer">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<span>space-between</span>
<div class="columnContainer">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<span>space-evenly</span>
<div class="columnContainer">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
</body>
</html>效果
问题
从上面图片可以看出将flex-direction 换为column后 justify-content几个属性值展示效果都相同，这是为什么呢？？？？？
column 容器要加个高度，并且要把 p 标签的 margin 去掉，这样你就能看到效果了。