时间戳

首页 > 解决方案 > 了解 CSS 网格和 flexbox

html - 了解 CSS 网格和 flexbox

问题描述

https://codepen.io/masm/pen/MxWBEB

您好，我正在尝试使用 CSS Grid 和 Flexbox 创建一个基本的响应式布局。但是，我遇到了标题的一些问题。我不完全理解为什么徽标和导航没有跨越 960px 宽度。

HTML：

<div id="hd">
  <div class="container">
    <div class"ct">
      <div class="logo">
        Logo
      </div>
      <div class="nav">
        <a href="#">one</a>
        <a href="#">two</a>
        <a href="#">three</a>
        <a href="#">four</a>
        <a href="#">five</a>
      </div>
    </div>
  </div>

CSS：

.container { 
  width: 960px; 
  margin: 0 auto; 
  display: grid;
  grid-template-columns: 2fr 1fr; 
  grid-template-areas: "top top"
    "main side"
}

.ct { 
  grid-area: top;
}

.logo { 
  background: #ddd;
}

.nav { 
  background: #ddf; 
}

其次，我正在努力使徽标和导航并排。我的想法是将 .ct 设置为 display:flex，但它不起作用。

.ct { 
  grid-area: top;
  display: flex; 
  flex-direction: column; 
}

最后，我希望标题的背景颜色跨越页面的整个宽度，并且内容（徽标、导航、主要、侧面）占用的宽度不超过 960 像素，这就是我在两者之间添加一个容器的原因#hd 和 #main div。我的问题是，这是一个好方法吗？

标签： htmlcssflexboxcss-grid

解决方案

对于并排，您需要将它们按行放置，并在中心垂直对齐 div 的内容，同时为其提供一些预定义的高度：

.ct{
  height: 80px;
  display: flex;
  justify-content: flex-start;
  align-items:center;
  flex-flow: row;
}

推荐阅读