Html 如果可以的话，我想让我的flex box进入2×2网格帮助

我想用flex box在我的页面中心创建一个4块的正方形（如网格），但它一直给我一个1长的正方形列我能做什么来改变它我尝试过调整大小，但没有效果，我不知道我的代码中是否有任何其他css使它出现故障，但任何输入都会有帮助，谢谢

CSS`@导入url(https://fonts.googleapis.com/css?family=Open+Sans:400800700300）；
@导入url(https://fonts.googleapis.com/css?family=Squada+一),；
身体{
/*背景色：rgb（28,18,63）*/
背景重复：无重复；
背景图像：url（“https://www.3d-wallpapers.info/wp-content/uploads/3D-Car-Wallpaper.jpg");
背景附件：固定；
}
.div标题{
背景图像：url（“http://hdwpro.com/wp-content/uploads/2017/09/Art-Metal-Wallpaper.jpg");
边框：2倍纯红；
高度：250px；
}
h2，
h1{
颜色：绿色；
}
formdiv先生{
边框：2倍纯红；
宽度：20%；
浮动：对；
}
氢{
保证金：20px自动；
颜色：rgb（151，1，1）；
字号：3.26em；
线高：1.5；
文本阴影：0 1PX0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3PX0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 B9B9，0 5PX0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3）bbb B B B，0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0),；
}
.sitename{
边框：2倍纯红；
宽度：40%；
高度：245px；
尺寸：2.23em；
浮动：对；
}
.集装箱{
颜色：rgb（255、255、255）；
填充：0px；
边框：1px红色实心；
宽度：100%；
高度：600px；
}
.项目{
/*颜色：红色；
文本对齐：居中；
保证金：5px；
背景：旧花边；
宽度：50%；；
宽度：40%；
证明内容：中心*/
宽度：40vw；
高度：20vw；
保证金：5px；
背景色：红色；
}
.hyper{
背景图像：url（“http://itsmyideas.com/wp-content/uploads/2013/02/Bugatti-Veyron-2013-2014-Model-picture-with-price-details-520x266.jpg");
背景重复：无重复；
高度：400px；
对象匹配：包含；
}
.运动{
背景图片：url（“C:/carwebsite/Images/musty2.jpg”）；
背景重复：无重复；
高度：400px；
}
.异国情调{
背景图片：url（“C:/carwebsite/Images/lamb32.jpg”）；
背景重复：无重复；
高度：400px；
}
.经典{
背景图片：url（“C:/carwebsite/Images/must5（1.jpg”）；
背景重复：无重复；
高度：400px；
}
.集装箱2{
证明内容：中心；
高度：65px；
背景色：rgb（10,7,2）；
填充顶部：0px；
宽度：100%；
}
.集装箱2{
证明内容：中心；
高度：65px；
背景色：rgb（10,7,2）；
填充顶部：0px；
宽度：100%；
}
.导航{
颜色：rgb（255、255、255）；
填充：15px；
保证金：5px；
背景：rgba（14,11,6,0）；
利润率：20px；
边界半径：5px；
列表样式：无；
文本对齐：居中；
填充底部：30px；
显示：内联；
弹性增长：初始；
}
iframe{
边框：1px纯红；
宽度：30%；
}
.youvideo{
保证金：20px自动；
宽度：100%；
边框：1px纯红；
证明内容：正确；
填充顶部：50px
}
.按钮{
颜色：绿色；
文本对齐：居中；
填充：.625em 1.25em；
背景：蓝紫罗兰；
边界半径：.35em
}
@介质（最大宽度：1025px）{
iframe{
宽度：250px；
}
.集装箱{
显示器：flex；
柔性流动：包裹；
高度：250px；
宽度：75%；
柔性包装：包装；
}
.项目{
弹性基准：0；
高度：150像素；
填充顶部：0px
}
}
css flexbox`.容器{
/*显示器：flex；
证明内容：中心；
身高：30；
柔性包装：包装；
保证金：20px自动；
*/
显示器：flex；
柔性包装：包装；
}
.项目{
颜色：红色；
文本对齐：居中；
填充：15px；
保证金：5px；
背景：旧花边；
宽度：25%；
证明内容：中心；
页边顶部：自动；
}
.集装箱2{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
}
.导航{
弹性基准：200px；
}
.youvideo{
显示器：flex；
}
.div标题{
显示器：flex；
}
.div标题{
显示器：flex；
}

登录
所有汽车
联盟

即将到来的比赛
显示
新闻
新版本

超级
超级
超级
超级

使用

显示：flex如下所示：到容器类

.container{
    display: flex;
}

使用
显示：flex如下所示：到容器类

.container{
    display: flex;
}

我认为你不需要flexbox来做这样的事情。类似于

<div class="container">
    <div class="container-center">
        <div class="hyper item"><a class="button">hyper</a></div>
        <div class="sport item"><a class="button">hyper</a></div>
        <div class="exotic item"><a class="button">hyper</a></div>
        <div class="classic item"><a class="button">hyper</a></div>
    </div>
</div>

.container-center{
    width:80%;
    margin:0 auto;
}

.item {
    width:50%;
    height:20vw;
    float:left;
}


超级
超级
超级
超级
·货柜中心{
宽度：80%；
保证金：0自动；
}
.项目{
宽度：50%；
高度：20vw；
浮动：左；
}

会让你离得很近。
我认为你不需要flexbox来做这样的事情。类似于

<div class="container">
    <div class="container-center">
        <div class="hyper item"><a class="button">hyper</a></div>
        <div class="sport item"><a class="button">hyper</a></div>
        <div class="exotic item"><a class="button">hyper</a></div>
        <div class="classic item"><a class="button">hyper</a></div>
    </div>
</div>

.container-center{
    width:80%;
    margin:0 auto;
}

.item {
    width:50%;
    height:20vw;
    float:left;
}


超级
超级
超级
超级
·货柜中心{
宽度：80%；
保证金：0自动；
}
.项目{
宽度：50%；
高度：20vw；
浮动：左；
}

会让你非常接近。
希望这就是你想要的


.main container{显示：flex；最小高度：400px；背景：红色；}
.内部第一项{flex:1；display:flex；flex direction:column；}
.inner square div{flex:1；border:1px solid#000；text align:center；}

1.
2.
3.
4.
希望这就是您想要的


.main container{显示：flex；最小高度：400px；背景：红色；}
.内部第一项{flex:1；display:flex；flex direction:column；}
.inner square div{flex:1；border:1px solid#000；text align:center；}

1.
2.
3.
4.
我如何将其设置为2x2EDIT：抱歉，只需说出你的.item css即可。让我试着把它修好。你需要什么？我怎么做