我试图添加 justify-content: space-between;
以便两个 flex 元素之间有相等的空间。
注意红色的
div
,里面的两个元素“粘”在一起没有空间 在320px
屏幕之间,尺寸为:http://imgur.com/a/QAYcy同样,在
856px
屏幕中,没有分配空间, http://imgur.com/a/y0iBp现在在
1364px
屏幕中分配空间,http://imgur.com/a/05tsj
我正在尝试使用 justify-content: space-between;
有什么想法吗?
/* SECTION THREE */
.sec-3 {
background-color: #f1eeee;
margin-top: -22px;
}
.sec-3-flex {
background-color: red;
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: space-around;
}
.sec-3-flex #iphone-2-img {
padding-top: 30px;
background-color: orange;
margin-right: -10%;
}
.sec-3-flex .sales-copy-wrap {
background-color: yellow;
}
#iphone-sec-3 {}
<div class="sec-3">
<!-- iphone image -->
<div class="sec-3-flex">
<!-- Iphone 1 image -->
<picture id="iphone-sec-3">
<!-- <source media="(min-width: 320px)" srcset="img/mobile/mobile-iphone-1.jpg"> -->
<source media="(min-width: 320px)" srcset="img/desktop/images/home_11.jpg">
<img id="iphone-2-img" src="img_orange_flowers.jpg" alt="Flowers" style="width:50%">
</picture>
<div class="sales-copy-wrap">
<h3>Get organized with events, tasks and notes.</h3>
<p class="sales-copy">Now more then ever it is critical for smart professionals to stay up to date with important deadlines.</p>
</div>
</div>
</div>
最佳答案
图像不是 flex 元素。它是 flex 元素 (picture
) 的子项。
因此在这个 flex 元素中,图像(自然地)向左对齐。
将此添加到您的代码中:
picture {
text-align: right;
}
关于html - flex-items 空间没有在小屏幕上分配,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45094132/