我有一个网站部分必须并排包含三个元素。每个元素都有一个最小宽度。如果屏幕的宽度不足以包含所有三个元素,则不适合的元素将换行。
html:
<main id='main'>
<div id='firstRow' class='row'>
<div id='col1C' class='col'>col1C title
<div id='col1Ccon'>col1Ccon content</div>
</div>
<div id='col2C' class='col'>col2C title
<div id='col2Ccon'>col2Ccon content</div>
</div>
<div id='col3C' class='col'>col3C title
<div id='col3Ccon'>col3Ccon content</div>
</div>
</div>
</main>
CSS:
:root {
--w1Col: 478px;
--w2Col: 370px;
--w3Col: 350px;
--wSum3: calc(var(--w1Col) + var(--w2Col) + var(--w3Col));
}
html {
/*height: 100%;*/
}
body {
margin: 0;
font-size: 9pt;
font-family: 'Roboto', sans-serif;
font-weight: 300;
background-color: whitesmoke;
height: 100%;
display: flex;
flex-direction: column;
}
/***************************************************************
* Layout first row
*/
#main {
background-color: white;
/*border: 4px solid red;*/
color: black;
height: 100%;
flex-grow: 1; /* ability for a flex item to grow if necessary */
flex-shrink: 0; /* ability for a flex item to shrink if necessary */
flex-basis: auto; /* defines the default size of an element before the remaining space is distributed */
}
#firstRow {
background-color: white;
/*border: 1px solid black;*/
margin: 10px;
padding: 10px;
display: flex;
flex-direction: row; /* colums layout */
flex-wrap: wrap; /* wrap in multiple lines if it's necessary */
/*min-width: var(--wSum3);*/
/*justify-content: flex-end; defines the alignment along the main axis */
}
#firstRow .col {
/*border: 1px solid black;*/
flex: 1;
padding: 5px;
text-align: center;
}
#col1C {
background-color: green;
width: var(--w1Col);
min-width: var(--w1Col);
order: 1; /* column order */
flex-basis: 40%;/*var(--w1Col); column width */
justify-content: flex-end;
}
#col2C {
background-color: blue;
width: var(--w2Col);
min-width: var(--w2Col);
order: 2; /* column order */
flex-basis: 35%; /* var(--w2Col); column width */
justify-content: flex-end;
}
#col3C {
background-color: red;
width: var(--w3Col);
min-width: var(--w3Col);
order: 3; /* column order */
flex-basis: 25%; /*var(--w3Col); column width */
justify-content: flex-end;
}
#col1Ccon, #col2Ccon, #col3Ccon {
/*border: 1px solid black;*/
margin: 0 auto; /* center content */
}
#col1Ccon {
width: var(--w1Col);
background-color: lightgreen;
height: 200px;
}
#col2Ccon {
width: var(--w2Col);
background-color: lightblue;
height: 150px;
}
#col3Ccon {
width: var(--w3Col);
background-color: salmon;
height: 200px;
}
代码有效,但我想修复一些技巧。
3 列的宽度都相同,我希望能够选择这个宽度。这是因为第一个元素的最小宽度大于其他两个元素,因此边缘更小且不美观。参见 the same example , 我只改变了颜色
剩余空间现在在
col*Ccon
容器的两侧增长。相反,我只想在col1Ccon
的左侧和右侧col3Ccon
上生长。因此,我希望网站的内容 (col1Ccon + col2Ccon + col3Ccon
) 始终保持在页面的中心,而变化的是“边界”的增长和下降。
我被卡住了,非常感谢任何建议。谢谢:)
最佳答案
您的列都具有相同宽度的原因是因为您为 col 类提供了 flex: 1
。在这种情况下,这意味着每一列(即所有列)都有三分之一的屏幕可供使用。您可以做的是从 col 类中删除 flex
属性,而是在列的 id 选择器的范围内使用它。所以在下面的代码中,我将 flex
属性放在 id 选择器中,有一点不同,即第二列的 flex-grow
属性为 0(第一个flex
属性中的值)。如您所说,第一列稍大,因此占用更多空间。
然后,为了使内容居中:第一部分是为第二列指定 0 的 flex-grow
,使其保持在中间。其他两列会增长,并且在内容列的一侧有一个自动 margin
,它会在一侧增长,内容列将向左或向右对齐以给出一个以内容为中心的想法。这仅适用于较大的屏幕,对于较小的屏幕,您可以使用媒体查询来正确对齐内容。
所以最后,您的代码可能如下所示。我不知道这是否正是您想要的,但您可以尝试一下,看看它是否有效。
:root {
--w1Col: 478px;
--w2Col: 370px;
--w3Col: 350px;
--wSum3: calc(var(--w1Col) + var(--w2Col) + var(--w3Col));
}
body {
margin: 0;
font-size: 9pt;
font-family: 'Roboto', sans-serif;
font-weight: 300;
background-color: whitesmoke;
height: 100%;
display: flex;
flex-direction: column;
}
/***************************************************************
* Layout first row
*/
#main {
background-color: white;
color: black;
height: 100%;
flex: 1 0 auto;
width: 100%;
}
#firstRow {
background-color: white;
margin: 10px;
padding: 10px;
display: flex;
flex-direction: row; /* colums layout */
flex-wrap: wrap; /* wrap in multiple lines if it's necessary */
}
#firstRow .col {
padding: 5px;
text-align: center;
}
#col1C {
background-color: green;
order: 1; /* column order */
flex: 1 1 var(--w1Col);
}
#col2C {
background-color: blue;
order: 2; /* column order */
flex: 0 1 var(--w2Col);
}
#col3C {
background-color: red;
order: 3; /* column order */
flex: 1 1 var(--w3Col);
}
#col1Ccon {
max-width: var(--w1Col);
background-color: lightgreen;
height: 200px;
margin: 0 0 0 auto;
}
#col2Ccon {
max-width: var(--w2Col);
background-color: lightblue;
height: 150px;
margin: 0 auto;
}
#col3Ccon {
max-width: var(--w3Col);
background-color: salmon;
height: 200px;
margin: 0 auto 0 0;
}
@media only screen and (max-width: 1268px) {
#col2C {
flex-grow: 1;
}
#col2Ccon {
margin: 0 auto 0 0;
}
#col3Ccon {
margin: 0 auto;
}
}
@media only screen and (max-width: 908px) {
#col1Ccon {
margin: 0 auto;
}
#col2Ccon {
margin: 0 0 0 auto;
}
#col3Ccon {
margin: 0 auto 0 0;
}
}
@media only screen and (max-width: 780px) {
#col2Ccon, #col3Ccon {
margin: 0 auto;
}
}
关于第二个问题
关于css - 使用 Flex 进行 3 列不同大小的布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51021224/