伸缩项目的宽度不同

时间：2018-12-19 14:04:49

标签： html css flexbox

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

.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>

3 个答案:

答案 0 :(得分：-1)

我认为这对您有用，请查看演示代码段

.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>

答案 1 :(得分：-1)

这里是元素的高度和宽度相等的解决方案，但它们都是兄弟姐妹-如上面的注释所述。 我想，在您的解决方案中，宽度是必填项。 http://jsfiddle.net/heaversm/qbdov012/ 

body {
    display: -webkit-flex;
    -webkit-flex-flow: column wrap;
    -webkit-align-items: center;
}

ul {
    display: -webkit-flex;
    margin: 0 20px;
    max-width: 800px;
}
li {
    -webkit-flex: 1 0 0px;
    background-color: #eee;
    padding: 20px;
    overflow: hidden;
}
li:nth-child(even) {
    background-color: #ccc;
}
<ul>
    <li>Little content.</li>
    <li>Moderate content. Moderate content. Moderate content.</li>
    <li>Much content. Much content. Much content. Much content. Much content. Much content. Much content. Much content. Much content. Much content. Much content. Much content.</li>
</ul>

答案 2 :(得分：-1)

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

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

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

我希望这会有所帮助。

相关问题
最新问题