制作卡片Flexbox容器：flexItem 1含卡片但测试未通过创建验证

你的代码存在几个关键错误，导致卡片无法被正确识别，测试无法通过：

1. HTML结构错误（核心问题） #

第4个卡片的容器标签被提前错误闭合，导致图片和段落不在卡片容器内，测试无法识别这个有效卡片：

<!-- 错误代码 -->
<div class="flex-imageItem"></div>
    <!-- Card 4 -->
    <img src="img/abstract4.jpg" alt="abstract art">
    <p>Dignissimos consequuntur maxime harum debitis ratione, culpa iure pariatur quaerat?</p>
</div>

修正为：

<!-- 正确代码 -->
<div class="flex-imageItem">
    <!-- Card 4 -->
    <img src="img/abstract4.jpg" alt="abstract art">
    <p>Dignissimos consequuntur maxime harum debitis ratione, culpa iure pariatur quaerat?</p>
</div>

2. CSS中的无效语法与错误选择器 #

• flex-grow: fill是无效值，flex-grow仅接受数字，flex: 1已经包含flex-grow:1，无需额外设置
• box-shadow: 0 1 3px语法错误，缺少单位和阴影颜色，应改为box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15)
• 错误选择器：.flex-item#1 .flex-ImageContainer .flex-item .flex-imageItem p多了一层.flex-item，因为flex-imageItem直接嵌套在flex-ImageContainer下，正确选择器为.flex-item#1 .flex-ImageContainer .flex-imageItem p

修正后的完整代码 #

CSS代码 #

main{
  flex:1;
}

html{
  height: 100%;
}

.flex-bodyContainer{
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: inherit;
}

body {
  font-family: "Lato", "Helvetica Neue", "Helvetica", sans-serif;
  margin: 0;
  height: inherit;
}

* { box-sizing: border-box; }

.flex-container { 
  display: flex;
  height:100%;
}
.flex-item{
  padding: 1em;
}

.flex-item#0{
  flex-basis: 240px;
}

.flex-item#1{
  flex: 1;
  background-color: #eee;
}

.flex-item#1, .flex-ImageContainer{
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
}

.flex-item#1 .flex-ImageContainer .flex-imageItem{
  flex: 0 0 250px;
  background-color: white;
  margin:0.5rem;
  padding: .5rem 1rem;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.flex-item#1 .flex-ImageContainer .flex-imageItem p{
  padding:0.5rem 1rem;
}

.flex-item#2{
  flex-basis: 180px;
  flex-shrink: 0;
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">  
    <title>Cards</title>
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">    
    <!-- normalize.css for cross-browser stuff -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body class="flex-bodyContainer">
    <main>
        <div class="flex-container">
            <section class="flex-item" id="0">
                <h1>Cards</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, ullam! Provident at accusantium, explicabo odio laborum ducimus earum amet repudiandae commodi quod distinctio, iste reprehenderit nihil ullam dolorum illo fugit.</p>
            </section>

            <section class="flex-item" id="1">
                <div class="flex-ImageContainer">
                
                    <div class="flex-imageItem">
                        <!-- Card 1 -->
                        <img src="img/abstract1.jpg" alt="abstract art">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, laborum.</p>
                    </div>

                    <div class="flex-imageItem">
                        <!-- Card 2 -->
                        <img src="img/abstract2.jpg" alt="abstract art">
                        <p>Doloremque commodi unde eaque! Et natus dolorum corrupti ut numquam.</p>
                    </div>

                    <div class="flex-imageItem">
                        <!-- Card 3 -->
                        <img src="img/abstract3.jpg" alt="abstract art">
                        <p>Odio praesentium cum nemo nesciunt architecto, quam voluptate porro inventore.</p>
                    </div>

                    <div class="flex-imageItem">
                        <!-- Card 4 -->
                        <img src="img/abstract4.jpg" alt="abstract art">
                        <p>Dignissimos consequuntur maxime harum debitis ratione, culpa iure pariatur quaerat?</p>
                    </div>

                    <div class="flex-imageItem">
                        <!-- Card 5 -->
                        <img src="img/abstract5.jpg" alt="abstract art">
                        <p>Odit id earum commodi tempora voluptatum mollitia dolorum, perspiciatis nulla!</p>
                    </div>
                </div>
            </section>

            <section class="flex-item" id="2">
                <ul>
                    <li>Lorem, ipsum dolor.</li>
                    <li>Delectus, aliquid vitae?</li>
                    <li>Vero, molestias debitis.</li>
                    <li>Obcaecati, vitae amet?</li>
                    <li>A, nulla dolore!</li>
                    <li>Error, nesciunt at.</li>
                </ul>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic quo voluptates sint laudantium quaerat commodi!</p>
                <p>Aliquam, harum cumque aspernatur consectetur tempore dicta explicabo facere, adipisci sunt quas perferendis repudiandae sequi!</p>
                <p>Dolore aut error distinctio! Nemo impedit ipsum sunt neque vel enim unde incidunt nam consequuntur!</p>
            </section>
        </div>
    </main>

</body>
</html>

修正以上问题后，所有卡片会被正确包裹在容器内，测试应该能正常识别到全部5个卡片。

内容的提问来源于stack exchange，提问作者Joey