与flexbox相关的css未生效
与flexbox相关的css未生效
提问于 2018-07-20 01:59:09
这是我在这个网站上的第一篇帖子，所以请原谅任何格式/礼仪问题等。我最近在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不是很熟悉，但是到目前为止我一直在尝试让list items列和main列并排显示，我现在唯一要做的就是当一个容器显示为flex时，defualt应该将方向设置为row，但这似乎并没有发生。
我们将非常感谢您的建议，谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-20 02:22:03
在媒体查询之前有一个额外的{，并且也正确地更新了媒体查询。
@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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51429141
复制相关文章
相似问题
腾讯云开发者
