Flex框出界？ [英] Flex Box out of borders?
本文介绍了Flex框出界？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
你好，我一直在试图在CSS中制作一个弹性框，如下图所示：
但是我有一个问题，看起来像这个图像
p>
#flexcontainer
{
width：500px;
height：210px;
border：3px纯黑色;
display：flex;
flex-wrap：wrap;
padding：5px;
}
.flexitem
{
background：yellow;
width：150px;
text-align：center;
height：100px;
line-height：100px;
margin：2px;
}
.two
{
width：200px;
}
.three
{
width：120px;
身高：100％;
}
我也尝试使用align-self属性并将其设置为伸展。三但也是行不通的。这里是html代码
<！DOCTYPE html>
< html lang =en>
< head>
< title>
项目名称
< / title>
< link rel =stylesheettype =text / csshref =main.css>
< / head>
< body>
< div id =flexcontainer>
< div class =flexitem one> 1< / div>
< div class =flexitem two> 2< / div>
< div class =flexitem three> 3< / div>
< div class =flexitem four> 4< / div>
< div class =flexitem four> 5< / div>
< / div>
< / body>
< / html>
解决方案
然后重新排列孩子：
#flexcontainer {width：500px; height：210px;边框：3px纯黑色;显示：flex;弯曲流动：列包装; padding：5px;}。flexitem {background：yellow;宽度：150px; text-align：center; height：100px; line-height：100px; margin：2px;}。two {width：200px; order：3;}。three {width：120px;身高：100％ order：5;}。five {order：4; }
< div id =flexcontainer> < div class =flexitem one> 1< / div> < div class =flexitem two> 2< / div> < div class =flexitem three> 3< / div> < div class =flexitem four> 4< / div> < div class =flexitem five> 5< / div>< / div>
jsFiddle： https://jsfiddle.net/azizn/12xkrtp4
Hello I have been trying to make a flex box in CSS like the image below
but I have a problem that's look like this image
it seems like the div number 3 push every thing down here is the code
#flexcontainer
{
width: 500px;
height: 210px;
border: 3px solid black;
display: flex;
flex-wrap: wrap;
padding: 5px;
}
.flexitem
{
background: yellow;
width : 150px;
text-align: center;
height: 100px;
line-height: 100px;
margin: 2px;
}
.two
{
width : 200px;
}
.three
{
width : 120px;
height: 100%;
}
I also tried to use align-self property and set it to stretch to .three but also it doesn't work. Here is html code
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Project Name
</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="flexcontainer">
<div class="flexitem one">1</div>
<div class="flexitem two">2</div>
<div class="flexitem three">3</div>
<div class="flexitem four">4</div>
<div class="flexitem four">5</div>
</div>
</body>
</html>
解决方案
Actually you can wrap flex columns and then reorder the children:
#flexcontainer {
width: 500px;
height: 210px;
border: 3px solid black;
display: flex;
flex-flow: column wrap;
padding: 5px;
}
.flexitem {
background: yellow;
width: 150px;
text-align: center;
height: 100px;
line-height: 100px;
margin: 2px;
}
.two {
width: 200px;
order: 3;
}
.three {
width: 120px;
height: 100%;
order: 5;
}
.five { order: 4; }
<div id="flexcontainer">
<div class="flexitem one">1</div>
<div class="flexitem two">2</div>
<div class="flexitem three">3</div>
<div class="flexitem four">4</div>
<div class="flexitem five">5</div>
</div>
jsFiddle: https://jsfiddle.net/azizn/12xkrtp4/
这篇关于Flex框出界？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
