主页 / 问题 / 664401
Accepted
Jarry Roxwell
Asked:2020-05-11 12:54:02 +0800 CST2020-05-11 12:54:02 +0800 CST

flexbox 子元素的宽度

  • 772

有一个布局的例子。调整窗口大小时，一切如常，<a>标签的宽度发生变化，每行的数量也发生变化。

但是，如果<a>最后一行中的元素少于前面几行中的元素，那么这些元素将被拉伸。

是否可以使最后一行的宽度与<a>前几行的元素相匹配。

PS 为了清楚起见。现在，就像在红色方块上，但我想在绿色方块上在此处输入图像描述

PSS 在 JS 的帮助下，我知道该怎么做，我对 CSS 很感兴趣。

B.addEventListener("click", add);
C.addEventListener("click", take);

function add() {
  A.style.width = A.offsetWidth + 50 + "px";
}

function take() {
  A.style.width = (A.offsetWidth - 50) + "px";
}
.work {
  display: flex;
  min-width: 67.5em;
  max-width: 96em;
  min-height: 55em;
  /*-----*/
  font-size: 4px;
  padding: 3.75em;
  background-color: hsla(0, 0%, 100%, 0.7);
  box-sizing: border-box;
}

.faculty {
  display: block;
  /*-----*/
  background-color: #F0E68C;
}

.container_link {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

a {
  min-width: 5em;
  flex: 1;
  display: block;
  /*-----*/
  font-size: 2.25em;
  margin: 1.3em 0.5em 0;
  background-color: hsla(0, 0%, 90%, 1);
  text-decoration: none;
  border: 1px dashed #3B8686;
  padding: 0.83em;
}
<button id="B">+ Width khaki</button>
<button id="C">- Width khaki</button>
<div id="A" class="work">
  <div class="faculty" id="GF">
    <div class="container_link">
      <a href="#">1</a>
      <a href="#">2</a>
      <a href="#">3</a>
      <a href="#">4</a>
      <a href="#">5</a>
    </div>
  </div>
</div>

css

2 个回答

  1. Best Answer

    你想用纯 CSS 实现的是可能的，但 flexbox 在这里无济于事，因为它是一维的，不适合成熟的网格。为此display: grid，对于不支持的浏览器，请假装您的 JS 解决方案。

    这是一个网格的小例子，甚至不需要媒体表达式（最大化到全屏并移动浏览器的边缘）：

    .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 10px 10px;
  background-color: black;
}

.grid__item {
  background-color: red;
  height: 40px;
}
    <div class=grid>
  <div class=grid__item></div>
  <div class=grid__item></div>
  <div class=grid__item></div>
  <div class=grid__item></div>
  <div class=grid__item></div>
  <div class=grid__item></div>
  <div class=grid__item></div>
  <div class=grid__item></div>
  <div class=grid__item></div>
</div>

    • 5

  2. 您的链接具有 flex: 1 属性，这意味着只要空间允许，该块就会被拉伸或压缩。

    flex: 1; => flex: 1 1 auto;

    根据规范它

    flex: flex-grow flex-shrink  flex-basis;

    如果 flex-grow 设置为 1，则它允许块按需要扩展。0 - 禁用。flex-shrink也一样，只是它负责压缩block。flex-basis 是默认宽度，具体取决于设置。

    您只需要将此属性添加到链接：

    flex-grow: 0;
    • 4

相关问题