弹性项目没有相同的宽度答案

【问题标题】：Flex items don't have the same width弹性项目没有相同的宽度
【发布时间】：2018-12-19 23:00:46
【问题描述】：

基本上，我试图使所有蓝色框的宽度和高度相同，而不管它们里面的内容如何。任何帮助是极大的赞赏。

.icon-tiles {
  margin: 0;
  padding: 0;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.tile-node {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 33.33333%;
          flex: 1 33.33333%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 2rem;
}

.tile-node__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}


.tile-node__link {
  background-color: #4d8acc;
  padding: 2rem;
  flex: 1 1 0;
}

<ul class="icon-tiles">
    <li class="tile-node">
        <a href="#" class="tile-node__link">
            <div class="tile-node__content tile-node__content--calendar">
                <span class="tile-node__text">My Link One</span>
            </div>
        </a>
    </li>
    <li class="tile-node">
        <a href="#" class="tile-node__link">
            <div class="tile-node__content tile-node__content--bus">
                <span class="tile-node__text">Link two</span>
            </div>
        </a>
    </li>
    <li class="tile-node">
        <a href="#" class="tile-node__link">
            <div class="tile-node__content tile-node__content--map">
                <span class="tile-node__text">Another link</span>
            </div>
        </a>
    </li>
    <li class="tile-node">
        <a href="#" class="tile-node__link">
            <div class="tile-node__content tile-node__content--essentials">
                <span class="tile-node__text">Another one</span>
            </div>
        </a>
    </li>
    <li class="tile-node">
        <a href="#" class="tile-node__link">
            <div class="tile-node__content tile-node__content--reminder">
                <span class="tile-node__text">New link twooooo</span>
            </div>
        </a>
    </li>
    <li class="tile-node">
        <a href="#" class="tile-node__link">
            <div class="tile-node__content tile-node__content--book">
                <span class="tile-node__text">Link three</span>
            </div>
        </a>
    </li>
</ul>

【问题讨论】：

为什么不给 .tile-node 添加一个宽度？
我不希望它们受到宽度的限制，因为内容将被动态添加。
请关注问题而不是讲述您的个人故事......我们只需要您的问题的详细信息，而不是您自己
我担心纯 CSS 是不可能的，因为弹性项目不知道他们兄弟姐妹的大小。您可以使用 JS 来实现这一点。 stackoverflow.com/questions/31159732/…
所有相同宽度和高度的蓝色框都将动态添加内容？在你的 script 标签中试试这个。为所有元素添加onChange监听器，创建一个通用函数来比较所有元素的宽度，然后相应地更改宽度onChange

标签： html css flexbox

【解决方案1】：

只需将以下内容添加到您的 CSS 类 .tile-node__link 中，它将如下所示：

.tile-node__link {
    width: 100%;
    line-height: 6rem;
}

并从此类中删除 padding: 2rem。

我希望这会有所帮助。

【讨论】：

【解决方案2】：

我认为这对你有用，请查看演示 sn-p

.icon-tiles {
  margin: 0;
  padding: 0;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.tile-node {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 33.33333%;
          flex: 1 33.33333%;

  padding: 2rem;
}

.tile-node__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}


.tile-node__link {
background-color: #4d8acc;
padding: 10px;
/* flex: 1; */
height: 84px;
overflow: hidden;
justify-content: center;
flex-direction: column;
display: flex;
}

<ul class="icon-tiles">
    <li class="tile-node">
        <a href="#" class="tile-node__link">
            <div class="tile-node__content tile-node__content--calendar">
                <span class="tile-node__text">My Link One My Link One My Link One My Link One</span>
            </div>
        </a>
    </li>
    <li class="tile-node">
        <a href="#" class="tile-node__link">
            <div class="tile-node__content tile-node__content--bus">
                <span class="tile-node__text">Link two</span>
            </div>
        </a>
    </li>
    <li class="tile-node">
        <a href="#" class="tile-node__link">
            <div class="tile-node__content tile-node__content--map">
                <span class="tile-node__text">Another link</span>
            </div>
        </a>
    </li>
    <li class="tile-node">
        <a href="#" class="tile-node__link">
            <div class="tile-node__content tile-node__content--essentials">
                <span class="tile-node__text">Another one</span>
            </div>
        </a>
    </li>
    <li class="tile-node">
        <a href="#" class="tile-node__link">
            <div class="tile-node__content tile-node__content--reminder">
                <span class="tile-node__text">New link twooooo</span>
            </div>
        </a>
    </li>
    <li class="tile-node">
        <a href="#" class="tile-node__link">
            <div class="tile-node__content tile-node__content--book">
                <span class="tile-node__text">Link three</span>
            </div>
        </a>
    </li>
</ul>

【讨论】：

你能解释一下你做了哪些改变吗？为什么？
感谢这个 Rahul，但问题是我不希望外框与锚标记具有相同的宽度。