如何解决CSS / HTML-Flexbox-中心响应元素
我正在尝试实现一个响应页面。我设法得到了以下结果,但是我希望所有盒子(徽标|链接| ic |面包屑)都具有其父母的全高/全宽。这些框还应该完全填充可用空间。
小提琴链接
- 带有
min-height
:https://jsfiddle.net/sxr3eq84/142/ - 在父母上有
align-items: stretch
:https://jsfiddle.net/ycsmo8fx/15/
我尝试过的
- 使用
<nav><a/><nav>
属性从标头强制min-height
占用全部空间,但它破坏了Flexboxalign-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>
解决方法
.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%;
}
,
尝试在所有需要水平和垂直居中对齐的包装纸上使用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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。