与flexbox相关的css未生效

这是我在这个网站上的第一篇文章，所以请原谅任何格式/礼仪问题等。我最近在TeamTreehouse上学习了flexbox，并决定制作一个项目来应用我的新知识。这个项目的灵感来自http://stylus-lang.com/.该项目(至少是其理论化的方式(起初在目标方面似乎很简单(

两列布局，其中一列占据视口的70%左右，而另一列占据30%的
第一列/主列将有自己的滚动条
第二列将只是一个列表，用作链接
使用flexbox使列具有响应性，并在较小的视口断点处使第二个列表列合并为单列布局，列表列位于顶部，用作具有自己的单独滚动条的标题(参见http://stylus-lang.com/)

/* ================================= 
Web Fonts
==================================== */
@font-face {}
/* ================================= 
Base Element Styles
==================================== */
* {
box-sizing: border-box;
}
body {
margin: 0;
height: 100vh;
display: border-box;
background-color: rgb(26, 26, 26);
}
h1,
h2,
p {
color: rgb(224, 169, 96);
font-family: Arvo;
rgb(224, 169, 96);
text-shadow: 0.125em 0.125em 0.25em #000000;
/* 2px 2px 4px*/
}
.logo-pic {
box-shadow: 10px 10px 5px grey;
}
.logo-text {
padding-bottom: 2em;
color: text-shadow: 0.125em 0.125em 0.25em #000000;
/* 2px 2px 4px*/
text-shadow: 0.125em 0.125em 0.25em #000000;
/* 2px 2px 4px*/
}
.logo-info {
text-shadow: 0.125em 0.125em 0.25em #000000;
/* 2px 2px 4px*/
}
.card {
background-color: aqua;
margin: 1em;
}
}
/* ================================= 
Base Layout Styles
==================================== */
/* ================================= 
Media Queries
==================================== */
@media (min-width: 800px) {
.wrapper {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}

.col {
flex: 1;
}
}
@media (min-width: 1025px) {}

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Marksman Mains</title>
<link rel="stylesheet" href="Css/style.css">
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div class="primary col ">
<div class="logo-banner">
<img src="Css/Adcs/Marksman_icon.png" alt="" class="logo-pic">
<h1 class="logo-text">Marksman Mains </h1>
<h2 class="logo-info"> A Quick Source For Every Marksman's All in One Guide including Up-To-Date item builds, Runes, and laning/playstyle advice. </h2>
</div>
<div class="card">
<h1> Test Card</h1>
</div>
<div class="card">
<h1> Test Card</h1>
</div>
<div class="card">
<h1> Test Card</h1>
</div>
<div class="card">
<h1>Test Card</h1>
</div>
</div>
<!--Primary-->
<div class="secondary col ">
<section>
<aside>
<ul class="nav">
<li>Ashe</li>
<li>Caitlyn</li>
<li>Corki</li>
<li>Draven</li>
<li>Ezreal</li>
<li>Jhin</li>
<li>Jinx</li>
<li>Kai'Sa</li>
<li>Kalista</li>
<li>Kog'Maw</li>
<li>Lucian</li>
<li>Miss Fortune</li>
<li>Sivir</li>
<li>Tristana</li>
<li>Twitch</li>
<li>Varus</li>
<li>Vayne</li>
<li>Xayah</li>
</ul>
</aside>
</section>
</div>
<!-- Secondary -->
</div>
</body>
</html>

到目前为止的问题是，我无法使用flex显示任何内容
我对flexbox不是很熟悉，但到目前为止，我一直在努力让列表项列和主列并排显示，目前我唯一要做的就是当容器显示为flex时，defalt应该将方向设置为row，但这似乎没有发生。

如有任何建议，我们将不胜感激，谢谢。

在媒体查询之前有一个额外的{，并且也正确更新了媒体查询。

@media (min-width: 800px) {
.wrapper {
display: flex;
flex-direction: row;
}
.col {
width: 50%;
}
}

* {
box-sizing: border-box;
}
body {
margin: 0;
height: 100vh;
display: border-box;
background-color: rgb(26, 26, 26);
}
h1,
h2,
p {
color: rgb(224, 169, 96);
font-family: Arvo;
text-shadow: 0.125em 0.125em 0.25em #000000;
}
.logo-pic {
box-shadow: 10px 10px 5px grey;
}
.logo-text {
padding-bottom: 2em;
color: text-shadow: 0.125em 0.125em 0.25em #000000;
/* 2px 2px 4px*/
text-shadow: 0.125em 0.125em 0.25em #000000;
/* 2px 2px 4px*/
}
.logo-info {
text-shadow: 0.125em 0.125em 0.25em #000000;
/* 2px 2px 4px*/
}
.card {
background-color: aqua;
margin: 1em;
}
@media (min-width: 800px) {
.wrapper {
display: flex;
flex-direction: row;
}
.col {
width: 50%;
}
}

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Marksman Mains</title>
<link rel="stylesheet" href="Css/style.css">
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div class="primary col ">
<div class="logo-banner">
<img src="Css/Adcs/Marksman_icon.png" alt="" class="logo-pic">
<h1 class="logo-text">Marksman Mains </h1>
<h2 class="logo-info"> A Quick Source For Every Marksman's All in One Guide including Up-To-Date item builds, Runes, and laning/playstyle advice. </h2>
</div>
<div class="card">
<h1> Test Card</h1>
</div>
<div class="card">
<h1> Test Card</h1>
</div>
<div class="card">
<h1> Test Card</h1>
</div>
<div class="card">
<h1>Test Card</h1>
</div>

</div>
<!--Primary-->
<div class="secondary col ">
<section>
<aside>
<ul class="nav">
<li>Ashe</li>
<li>Caitlyn</li>
<li>Corki</li>
<li>Draven</li>
<li>Ezreal</li>
<li>Jhin</li>
<li>Jinx</li>
<li>Kai'Sa</li>
<li>Kalista</li>
<li>Kog'Maw</li>
<li>Lucian</li>
<li>Miss Fortune</li>
<li>Sivir</li>
<li>Tristana</li>
<li>Twitch</li>
<li>Varus</li>
<li>Vayne</li>
<li>Xayah</li>
</ul>
</aside>
</section>
</div>
<!-- Secondary -->
</div>
</body>
</html>

相关内容

最新更新

热门标签：