Flex-box两个包装盒时缩放窗口浏览器 [英] Flex-box two boxes wrap when scaling window browser
问题描述
我们在一个家长有四个孩子。我想在图片上看到效果。
< article class =parent>
< figure class =child>
< img src =img / example.jpgalt =/>
< figcaption>
< p> description< / p>
< / figcaption>
< / figure>
< figure class = child>
< img src =img / example.jpgalt =/>
< figcaption>
< p> description< / p>
< / figcaption>
< / figure>
< figure class =child>
< img src =img / example.jpgalt =/>
< figcaption>
< p> description< / p>
< / figcaption>
< / figure>
< figure class = child>
< img src =img / example.jpgalt =/>
< figcaption>
< p> description< / p>
< / figcaption>
< / figure>
< / article>
孩子有一个常数参数宽度:300px;
但是我们不能编辑html(+ div)。
我们只能使用CSS。 是否可能?
我的英语不好sry:)
p>晚上好Agropl!
也许这可以帮助你在正确的方向 - 我还是新使用flexbox,所以如果这可以做得更正确,随时纠正我。 :)
http://codepen.io / andreastherkildsen / pen / pNeajo
< div class =flex-container>
< div class =flex-item>
< h3> 1< / h3>
< p> Lorem ipsum,Lorem ipsum,Lorem ipsum,Lorem ipsum,Lorem ipsum,Lorem ipsum,Lorem ipsum,Lorem ipsum,< / p>
< / div>
< div class =flex-item>
< h3> 1< / h3>
< p> Lorem ipsum,Lorem ipsum,Lorem ipsum,Lorem ipsum,Lorem ipsum,Lorem ipsum,Lorem ipsum,Lorem ipsum,< / p>
< / div>
< div class =flex-item>
< h3> 1< / h3>
< p> Lorem ipsum,Lorem ipsum,Lorem ipsum,Lorem ipsum,Lorem ipsum,Lorem ipsum,Lorem ipsum,Lorem ipsum,< / p>
< / div>
< div class =flex-item>
< h3> 1< / h3>
< p> Lorem ipsum,Lorem ipsum,Lorem ipsum,Lorem ipsum,Lorem ipsum,Lorem ipsum,Lorem ipsum,Lorem ipsum,< / p>
< / div>
< / div>
和样式
.flex-container {
height:500px;
background:blue;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:flex;
align-items:baseline;
-webkit-flex-flow:row wrap;
justify-content:space-around;
}
.flex-item {
background:tomato;
width:300px;
height:auto;
margin-top:10px;
color:white;
font-weight:bold;
text-align:center;
display:flex;
}
.flex-item h3 {
font-size:50px;
padding-left:50px;
}
.flex-item p {
font-size:16px;
padding-left:50px;
}
@media all和(max-width:1230px){
.flex-item {
padding-right:100px;
}
}
We have four children in one parent. And I want to make effect which you see on the picture.
<article class="parent">
<figure class="child">
<img src="img/example.jpg" alt="" />
<figcaption">
<p>description</p>
</figcaption>
</figure>
<figure class="child">
<img src="img/example.jpg" alt="" />
<figcaption">
<p>description</p>
</figcaption>
</figure>
<figure class="child">
<img src="img/example.jpg" alt="" />
<figcaption">
<p>description</p>
</figcaption>
</figure>
<figure class="child">
<img src="img/example.jpg" alt="" />
<figcaption">
<p>description</p>
</figcaption>
</figure>
</article>
The child have one constant parameter width: 300px;
But we cannot edit the html (+div).
We can use only CSS for that thing. Is that possible?
My English is poor sry :)
Good evening The Agropl!
Maybe this is something that can help you in the right direction - im still new to using flexbox, so if this can be done more correct, feel free to correct me. :)
http://codepen.io/andreastherkildsen/pen/pNeajo
<div class="flex-container">
<div class="flex-item">
<h3>1</h3>
<p>Lorem ipsum, Lorem ipsum,Lorem ipsum,Lorem ipsum,Lorem ipsum,Lorem ipsum,Lorem ipsum,Lorem ipsum,</p>
</div>
<div class="flex-item">
<h3>1</h3>
<p>Lorem ipsum, Lorem ipsum,Lorem ipsum,Lorem ipsum,Lorem ipsum,Lorem ipsum,Lorem ipsum,Lorem ipsum,</p>
</div>
<div class="flex-item">
<h3>1</h3>
<p>Lorem ipsum, Lorem ipsum,Lorem ipsum,Lorem ipsum,Lorem ipsum,Lorem ipsum,Lorem ipsum,Lorem ipsum,</p>
</div>
<div class="flex-item">
<h3>1</h3>
<p>Lorem ipsum, Lorem ipsum,Lorem ipsum,Lorem ipsum,Lorem ipsum,Lorem ipsum,Lorem ipsum,Lorem ipsum,</p>
</div>
</div>
and the style
.flex-container{
height: 500px;
background: blue;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: baseline;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.flex-item{
background: tomato;
width: 300px;
height: auto;
margin-top: 10px;
color: white;
font-weight: bold;
text-align: center;
display: flex;
}
.flex-item h3{
font-size: 50px;
padding-left: 50px;
}
.flex-item p{
font-size: 16px;
padding-left: 50px;
}
@media all and (max-width: 1230px) {
.flex-item{
padding-right:100px;
}
}
这篇关于Flex-box两个包装盒时缩放窗口浏览器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!