gpt4 book ai didi

html - Flex Box 出界了?

转载 作者:太空狗 更新时间:2023-10-29 15:16:21 24 4
gpt4 key购买 nike

<分区>

你好,我一直在尝试在 CSS 中制作一个 flexbox ,如下图所示 enter image description here

但我有一个问题,看起来像这张图片 enter image description here

似乎 3 号 div 将所有东西都推到了这里是代码

#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 属性并将其设置为 stretch to .three 但它也不起作用。这是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>

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com