我正在开始一个 Angular 应用程序,并且真的很难获得基本的布局设置;我有 Angular 经验,但实际的 html/css 设计对我来说是全新的
我试过的任何东西似乎都不允许这个容器占据整个屏幕。我已经尝试在 html 和容器 css 类上使用多种不同的设置,但实际上没有任何东西可以使容器适合宽度的屏幕;但高度似乎总是合适。
除了这个 flex-direction: row 似乎并不总是有效。例如,我试图让标题 div 内的 div“side”和 div“main”彼此相邻。取而代之的是,那些 div 的行为就像列;尽管我已经穿上了;我也试过 display: inline-block 也没有用。我减少了 side 和 main 的宽度,希望它们可以紧挨着彼此,但这也行不通。
截图: Full View
html {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
}
.container {
position: relative;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 1px solid black;
display: flex;
flex-direction: column;
}
.header {
margin-top: 15px;
border: 1px solid red;
height: 15vh;
flex-direction: row;
flex-wrap: nowrap;
}
.body {
border;
1px solid green;
height: 80vh;
}
.side {
width: 15vw;
border: 1px solid yellow;
}
.main {
width: 50vw;
border: 1px solid blue;
}
<div class="container">
<div class="header">
<div class="side">
<p>HI</p>
<div class="main">
<p>HI2</p>
</div>
</div>
<div class="body">
<p>I am the body</p>
</div>
</div>
</div>
最佳答案
首先 - 您的代码中有不少拼写错误。您尚未关闭 side
类或 main
类,并且 side
div 没有关闭 div。
其次 - 在我整理了您的代码后,我注意到您正在制作 .container display: flex;
而实际上您需要制作 .header display: flex ;
因为这是侧 div 和主 div 的父级。
这是一个很好的 flexbox 指南:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
这应该适合你:
html {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
}
.container {
position: relative;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 1px solid black;
display: flex;
flex-direction: column;
}
.header {
margin-top: 15px;
border: 1px solid red;
height: 15vh;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
}
.side {
width: 15vw;
border: 1px solid yellow;
}
.main {
width: 50vw;
border: 1px solid blue;
}
.body {
border: 1px solid green;
height: 80vh;
}
<div class="container">
<div class="header">
<div class="side">
<p>HI</p>
</div>
<div class="main">
<p>HI2</p>
</div>
</div>
<div class="body">
<p>I am the body</p>
</div>
</div>
关于html - 容器不适合屏幕和 flex-direction : row not working properly,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57274078/