我正在使用flexbox来解决它,但是我遇到了一些问题。我的目标是用四个背景色分隔窗口,第一个只是标题行,然后页面的其余部分由3列填充,每列分别具有不同的背景色。但是由于某种原因,如果我编写display:flex,它什么也不会显示。有人可以向我解释如何获得所需的效果吗?
.container {
width: 100%;
height: 100%;
}
.header {
height: 150px;
background-color: red;
}
.col-container {
widows: auto;
height: auto;
display: flex;
flex-direction: row;
}
.col {
flex: 1;
}
.col-container:nth-child(1) {
background: green;
}
.col-container:nth-child(2) {
background: blue;
}
.col-container:nth-child(3) {
background: yellow;
}
<body>
<div class="container">
<div class="header"></div>
<div class="col-container">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>
</body>
答案 0 :(得分:1)
这是一个有效的示例:
.container {
width: 100%;
height: 100%;
}
.header {
height: 150px;
background-color: red;
}
.col-container {
widows: auto;
height: auto;
display: flex;
flex-direction: row;
}
.col-1 {
flex: 1 1 33.333%;
background-color: green;
}
.col-2 {
flex: 1 1 33.333%;
background-color: blue;
}
.col-3 {
flex: 1 1 33.333%;
background-color: yellow;
}
<body>
<div class="container">
<div class="header"></div>
<div class="col-container">
<div class="col-1">ts</div>
<div class="col-2">dtd</div>
<div class="col-3">dt</div>
</div>
</div>
</body>
这是您需要解决的问题:
flex-direction
设置为row
。您最可能希望各列彼此相邻。col-1
,col-2
和col-3
的类添加到HTML。col
类中的内容,否则您将一无所获。我将flex-basis
(速记flex
中的第三个参数)设置为33.333%。您不一定需要这样做,但是很高兴看到特定元素将填充或更改多少空间。
编辑以获取评论:
body {
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100%;
}
.header {
height: 150px;
background-color: red;
}
.col-container {
widows: auto;
height: auto;
display: flex;
flex-direction: row;
height: calc(100vh - 150px);
}
.col-1 {
flex: 1 1 33.333%;
background-color: green;
}
.col-2 {
flex: 1 1 33.3333%;
background-color: blue;
}
.col-3 {
flex: 1 1 33.3333%;
background-color: yellow;
}
<body>
<div class="container">
<div class="header"></div>
<div class="col-container">
<div class="col-1"></div>
<div class="col-2"></div>
<div class="col-3"></div>
</div>
</div>
</body>
基本上,您需要给col-container
指定一个高度。为此,我在vh
语句中使用了calc
单位。它从视口高度中减去标题高度,然后得出余数。这也消除了填充物含量的必要性。