小编Moh*_*oli的帖子

Flex Box出界？

您好我一直在尝试在CSS中制作一个弹性框,如下图所示

但我有一个看起来像这个图像的问题

似乎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%;
}

Run Code Online (Sandbox Code Playgroud)

我也尝试使用align-self属性并将其设置为伸展到.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 …

Run Code Online (Sandbox Code Playgroud)

html css css3 flexbox

Moh*_*oli

2016 05-03

6
推荐指数

1
解决办法

8449
查看次数