【问题标题】：CSS/HTML - Flexbox - Center responsive elementsCSS/HTML - Flexbox - 中心响应元素
【发布时间】：2020-08-17 00:56:45
【问题描述】：

我正在尝试实现响应式页面。我已经设法得到以下结果，但我希望所有框（logo|links|ic|breadcrumb）都是他们父母的全高/全宽。这些框也应该完全填满可用空间。

小提琴链接

min-height : https://jsfiddle.net/sxr3eq84/142/
与align-items: stretch 父母：https://jsfiddle.net/ycsmo8fx/15/

我尝试过的

使用min-height 属性从标题中强制<nav><a/><nav> 占用完整空间，但它破坏了Flexbox align-items: center; 属性。

期望的输出

我所有的 Flexbox 子项看起来都像左上角的蓝色框，而不会破坏 align-items: center; 属性。
标题中的所有<nav><a/></nav> 都垂直和水平居中，同时占用整个可用空间。
面包屑项目在垂直和水平方向居中，同时占用整个可用空间。

html, body { height: 100%; }
body {
  margin: 0;
  overflow-wrap: break-work;
  }

.root {
  max-width: 1200px;
  height: 100%;
  margin: auto;
}

.header {
  /* FLEX */
  display: flex;
  align-items: center;
  
  /* OTHERS PROPS */
  height: 80px;
  background-color: yellow;
  text-align: center;
  
  /* set a solid border inside the header and not on its edge */
  box-sizing: border-box;
  border-bottom: 3px solid black;
}

.header-child-1 {
  /* FLEX */
  flex: 3;
  
  /* OTHERS PROPS */
  min-height: 80px; /* ERROR : using min-height property breaks align-items */
  background-color: blue;
}

.header-child-2 {
  /* FLEX */
  flex: 5;
  
  /* OTHERS PROPS */
  background-color: white;
}

.header-child-3 {
  /* FLEX */
  flex: 3;
  
  /* OTHERS PROPS */
  background-color: red;
}

.main {
  /* FLEX */
  display: flex;
  align-items: stretch;
  flex-direction: column;
  
  /* OTHERS PROPS */
  height: calc(100vh - 80px);
  background-color: green;
}

.main-header {
  /* FLEX */
  flex: 1;
  
  /* OTHERS PROPS */
  text-align: center;
  min-height: 40px;
  max-height: 40px;
  background-color: pink;
}

.main-main {
  /* FLEX */
  flex: 1;
  
  /* REMOVE THE GLOBAL PAGE SCROLLBAR, FLEXBOX ADD IT AUTOMATICALLY TO THAT HTML ELEMENT */
  overflow: auto;
  
  /* OTHERS PROPS */
  text-align: justify;
  background-color: purple;
}

<!DOCTYPE html>
<html>
  <body>
    <div class='root'>
      <header class='header'>
        <nav class='header-child-1'>
          <a>Logo</a>
        </nav>
        <nav class='header-child-2'>
          <a>link1</a>
          <a>link2</a>
          <a>link3</a>
        </nav>
        <nav class='header-child-3'>
          <a>ic1</a>
          <a>ic2</a>
          <a>ic3</a>
        </nav>
      </header>

      <main class='main'>
        <header class='main-header'>
          <a>Breadcrumb 1</a>
          <a>Breadcrumb 2</a>
        </header>

        <main class='main-main'>
        content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
        </main>
      </main>
    </div>
  </body>
</html>

【问题讨论】：

您到底希望您的代码做什么？如果您不告诉我们问题是什么，我们将无法帮助您解决问题:)
您从最后一段“期望的输出”中理解了什么，以便我可以更准确地编辑我的问题？ :)
您的示例中的选项似乎已经居中并填充了空间，那么您要更改的具体是什么？例如，容器在大屏幕上没有填满屏幕的问题 - 你想使用这个可用空间吗？还是希望它们在分配的空间中均匀分布？
白色和红色框不填充垂直空间。事实上，我想将它们均匀地分布在分配的空间中。
你完全正确。我已经编辑了我的消息，谢谢:)

