所以我面临一个小问题,根据flexbox中的align-items
属性,图片没有移动,我不知道为什么。Flexbox对齐项不能正常工作
他们只是充当如果我申请align-items: flex-start
,当我把我的元素的宽度为35%,高度为100%。
值得关注的是'topi'
。
总之我正想什么布局(尽管它稍微无关,但可能与此问题的帮助):
我想在父DIV两个上级行。顶行有两个部分,我希望底行有3个部分的列。
我只是不确定为什么图像没有移动。
我的意思是我制作了图像在柔版盒中的div,尽管我认为这是无关紧要的,因为'topi'
类拥有属性align-items: center/space-around
,它应该在包含图像的div上工作。
我会认为图像随div一起移动。
有人能给我启发吗?
P.S. topi
div规则是无用的,因为图像在div中,所以只需要topi
就可以了,对不对?谢谢。
.container {
display: flex;
position: relative;
flex-flow: row wrap;
justify-content: space-around;
align-items: stretch;
height: 95vh;
width: 80%;
margin: 5% auto 8% auto;
background-color: white;
}
.top {
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
align-items: center;
}
.bottom {
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
align-items: flex-start;
}
.bottomi {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-start;
height: 100%;
width: 100%;
background-color: red;
}
.topi {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: space-around;
width: 35%;
height: 100%;
;
background-color: white;
}
.topi div {
display: flex;
width: 100%;
height: auto;
}
.topi2 {
width: 65%;
height: 100%;
;
background-color: yellow;
font-size: 20px;
}
.top,
.bottom {
width: 100%;
background-color: green;
}
.top {
height: 60%;
}
.bottom {
height: 40%;
}
.top {
border: 1px solid green;
}
.bottom {
border: 1px solid pink;
}
<div class="container">
<div class="top">
<div class="topi">
<img src="ham.jpg" width="209" height="205" alt="Picture of kid" />
<img src="george.jpg" width="209" height="205" alt="Picture of kid" />
</div>
<div class="topi2">
<p>Sample sample sample Sample sample sample Sample sample sample Sample sample sample Sample sample sample Sample sample sample Sample sample sample Sample sample sample Sample sample sample Sample sample sampleSample sample sample Sample sample sample
Sample sample sample Sample sample sample
</p>
</div>
</div>
<div class="bottom">
<div class="bottomi">
</div>
<div class="bottomi2">
</div>
<div class="bottomi3">
</div>
</div>
</div>