CSS flex：显示在前两个旁边的第三个“卡”，我想下面

Question

我有一个缠绕问题，我想要一个意见。我很抱歉，如果这已被回答。我已经看过类似的问题，并尝试了解决方案，但是我找不到适合我的解决方案。

我现在正在个人网站上工作，我拥有主页，我喜欢它，但我试图让体验页面正确显示。现在，我正在尝试拥有3-4张“卡片”的内容。前两个应该在由侧的主部侧显示，并且第三（和第四如果必要的话）应显示在它们下面如下”

3（中心，理想的宽度前两个项目）

OR

目前无论我怎么努力（结算，改变FL前方向等）我得到以下与物品一起挤压。

1 2 3 ...

我重视我的全部styles.css的（我的烂摊子道歉），所以有人比我更亮希望能帮助我解决问题，我的HTML的一个片段，使你可以了解我如何使用这个。

非常感谢你提前！

Styles.css中

/* Global Layout Set-up */ 
{ 
    box-sizing: border-box; 
} 

body { 
    margin: 0; 
    padding: 0; 
    text-align: center; 
    font-family: 'Roboto', sans-serif; 
    color: #222; 
    background: #f7f5f0; 
} 
/* Link Styles */ 

a { 
    text-decoration: none; 
    color: #0499ff; 
} 
a:hover { 
    color: #6633ff; 
} 

/* Section Styles */ 

.main-nav { 
    width: 100%; 
    background: black; 
    min-height: 30px; 
    padding: 10px; 
    position: fixed; 
    text-align: center; 
    margin: auto; 
} 
.nav { 
    display: flex; 
    justify-content: space-around; 
    font-weight: 700; 
    list-style-type: none; 
    margin: 0 auto; 
    padding: 0; 
} 
.nav .name { 
    display: none; 
} 
.nav li { 
    padding: 5px 10px 5px 10px; 
} 
.nav a { 
    transition: all .5s; 
} 
.nav a:hover { 
    color: white 
} 

header { 
    text-align: center; 
    background: url('images/realrocket5.jpg') no-repeat top center ; 
    background-size: cover; 
    overflow: hidden; 
    padding-top: 60px; 
} 
header { 
    line-height: 1.5; 
} 
header .profile-image { 
    margin-top: 50px; 
    width: 150px; 
    height: 150px; 
    border-radius: 50%; 
    border: 3px solid black; 
    transition: all .5s; 
} 
header .profile-image:hover { 
    transform: scale(1.2) rotate(360deg); 
} 
.tag { 
    background-color: #efefef; 
    color: black; 
    padding: 10px; 
    border-radius: 5px; 
    display: table; 
    margin: 10px auto; 
} 
.location { 
    background-color: #222; 
    color: white; 
} 
.card { 
    float: left; 
    max-width: 40%; 
    margin: 30px; 
    padding: 20px 40px 20px; 
    text-align: left; 
    background: #fff; 
    border-bottom: 4px solid #ccc; 
    border-radius: 6px; 
} 

.card-below{ 
    float: left; 
    margin: 30px; 
    padding: 20px 40px 40px; 
    text-align: left; 
} 

.card:hover { 
    border-color: #0399ff; 
} 

ul.skills { 
    padding: 0; 
    text-align: center; 
} 

.skills li { 
    border-radius: 6px; 
    display: inline-block; 
    background: #ff9904; 
    color: white; 
    padding: 5px 10px; 
    margin: 2px; 
} 

.skills li:nth-child(odd) { 
    background: #0399ff; 
} 

footer { 
    width: 100%; 
    min-height: 30px; 
    padding: 20px 0 40px 20px; 
} 

footer .copyright { 
    top: -8px; 
    margin-right: 20px; 
    font-size: .75em; 
} 

footer ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 

footer ul li { 
    display: inline-block; 
} 

