Flex 容器宽度等于第一行中所有 flex 项的宽度答案

【问题标题】：Flex container width equal to width of all flex items in the first rowFlex 容器宽度等于第一行中所有 flex 项的宽度
【发布时间】：2021-08-26 09:05:13
【问题描述】：

有没有办法将弹性容器宽度设置为第一行中所有弹性项目的宽度？

这是重新创建我的模拟页面的代码：

let tags = ["whatever", 'whenever', 'follower', 'leaves', 'trees', 'follow', 'sea', 'ocean'];

const addTagsToHTML = function(tags) {
  let tagsList = document.getElementsByClassName('tag-list')[0];
  for (let i = 0; i < tags.length; i++) {
    let spanEl = document.createElement('span')
    spanEl.className = 'tag';
    spanEl.innerHTML = tags[i];
    tagsList.appendChild(spanEl);
  }
}

addTagsToHTML(tags)

const deleteBtn = document.getElementById('delete-btn');
deleteBtn.addEventListener('click', () => {
  console.log("to delete");
  let spanEl = document.getElementsByClassName('tag')[0];
  let tagsList = document.getElementsByClassName('tag-list')[0];
  tagsList.removeChild(spanEl);
})

.all-container {
  width: 90%;
  background-color: rgb(231, 248, 228);
  display: flex;
  padding: 10px;
  gap: 10px;
  justify-content: space-between;
}

.add-padd-color {
  padding: 20px;
  background-color: white;
}

.tag-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tag-list .tag {
  border: 1px solid rgb(182, 112, 112);
  padding: 2px 5px;
  border-radius: 2px;
  ;
}

.actions,
.title {
  min-width: 30%;
}

<div class="all-container">
  <div class="title add-padd-color">Mock title</div>
  <div class="tag-list add-padd-color">
  </div>
  <div class="actions add-padd-color">
    <button id='delete-btn'>Delete tag</button>
  </div>
</div>

这是该页面的外观：

这些弹性项目（标签）可能会被删除，所以第一行的宽度会改变，我希望我的弹性容器（标签列表）的宽度相应地改变，并且只占用包含所有弹性所需的大小可以包含在一行中而不会留下可用空间的项目。

【问题讨论】：

使用flex-grow 和flex-shrink 属性分别增大或缩小弹性项目。

标签： html css flexbox

【解决方案1】：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex container</title>
    <style>
        .all-container {
            width: 90%;
            background-color: rgb(231, 248, 228);
            display: flex;
            padding: 10px;
            gap: 10px;
            justify-content: space-between;
        }

        .add-padd-color {
            padding: 20px;
            background-color: white;
        }

        .tag-list {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            flex-grow: 1;
        }

        .tag-list .tag {
            border: 1px solid rgb(182, 112, 112);
            padding: 2px 5px;
            border-radius: 2px;
            ;
        }

        .actions,
        .title {
            min-width: 30%;
        }
    </style>
</head>

<body>

    <div class="all-container">
        <div class="title add-padd-color">Mock title</div>
        <div class="tag-list add-padd-color">
        </div>
        <div class="actions add-padd-color">
            <button id='delete-btn'>Delete tag</button>
        </div>
    </div>

    <script>
        let tags = ["whatever", 'whenever', 'follower', 'leaves', 'trees', 'follow', 'sea', 'ocean'];

        const addTagsToHTML = function (tags) {
            let tagsList = document.getElementsByClassName('tag-list')[0];
            for (let i = 0; i < tags.length; i++) {
                let spanEl = document.createElement('span')
                spanEl.className = 'tag';
                spanEl.innerHTML = tags[i];
                tagsList.appendChild(spanEl);
            }
        }

        addTagsToHTML(tags)

        const deleteBtn = document.getElementById('delete-btn');
        deleteBtn.addEventListener('click', () => {
            console.log("to delete");
            let spanEl = document.getElementsByClassName('tag')[0];
            let tagsList = document.getElementsByClassName('tag-list')[0];
            tagsList.removeChild(spanEl);
        })
    </script>

</body>
</html>

您可以在 .tag-list 上使用 flex-grow，以便 tag-list 容器占用可用空间。

【讨论】：

【解决方案2】：

尝试将父 div 添加到您的 .all-container div。并将display: flex 添加到父div。你可以在这里看到它的代码：

https://jsfiddle.net/ucLmdbf5/4/

【讨论】：

【解决方案3】：

如果您的意思是希望容器宽度调整到缩小的中间项，则不要使用display: flex，而是使用display: inline-flex。

let tags = ["whatever", 'whenever', 'follower', 'leaves', 'trees', 'follow', 'sea', 'ocean'];

const addTagsToHTML = function(tags) {
  let tagsList = document.getElementsByClassName('tag-list')[0];
  for (let i = 0; i < tags.length; i++) {
    let spanEl = document.createElement('span')
    spanEl.className = 'tag';
    spanEl.innerHTML = tags[i];
    tagsList.appendChild(spanEl);
  }
}

addTagsToHTML(tags)

const deleteBtn = document.getElementById('delete-btn');
deleteBtn.addEventListener('click', () => {
  console.log("to delete");
  let spanEl = document.getElementsByClassName('tag')[0];
  let tagsList = document.getElementsByClassName('tag-list')[0];
  tagsList.removeChild(spanEl);
})

.all-container {
  /* width: 90%; */
  /* background-color: rgb(231, 248, 228); */
  /* hard to see */
  background-color: gray;
  /* for demo purposes */
  display: inline-flex;
  /* adjustment */
  padding: 10px;
  gap: 10px;
  justify-content: space-between;
}

.add-padd-color {
  padding: 20px;
  background-color: white;
}

.tag-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tag-list .tag {
  border: 1px solid rgb(182, 112, 112);
  padding: 2px 5px;
  border-radius: 2px;
  ;
}

.actions,
.title {
  min-width: 30%;
}

<div class="all-container">
  <div class="title add-padd-color">Mock title</div>
  <div class="tag-list add-padd-color">
  </div>
  <div class="actions add-padd-color">
    <button id='delete-btn'>Delete tag</button>
  </div>
</div>

【讨论】：