标签： html css flexbox

【解决方案1】：

.header{
align-items: stretch;
}

.header-child-1, .header-child-2, .header-child-3{
display: flex;
align-items: center;
justify-content: center;
//remove min-height from .header-child-1
}
    
.header-child-2{
display: flex;
}

.header-child-2 a{
width: 33.333%;
}

.main-header{
display: flex;
align-items: center;
}

.main-header a{
width: 50%;
}

【讨论】：

不是我要找的。span>
在纸上或图片上划出您要查找的内容。
两个小提琴链接的混合：内容居中的全尺寸框（即链接）
像魅力一样工作！但是，它使所有 header-child-x 同时成为容器和项目。这是一个好习惯吗？

【解决方案2】：

对所有需要水平和垂直居中对齐的包装器尝试 display:flex。

html, body { height: 100%; }
body {
  margin: 0;
  overflow-wrap: break-work;
  }

.root {
  max-width: 1200px;
  height: 100%;
  margin: auto;
}

.header {
  /* FLEX */
  display: flex;
  align-items: center;
  
  /* OTHERS PROPS */
  height: 80px;
  background-color: yellow;
  text-align: center;
  
  /* set a solid border inside the header and not on its edge */
  box-sizing: border-box;
  border-bottom: 3px solid black;
}

.header-child-1 {
  /* FLEX */
  display: flex;
  flex:3;
  justify-content: center;
  align-items: center;
  
  /* OTHERS PROPS */
  min-height: 80px; /* ERROR : using min-height property breaks align-items */
  background-color: blue;
}

.header-child-2 {
  /* FLEX */
  flex: 5;
  
  /* OTHERS PROPS */
  background-color: white;
}

.header-child-3 {
  /* FLEX */
  flex: 3;
  
  /* OTHERS PROPS */
  background-color: red;
}

.main {
  /* FLEX */
  display: flex;
  align-items: stretch;
  flex-direction: column;
  
  /* OTHERS PROPS */
  height: calc(100vh - 80px);
  background-color: green;
}

.main-header {
  /* FLEX */
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* OTHERS PROPS */
  text-align: center;
  min-height: 40px;
  max-height: 40px;
  background-color: pink;
}

.main-main {
  /* FLEX */
  flex: 1;
  
  /* REMOVE THE GLOBAL PAGE SCROLLBAR, FLEXBOX ADD IT AUTOMATICALLY TO THAT HTML ELEMENT */
  overflow: auto;
  
  /* OTHERS PROPS */
  text-align: justify;
  background-color: purple;
  color: white;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div class="root">
      <header class="header">
        <nav class="header-child-1"><a>Logo</a></nav>
        <nav class="header-child-2"><a>link1</a> <a>link2</a> <a>link3</a></nav>
        <nav class="header-child-3"><a>ic1</a> <a>ic2</a> <a>ic3</a></nav>
      </header>

      <main class="main">
        <header class="main-header">
          <a>Breadcrumb 1</a> <a>Breadcrumb 2</a>
        </header>

        <main class="main-main">
          content content content content content content content content
          content content content content content content content content
          content content content content content content content content
          content content content content content content content content
          content content content content content content content content
          content content content content content content content content
          content content content content content content content content
          content content content content content content content content
          content content content content content content content content
          content content content content content content content content
          content content content content content content content content
          content content content content content content content content
          content content content content content content content content
          content content content content content content content content
          content content content content content content content content
          content content content content content content content content
          content content content content content content content content
          content content content content content content content content
          content content content content content content content content
          content content content content content content content content
          content content content content content content content content
          content content content content content content content content
          content content content content content content content content
          content content content content content content content content
          content content content content content content content content
          content content content content content content content content
          content content content content content content content content
          content content content content content content content content
          content content content content content content content content
          content content content content content content content content
          content content content content content content content content
          content content content content content content content content
          content content content content content content content content
          content content content content content content content content
          content content content content content content content content
          content content content content content content content content
        </main>
      </main>
    </div>
  </body>
</html>

【讨论】：