Question

我遇到了一些CSS的问题，当屏幕变得不那么宽，然后1024px时，我想要堆叠3个新闻列。然而，随着代码，我现在已经消失了。奇怪的是，我有两个需要堆叠的行，一个叫.row正在运行，另一个叫.newsrow无法正常工作。

CSS：

/*Neccasary for alignment for some reason, have to solve this issue later*/
* {
    box-sizing: border-box;
}
/*Style van overall body*/
body {
    margin: 0;
    background-color: #000;
    color: white;
}
/*Style voor h2 tekst*/
h2 {

}

/* Style the header */
.header {
    background-color: #222222;
    padding: 50px;
    text-align: center;
}

/* Container for flexboxes */
.row {
    display: -webkit-flex;
    display: flex;
}

.contentrow {
    display: -webkit-flex;
    display: flex;
}

/* 3 middelse columns (Grootte wordt bepaald in html doc (Standaard: Flex-Grow: 4;)) */
.column {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 0px;
    text-align: center;
}

.middlemenu {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 0px;
    height: 50px;
    text-align: center; 
    margin: 0px;
}

/* Container for newsboxes */
.newsrow {
    display: -webkit-flex;
    display: flex;
}

.newsbox {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-top: 30px;
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 10px;
    min-width: 200px;
    height: 225px;
    text-align: center;
    background-color: #999999;
    }

/* Style van de footer. */
.footer {
    background-color: #222222;
    padding: 10px;
    text-align: center;
}

/* Zorgt ervoor dat bij het krimpen de flexboxes stapelen i.p.v. naast elkaar blijven staan.*/
@media (max-width: 1024px) {
    .row {
      -webkit-flex-direction: column;
      flex-direction: column;
      display: block;
    }

    .newsrow {
      -webkit-flex-direction: column;
      flex-direction: column;
      display: flex;    
    }

}

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="header">
    <h2>234234</h2>
</div>

<div class="row">
    <div class="column" style="background-color:#444; padding: 10px;">1337 WHEH</div>
    <div class="column" style="background-color:#555; flex-grow: 4;">
        <div class="middlemenu" style="background-color:#777">
            <!--Hier komt menu content-->
        </div>
        <div class="newsrow">
            <div class="newsbox"></div>
            <div class="newsbox"></div>
            <div class="newsbox"></div>
        </div>
    </div>
    <div class="column" style="background-color:#666; padding: 10px;">1337 WHEEEH</div>
</div>
<div class="footer">
  <p>Footer</p>
</div>

</body>
</html>

问题：当我将屏幕缩小时，.row堆叠中的所有内容都相互叠加而不是并排。但是，.newsrow中的所有内容一旦达到1023px的宽度就会消失。

请帮我解决这个问题。

Answer 1

删除height

上的.column媒体资源

fiddle

* {
  box-sizing: border-box;
}


/*Style van overall body*/

body {
  margin: 0;
  background-color: #000;
  color: white;
}


/*Style voor h2 tekst*/

h2 {}


/* Style the header */

.header {
  background-color: #222222;
  padding: 50px;
  text-align: center;
}


/* Container for flexboxes */

.row {
  display: -webkit-flex;
  display: flex;
}

.contentrow {
  display: -webkit-flex;
  display: flex;
}


/* 3 middelse columns (Grootte wordt bepaald in html doc (Standaard: Flex-Grow: 4;)) */

.column {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 0px;
  /* remove this */
  /* height: 300px; */
  text-align: center;
}

.middlemenu {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 0px;
  height: 50px;
  text-align: center;
  margin: 0px;
}


/* Container for newsboxes */

.newsrow {
  display: -webkit-flex;
  display: flex;
}

.newsbox {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin-top: 30px;
  margin-left: 30px;
  margin-right: 30px;
  margin-bottom: 10px;
  min-width: 200px;
  height: 225px;
  text-align: center;
  background-color: #999999;
}


/* Style van de footer. */

.footer {
  background-color: #222222;
  padding: 10px;
  text-align: center;
}


/* Zorgt ervoor dat bij het krimpen de flexboxes stapelen i.p.v. naast elkaar blijven staan.*/

@media (max-width: 1024px) {
  .row {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  .newsrow {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}

<div class="header">
  <h2>234234</h2>
</div>

<div class="row">
  <div class="column" style="background-color:#444; padding: 10px;">1337 WHEH</div>
  <div class="column" style="background-color:#555; flex-grow: 4;">
    <div class="middlemenu" style="background-color:#777">
      <!--Hier komt menu content-->
    </div>
    <div class="newsrow">
      <div class="newsbox"></div>
      <div class="newsbox"></div>
      <div class="newsbox"></div>
    </div>
  </div>
  <div class="column" style="background-color:#666; padding: 10px;">1337 WHEEEH</div>
</div>
<div class="footer">
  <p>Footer</p>
</div>

Answer 2

您的问题是您正在设置列的高度，请查看此示例

/*Neccasary for alignment for some reason, have to solve this issue later*/
* {
    box-sizing: border-box;
}
.row {
    display: -webkit-flex;
    display: flex;
}
.contentrow {
    display: -webkit-flex;
    display: flex;
}

/* 3 middelse columns (Grootte wordt bepaald in html doc (Standaard: Flex-Grow: 4;)) */
.column {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 0px;
    text-align: center;
}

.middlemenu {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 0px;
    height: 50px;
    text-align: center; 
    margin: 0px;
}

/* Container for newsboxes */
.newsrow {
    display: -webkit-flex;
    display: flex;
}

.newsbox {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-top: 30px;
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 10px;
    min-width: 200px;
    text-align: center;
    background-color: yellow;
    }

/* Zorgt ervoor dat bij het krimpen de flexboxes stapelen i.p.v. naast elkaar blijven staan.*/
@media (max-width: 1024px) {
    .row {
      -webkit-flex-direction: column;
      flex-direction: column;
    }

    .newsrow {
      -webkit-flex-direction: column;
      flex-direction: column;  
    }

}

<div class="row">
    <div class="column" style="background-color:red; padding: 10px;">1337 WHEH</div>
    <div class="column" style="background-color:blue; flex-grow: 4;">
        <div class="middlemenu" style="background-color:orange">
            <!--Hier komt menu content-->
        </div>
        <div class="newsrow">
            <div class="newsbox">lIn velit voluptate </div>
            <div class="newsbox">asa<div>
            <div class="newsbox">asdas</div>
        </div>
    </div>
    <div class="column" style="background-color:green; padding: 10px;">112389127389721 WHEEEH</div>
</div>

希望有所帮助

Answer 3

试试这个：

@media (max-width: 1024px) {
  .newsrow {
   display:block;
  }
  .newsbox{
    display:flex;
  }
  .column {
  height:auto;
  }

}

https://jsfiddle.net/n3e5qksh/1/

Answer 4

您应该删除样式表中的.column。如果您想让这个网站更加平滑，您可以添加更多媒体查询。我个人这样使用它们：

if( (typeof $(this).attr("noAddedSugar") != "undefined") || (typeof $(this).attr("vegan") != "undefined") || (typeof $(this).attr("glutenfree") != "undefined")  )

Answer 5

.column高度确实在删除后解决了问题。一旦我输入了一些信息，这些方框就会起作用。

CSS Flexbox未堆叠

5 个答案: