用HTML / CSS实现这种布局的最佳方法是什么？ Flexbox，Grid或其他？

问题描述

.phone {
  display: flex;
  flex-flow: column;
  flex-wrap: wrap;
}

.phone > span {
  display: inline-block;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 50%;
}

.phone > span.icon {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 100%;
}

<a class="phone">
  <span class="icon">
    <i class="fas fa-phone"></i>
  </span>
  <span>Phone</span>
  <span>555-555-5555</span>
</a>

这是我尝试过的方法，但是当flex-flow是column时，它对我不起作用。我也在寻找跨浏览器解决方案。

解决方法

latitudelist.removeWhere((isEmpty) => isEmpty == "0.0"); 充满了选项，而不仅仅是display或flex：

这是另一个：

grid

/* basic layout*/

.phone {
  display: table;
  /*or inline-table */
}

.icon {
  display: table-cell;
}

span {
  display: block;
}


/*makeup*/

.phone {
  background: #333;
  color: #eee;
  transition:0.2s;
}

.icon {
  vertical-align: middle;
  width: 50%;
  text-align: center;
  border-right: solid 1px gray;
}

span {
  padding: 0.5em
}

span:nth-child(2) {
  background: #555;
}

a ~ a .icon {width:25%;
  }
.icon  ~  .icon{border-left:1px solid gray;}

/* demo with hover to test layout behavior */

.phone:hover {
  font-size: 40px;
  width:100%;
}

,

在这里，我偏爱使用CSS网格。

.phone {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-template-rows: repeat(2,100px);
}

.phone .icon{
  background: aliceblue;
  grid-row: 1/3;
}
.phone span{
  display: flex;
  justify-content: center;
  align-items: center;
}

<a class="phone">
  <span class="icon">
    icon
  </span>
  <span>Phone</span>
  <span>555-555-5555</span>
</a>