css 使用Flexbox网格
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 使用Flexbox网格相关的知识，希望对你有一定的参考价值。
/*<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Grid Layout & Flexbox</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bree+Serif|Raleway" rel="stylesheet">
<link href="css/page.css" rel="stylesheet">
<link href="css/layout.css" rel="stylesheet">
</head>
<body>
<div class="main-content">
<div class="card">
<i class="material-icons icn-ent">videocam</i>
<h1>Entertainment</h1>
<p>Hundreds of VR games and films have been released already. <a href="#">Oculus Story Studio</a> is one example of a company producing VR films.</p>
<a class="btn" href="#">Learn more</a>
</div>
<div class="card">
<i class="material-icons icn-arch">account_balance</i>
<h1>Architectural Visualization</h1>
<p>These experiences allow you to explore and interact with buildings and products in virtual reality. <a href="#">IKEA VR</a> is a popular example.</p>
<a class="btn" href="#">Learn more</a>
</div>
<div class="card">
<i class="material-icons icn-edu">school</i>
<h1>Education</h1>
<p>VR allows students to visit other places and other times. For instance, the BBC produced a <a href="#">360° video</a> that allows users to see the scale of dinosaurs in stereoscopic 3D.</p>
<a class="btn" href="#">Learn more</a>
</div>
<div class="card">
<i class="material-icons icn-sim">flight_takeoff</i>
<h1>Simulation & Training </h1>
<p>In simulation and training, you can safely train for dangerous situations or hazardous environments.</p>
<a class="btn" href="#">Learn more</a>
</div>
<div class="card">
<i class="material-icons icn-soc">people</i>
<h1>Social Networking</h1>
<p>VR is finding its way into teleconferencing and social media. At the <a href="#">ethic conference in 2016</a>, Facebook demonstrated what it might look like in VR.</p>
<a class="btn" href="#">Learn more</a>
</div>
<div class="card">
<i class="material-icons icn-games">videogame_asset</i>
<h1>Games</h1>
<p>VR games let users experience a 3D environment, creating suspension of disbelief, which makes users experience the environment as real.</p>
<a class="btn" href="#">Learn more</a>
</div>
</div>
</body>
</html> */
/* =====================================
Page Styles
======================================== */
* {
box-sizing: border-box;
}
body {
font-size: 1rem;
line-height: 1.5;
font-family: 'Raleway', sans-serif;
text-align: center;
margin: 0;
}
a {
color: #278da4;
text-decoration: none;
}
h1 {
font-family: 'Bree Serif', serif;
}
p {
margin-bottom: 1.25em;
}
.main-content {
margin: 2em auto;
}
.card {
padding: 1.5em 1em;
border: 1px solid #e1e1e1;
border-radius: 0.25em;
}
.card h1 {
color: #278da4;
margin: 0.35em 0 0;
line-height: 1.25;
}
.btn {
font-size: 0.85em;
color: #fff;
font-weight: bold;
text-transform: uppercase;
padding: 0.75em 1.5em;
background-color: #278da4;
border-radius: 0.35em;
display: inline-block;
}
.btn:hover {
background-color: rgba(39, 141, 164, 0.8);
}
.material-icons {
color: rgba(39, 141, 164, 0.8);
font-size: 2.1em;
}
/* =====================================
Grid & Flexbox Layout
======================================== */
.main-content {
width: 95%;
max-width: 1000px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
grid-gap: 20px;
}
.card {
display: flex;
flex-direction: column;
}
.btn {
margin-top: auto;
}
以上是关于css 使用Flexbox网格的主要内容，如果未能解决你的问题，请参考以下文章