所以,我想像上图中那样在flex-box内对齐项目。
我的html如下:
<div class="flex-row">
<div class="flex-item">
<img src="/default.png">
</div>
<div class="flex-item">
<img src="/default.png">
</div>
<div class="flex-item">
<img src="/default.png">
</div>
</div>
css为
.flex-row {
min-height: 400px;
display: flex;
align-items: flex-start;
}
.flex-item:nth-child(2) {
align-items: center;
}
.flex-item:last-child {
align-items: flex-end;
}
答案 0 :(得分:1)
使用align-self
而不是align-items
.flex-row {
min-height: 300px;
display: flex;
width: 90%;
margin: 1em auto;
border: 1px solid red;
justify-content: space-between;
}
.flex-item {
height: 50px;
background: lightblue;
width: 100px;
}
.flex-item:nth-child(2) {
align-self: center;
}
.flex-item:last-child {
align-self: flex-end;
}
<div class="container flex-row">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
答案 1 :(得分:0)
注意!
要将高度设置为列,请在此处更改px
:flex: 0 1 50px;
或将其删除!
margin-right/left:auto
用作:
.flex-row {
min-height: 400px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.flex-item {
flex: 0 1 50px;
}
.flex-item:nth-child(2) {
margin-right: auto;
margin-left: auto;
}
.flex-item:last-child {
margin-left: auto;
}
<div class="flex-row">
<div class="flex-item">
<img src="/default.png">
</div>
<div class="flex-item">
<img src="/default.png">
</div>
<div class="flex-item">
<img src="/default.png">
</div>
</div>
2。使用align-self
.flex-row {
min-height: 400px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.flex-item {
flex: 0 1 50px;
align-self: flex-start;
}
.flex-item:nth-child(2) {
align-self: center;
}
.flex-item:last-child {
align-self: flex-end;
}
<div class="flex-row">
<div class="flex-item">
<img src="/default.png">
</div>
<div class="flex-item">
<img src="/default.png">
</div>
<div class="flex-item">
<img src="/default.png">
</div>
</div>
答案 2 :(得分:0)
是这样吗?
您需要flex-wrap: wrap;
才能包裹物品,需要足够宽(100%)。由于100%的弹性项目始终会对齐到整个宽度,因此您需要text-align
,而不是align-items
,这首先是错误的属性。
align-items
是交叉轴上的对齐方式,不是justify-content
上的主轴
.flex-row {
min-height: 400px;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
}
.flex-item {
flex-basis: 100%;
}
.flex-item:nth-child(2) {
text-align: center;
}
.flex-item:last-child {
text-align: right;
}
<div class="flex-row">
<div class="flex-item">
<img src="/default.png" width="100" height="50">
</div>
<div class="flex-item">
<img src="/default.png" width="100" height="50">
</div>
<div class="flex-item">
<img src="/default.png" width="100" height="50">
</div>
</div>
答案 3 :(得分:0)
看看这段代码
display:flex;
flex-direction: row;
justify-content: flex-start;
align-items: centre;
使用flex-direction
,您可以指定主体对齐方式(水平与row
,垂直与column
)。根据您在此处选择的内容,以下属性会产生不同的效果。
然后使用justify-content
指定元素在元素内的排列方式应在刚定义的主轴上对齐(垂直或水平)。
在这种情况下,flex-start
是指我的轴的起点。
然后使用align-items
指定辅助轴的对齐方式。垂直轴是因为我们选择flex-direction: row;
而不是flex-direction: column;
。因此,在垂直轴上,项目将对齐centre
别忘了看一下space-between
或flex-end
之类的可用属性