使用 Flexbox 或 CSS Grid,是否可以根据其中一列的内容来调整我的列的大小?
这就是我想要的:
我有 2 列,一个main and a side.
|------------------------container--------------------------|
| |
||----------------------------------------|----------------||
|| main | side ||
||----------------------------------------|----------------||
| |
|-----------------------------------------------------------|
我想要side根据其内容自动调整大小,我想要main宽度为两倍side, 最低限度。它可以变大,但不能变小。
随着容器的增大,main将以同样的速度增长,而side保持其自动宽度。
|--------------------------container increases----------------------|
| |
||------------------------------------------------|----------------||
|| main increases | side ||
||------------------------------------------------|----------------||
| |
|-------------------------------------------------------------------|
容器可以缩小到原来的3倍side,此时main将是两倍宽side。我希望这是断点。
|--------------------container----------------------|
| |
||--------------------------------|----------------||
|| main | side ||
||--------------------------------|----------------||
| |
|---------------------------------------------------|
如果容器进一步缩小,我希望将列堆叠起来,其中两列现在都是 100% 宽度:
|--------------------container--------------------|
| |
||-----------------------------------------------||
|| main ||
||-----------------------------------------------||
||-----------------------------------------------||
|| side ||
||-----------------------------------------------||
| |
|-------------------------------------------------|
这是我尝试过的:
我尝试使用 Flexbox 和 Grid 执行此操作,但无法让主列根据侧列确定其大小。
.container-grid {
display: grid;
grid-template-columns: 1fr auto; /* works, but doesn’t wrap when left column gets too small */
/* I also tried the repeat() syntax, but that only worked for similarly-sized columns */
}
.container-flex {
display: flex;
flex-wrap: wrap;
}
.main { flex: 2; } .side { flex: 1; } /* same problem, doesn’t wrap */
.main ( flex: 0 1 auto; } .side { flex: 0 0 auto; } /* wraps columns too early, any time main is smaller than intrinsic width */
我尝试过的唯一可行的解决方案是知道侧栏的固定宽度(我必须在不知道其内容的情况下预测),然后使用其宽度 3 倍的媒体查询。当然,媒体查询仅适用于窗口宽度,而不适用于容器宽度,因此我必须使用容器的任何父元素来计算媒体查询。
.container-grid {
display: grid;
grid-template-columns: 1fr 15em;
}
@media screen and (max-width: 45em) {
.container-grid {
grid-template-columns: 1fr;
}
}