【发布时间】：2022-01-26 01:10:25
【问题描述】：
新手尝试学习 flex。根据谷歌检查工具，我正试图在所有设备上响应一些刚刚在其他设备上丢失的设备。遵循我看到的一篇帖子的建议，它让我走到了这一步。附件是我的html和css。我尝试了不同的 flex x x x 组合，但到目前为止，在我的笔记本电脑屏幕上看起来都没有运气。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="header">
<h1>Sci-Fi Blog</h1>
<h3>dedicated to the Star Trek series</h3>
<div class="menu">
<ul>
<li>About</li>
<li>Resources</li>
<li>Other Sci-Fi series</li>
</ul>
</div>
</div>
<div class="container1">
<div class="row1">
<div class="STtos">
<h2>Star Trek TOS</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSTPdHkIFqZgTABvQtjcCnKr6mbWNfKBVDRRw&usqp=CAU" alt = "Pic of space ship">
<p>Turpis egestas pretium aenean pharetra magna. Tristique risus nec feugiat in fermentum posuere urna. In nibh mauris cursus mattis molestie a. Venenatis urna cursus eget nunc scelerisque viverra mauris in aliquam. Sed pulvinar proin gravida hendrerit lectus a. In dictum non consectetur a erat nam. </p><a href="#"> <button>Read More</button></a> <a href="#"><button>Comment</button></a>
</div> <!--div STtos-->
<div class="STTNG">
<h2>Star Trek TNG</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQueIPqKDTgGH9_SaYzT7u9cfpvKs2P48l5dg&usqp=CAU" alt="pic of space ship">
<p>Mauris ultrices eros in cursus. At imperdiet dui accumsan sit amet nulla facilisi. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Sem integer vitae justo eget magna fermentum iaculis eu non. Faucibus vitae aliquet nec ullamcorper. Convallis aenean et tortor at risus viverra adipiscing at in. Fermentum dui faucibus in ornare quam viverra orci. Sagittis id consectetur purus ut faucibus pulvinar elementum integer. </p><a href="#"><button>Read More</button></a> <a href="#"><button>Comment</button></a>
</div> <!--end of STTNG-->
<div class="DS9">
<h2>Deep Space Nine</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRKvwoJTvGIl2Nq2RzDKkf7OrgfVoHwrXP82A&usqp=CAU" alt="pic">
<p>Mauris ultrices eros in cursus. At imperdiet dui accumsan sit amet nulla facilisi. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Sem integer vitae justo eget magna fermentum iaculis eu non. Faucibus vitae aliquet nec ullamcorper. Convallis aenean et tortor at risus viverra adipiscing at in. Fermentum dui faucibus in ornare quam viverra orci. Sagittis id consectetur purus ut faucibus pulvinar elementum integer. </p><a href="#"><button>Read More</button></a> <a href="#"><button>Comment</button></a>
</div> <!--DS9 -->
</div> <!--row1 -->
</div> <!--container1-->
<div class="container2">
<div class="row2">
<div class="StarTrekTAS">
<h2>Star Trek TAS</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwdlJfrFrcj7KJRdTADDtsfjGa0SQweeu0fQ&usqp=CAU" width="259" height="194" alt="pic">
<p>Mauris ultrices eros in cursus. At imperdiet dui accumsan sit amet nulla facilisi. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Sem integer vitae justo eget magna fermentum iaculis eu non. Faucibus vitae aliquet nec ullamcorper. Convallis aenean et tortor at risus viverra adipiscing at in. Fermentum dui faucibus in ornare quam viverra orci. Sagittis id consectetur purus ut faucibus pulvinar elementum integer. </p><a href="#"><button>Read More</button></a> <a href="#"><button>Comment</button></a>
</div> <!--end of TAS-->
<div class="voyager">
<h2>Voyager</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRiV6QTXDR7lD9uvx8S-IuTClS-CV6COgSh1g&usqp=CAU" width="259" height="194" alt="pic">
<p>Mauris ultrices eros in cursus. At imperdiet dui accumsan sit amet nulla facilisi. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Sem integer vitae justo eget magna fermentum iaculis eu non. Faucibus vitae aliquet nec ullamcorper. Convallis aenean et tortor at risus viverra adipiscing at in. Fermentum dui faucibus in ornare quam viverra orci. Sagittis id consectetur purus ut faucibus pulvinar elementum integer. </p><a href="#"><button>Read More</button></a> <a href="#"><button>Comment</button></a>
</div> <!--end of Voyager-->
<div class="Enterprise">
<h2>Enterprise</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTa4Iz2D0_InBOZg4Wi_PWAT-1lEqxI0AExPg&usqp=CAU" width="259" height="194" alt="pic">
<p>Turpis egestas pretium aenean pharetra magna. Tristique risus nec feugiat in fermentum posuere urna. In nibh mauris cursus mattis molestie a. Venenatis urna cursus eget nunc scelerisque viverra mauris in aliquam. Sed pulvinar proin gravida hendrerit lectus a. In dictum non consectetur a erat nam. </p><a href="#"><button>Read More</button></a> <a href="#"><button>Comment</button></a>
</div>
</div> <!--end of row2-->
</div> <!--end of container2-->
</body>
</html>
body {
margin: 0;
padding:0;
box-sizing:border-box;
}
.header {
background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQSzBDemswC2Gg3mbDR7t8mQ53jByPChDtA5w&usqp=CAU');
text-align:center;
background-size:no repeat;
background-size:cover;
height:310px;
color:white;
margin-bottom: 150px;
margin-left: 5px;
margin-right:5px;
}
.header h1 {
margin:0;
}
li {
list-style-type:none;
display:inline-block;
padding: 10px;
}
.menu ul {
text-align:center;
display:inline-block;
padding: 0px;
background: rgba(197, 228, 183, 0.8);
}
.menu {
display: inline-block;
margin-left: 10px;
}
p a {
display:inline;
}
@media screen and (min-width:640px) {
.row1 {
display:flex;
justify-content:space-evenly;
grid-gap:10px;
}
.STtos {
flex: 0;
}
.STTNG {
flex:0;
}
.DS9 {
flex:0;
}
.row2 {
display:flex;
justify-content:space-evenly;
grid-gap:10px;
}
.StarTrekTAS {
flex: 0 0;
}
.voyager {
flex:0 0;
}
.Enterprise {
flex:0 0;
}
}
【问题讨论】：
-
欢迎来到 Stack Overflow！请澄清您的具体问题或添加其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。