a.social { 
    display: inline-block; 
    text-indent: -9999px; 
    margin-left: 5px; 
    width: 30px; 
    height: 30px; 
    background-size: 30px 30px; 
    opacity: .5; 
    transition: all .25s; 
} 
a.twitter { 
    background-image: url(images/twitter.svg); 
} 
a.linkedin { 
    background-image: url(images/linkedin.svg); 
} 
a.github { 
    background-image: url(images/github.svg); 
} 
a.social:hover { 
    opacity: 1; 
} 
.clearfix { 
    clear: both; 
} 

/* Styles for larger screens */ 
@media screen and (min-width: 720px) { 

    .flex { 
     display: flex; 
     max-width: 1200px; 
     justify-content: space-around; 
     margin: 0 auto; 
    } 

    .flex-column { 
    flex-direction: column; 
    } 

    header { 
    min-height: 450px; 
    } 

    .nav { 
    max-width: 1200px; 
    } 

    .nav .name { 
    display: inline-block; 
    border: solid #2204ba 3px; 
    border-radius: 15px; 
    background-color: #222; 
    margin-right: auto; 
    margit-left: left; 
    text-align: center; 
    color: #0399ff; 
    } 

    .nav .navbar { 
    display: inline-block; 
    border: solid #2204ba 3px; 
    border-radius: 15px; 
    background-color: #222; 
    margin-right: 5px; 
    text-align: center; 
    color: #0399ff; 
    } 

    main { 
    padding-top: 50px; 
    } 

    main p { 
    line-height: 1.6em; 
    } 

    footer { 
    font-size: 1.3em; 
    max-width: 1200px; 
    margin: 40px auto; 
    } 

} 

h3 { 
    color: black; 
    letter-spacing: 0.5px; 
} 

.card-title { 
    text-align: center; 
    border: solid black 3px; 
    border-radius: 10px; 
    background-color: #222; 
    color: white; 
} 

HTML

<main class="flex"> 
    <div class="card"> 
    <h2 class="card-title">Card1</h2> 
    <p>Stuff goes here, up to 500px wide</p> 
    </div> 

    <div class="card"> 
    <h2 class="card-title">Card2</h2> 
    <p>More stuff goes here up to 500px wide</p> 
    </div> 

    <div class="card"> 
    <div class="flex-column"> 
     <h2 class="card-title">Card3</h2> 
     <p>The problem card. This stuff needs to go below card one in its own card.</p> 
    </div> 
    </div> 

</main> 

如果我只用每页两张卡，他们并排显示正确的一面。当试图添加第三张时，它会在最后一张牌的旁边，而我不能在我的生活中找出如何让它落在下面。理想情况下，如果使用3张牌，前两张牌将并排居中，那么第三张牌的居中位置将低于前两张牌的组合宽度。如果使用第四张牌，我希望它基本上是一个正方形。非常感谢你的任何输入！

Answer 1

.wrap { 
 
    width: 500px; 
 
    background: gray; 
 
    margin: auto; 
 
    padding: 10px; 
 
    margin-bottom: 20px; 
 
} 
 

 
.row { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
    
 
.box { 
 
    padding: 20px; 
 
    background: yellow; 
 
    min-width: 75px; 
 
    flex-grow: 1; 
 
    margin: 2px; 
 
    text-align: center; 
 
}

<div class="wrap"> 
 

 
    <div class="row"> 
 
    <div class="box"> 
 
     Box One 
 
    </div> 
 
    <div class="box"> 
 
     Box Two 
 
    </div> 
 
    </div> 
 
    
 
    <div class="row"> 
 
    <div class="box"> 
 
     Box Three 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="wrap"> 
 

 
    <div class="row"> 
 
    <div class="box"> 
 
     Box One 
 
    </div> 
 
    <div class="box"> 
 
     Box Two 
 
    </div> 
 
    </div> 
 
    
 
    <div class="row"> 
 
    <div class="box"> 
 
     Box Three 
 
    </div> 
 
    <div class="box"> 
 
     Box Four 
 
    </div> 
 
    </div> 
 
</div>