我想让我的伸缩框进入2 x 2网格帮助中，如果可以的话

时间：2018-10-08 06:31:21

标签： html css flexbox

我想使用flex box在页面中心创建一个由4个方块组成的正方形（如网格），但所有这些都使我得到了一个长的正方形列，我该怎么做才能更改它，但是我尝试了调整大小，但是不起作用，我不知道我的代码中是否还有其他CSS使它出现故障，但是任何输入都会有所帮助

CSS `@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800,700,300);
@import url(https://fonts.googleapis.com/css?family=Squada+One);
Body {
  /*background-color:rgb(28, 18, 63);*/
  background-repeat: no-repeat;
  background-image: url("https://www.3d-wallpapers.info/wp-content/uploads/3D-Car-Wallpaper.jpg");
  background-attachment: fixed;
}

.div-header {
  background-image: url("http://hdwpro.com/wp-content/uploads/2017/09/Art-Metal-Wallpaper.jpg");
  border: 2px solid red;
  height: 250px;
}

h2,
h1 {
  color: green;
}

.formdiv {
  border: 2px solid red;
  width: 20%;
  float: right;
}

H2 {
  margin: 20px auto;
  color: rgb(151, 1, 1);
  font-size: 3.26em;
  line-height: 1.5;
  text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15);
}

.sitename {
  border: 2px solid red;
  width: 40%;
  height: 245px;
  size: 2.23em;
  float: right;
}

.container {
  color: rgb(255, 255, 255);
  padding: 0px;
  border: 1px red solid;
  width: 100%;
  height: 600px;
}

.item {
  /*color:red;
        text-align: center;
        
        margin:5px;
        background: oldlace;
        width:50%;;
        width: 40%;
        justify-content: center;*/
  width: 40vw;
  height: 20vw;
  margin: 5px;
  background-color: red;
}

.hyper {
  background-image: url("http://itsmyideas.com/wp-content/uploads/2013/02/Bugatti-Veyron-2013-2014-Model-picture-with-price-details-520x266.jpg");
  background-repeat: no-repeat;
  height: 400px;
  object-fit: contain;
}

.sport {
  background-image: url("C:/carwebsite/Images/mustty2.jpg");
  background-repeat: no-repeat;
  height: 400px;
}

.exotic {
  background-image: url("C:/carwebsite/Images/lamb32.jpg");
  background-repeat: no-repeat;
  height: 400px;
}

.classic {
  background-image: url("C:/carwebsite/Images/must5 (1).jpg");
  background-repeat: no-repeat;
  height: 400px;
}

.container2 {
  justify-content: center;
  height: 65px;
  background-color: rgb(10, 7, 2);
  padding-top: 0px;
  width: 100%;
}

.container2 {
  justify-content: center;
  height: 65px;
  background-color: rgb(10, 7, 2);
  padding-top: 0px;
  width: 100%;
}

.nav {
  color: rgb(255, 255, 255);
  padding: 15px;
  margin: 5px;
  background: rgba(14, 11, 6, 0);
  margin: 20px;
  border-radius: 5px;
  list-style: none;
  text-align: center;
  padding-bottom: 30px;
  display: inline;
  flex-grow: initial;
}

iframe {
  border: 1px solid red;
  width: 30%;
}

.youvideo {
  margin: 20px auto;
  width: 100%;
  border: 1px solid red;
  justify-content: right;
  padding-top: 50px
}

.button {
  color: green;
  text-align: center;
  padding: .625em 1.25em;
  background: blueviolet;
  border-radius: .35em
}

@media (max-width: 1025px) {
  iframe {
    width: 250px;
  }
  .container {
    display: flex;
    flex-flow: wrap;
    height: 250px;
    width: 75%;
    flex-wrap: wrap;
  }
  .item {
    flex-basis: 0;
    height: 150px;
    padding-top: 0px
  }
}

css flexbox `.container {
  /*display: flex;
        justify-content: center;
        height: 30;
        flex-wrap: wrap;
        margin: 20px auto;
        */
  display: flex;
  flex-wrap: wrap;
}

.item {
  color: red;
  text-align: center;
  padding: 15px;
  margin: 5px;
  background: oldlace;
  width: 25%;
  justify-content: center;
  margin-top: auto;
}

.container2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.nav {
  flex-basis: 200px;
}

.youvideo {
  display: flex;
}

.div-header {
  display: flex;
}

.div-header {
  display: flex;
}
<!DOCTYPE html>

<HTML>

<body>

  <link rel="stylesheet" href="C:\workbenchPrac\prac.css">
  <link rel="stylesheet" href="C:\carwebsite\flexobox.css">


  <div class="div-header">
    <header class="head-image">
      <div class="formdiv">
        <form action="index.html" method="POST">
          <h1>LOG-IN</h1>
          <input type="email" id="mail" name="user-email">
          <input type="password" id="password" name="user-password">


      </div>
      <div class="sitename">
        <h2>Allmotors<br>alliance</h2>
      </div>


  </div>


  </header>
  </div>


  <div class="container2">
    <ul>
      <li class="nav">upcoming races</li>
      <li class="nav">shows</li>
      <li class="nav">News</li>
      <li class="nav">new Releases</li>
    </ul>
  </div>
  <div class="youvideo">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/2UKdf0ot0wA?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>


  <div class="container">
    <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>


</body>

</HTML>

3 个答案:

答案 0 :(得分：2)

希望这就是您想要的。 

.main-container{display:flex;  min-height:400px; background:red; }
.inner-first-items{flex:1; display:flex; flex-direction:column;   }
.inner-square-div{flex:1;  border:1px solid #000; text-align:center; }
<div class="main-container">

<div class="inner-first-items">
<div class="inner-square-div">1</div>
<div class="inner-square-div">2</div>


</div>



<div class="inner-first-items">

<div class="inner-square-div">3</div>
<div class="inner-square-div">4</div>


</div>







<div>

答案 1 :(得分：0)

使用onResume如下所示：到容器类

display: flex;

答案 2 :(得分：0)

我认为您不需要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;
}

会让你很近。

相关问题
最新问题