2016-09-26 85 views
0

所以我面临一个小问题,根据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>

回答

4

有没有这样的东西作为align-items: space-around。您需要align-content: space-around

align-items主要适用于柔性容器中的单线(flex-wrap: nowrap)。

align-content适用于多线柔性容器(flex-wrap: wrap)。

enter image description here

从规格:

8.4. Packing Flex Lines: the align-content property

align-content属性对准的柔性容器的管线内 柔性容器时,有在交叉轴额外的空间, 类似于justify-content如何对齐 之内的单个项目在轴上。

请注意,此属性对单线柔性容器没有影响。

只有多线柔性集装箱在横轴 中有空闲空间才能对齐线条,因为在单线柔性集装箱 中,唯一线会自动拉伸以填充空间。