程序员经验分享-hwhale

Flex Box 超出边界？ [复制]

2024-04-07

Hello I have been trying to make a flex box in CSS like the image belowenter image description here

but I have a problem that's look like this image enter image description here

看起来 div 号 3 将所有东西都推到这里就是代码

#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%;
}

我还尝试使用align-self属性并将其设置为拉伸到.三，但它也不起作用。这是html代码

<!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>

其实你可以包裹flexcolumns然后对孩子们重新排序：

#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>

js小提琴：https://jsfiddle.net/azizn/12xkrtp4/ https://jsfiddle.net/azizn/12xkrtp4/

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

flexbox

Flex Box 超出边界？ [复制] 的相关文章