时间戳

首页 > 解决方案 > CSS/HTML - Flexbox - 中心响应元素

html - CSS/HTML - Flexbox - 中心响应元素

问题描述

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

在此处输入图像描述

小提琴链接

我试过的

期望的输出

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>

标签： htmlcssflexbox

解决方案

.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%;
}

推荐阅读