如何創建帶有圖標和文本的三列響應式布局？

Question

我嘗試創建一個如下所示的三列布局（單擊圖像以查看大圖）：

它基本上是一個無序列表。 我在ul元素上使用display: flex和 FontAwesome 來顯示這些圖標。

ul class="goals-list">
      <li><i class="fas fa-sun goals-icon"></i>Development of wind and solar power for the community. </li>
      ...
      ...
      ...
</ul>

正如您所看到的，列沒有很好地對齊。 第二欄“為社區鋪路”、“免費Wifi”和“醫生無國界看病”不在同一水平線上。

我需要一個像網格一樣對齊的布局：

      item1          item2          item3
      item4          item5          item6

隨着屏幕尺寸越來越小，我希望它們像這樣包裹並自動調整：

      item1          item2
      item3          item4
      item5          item6

移動肖像：

      item1
      item2
      item3
      item4
      item5
      item6

我還希望圖標和文本之間有一點空間。 我想知道你會如何解決這個問題。 如果您能給我一些想法，我將不勝感激。

問題是我不知道從哪里開始。 我什至不確定使用無序列表是否是解決這個問題的正確方法。

我有三列的原因是因為我為容器設置了max-width: 1200px並且允許三列適合屏幕，但我認為三列在 1920×1080 大屏幕上看起來很棒。

Answer 1

您可以使用以下 css 來完成：

.goals-list{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
li{
    list-style-type: none;
    display: flex;
    align-items: center;
    width: 33.33%;
    word-break: break-all;
}
@media only screen and (max-width: 991px){
    li{
        width: 50%;
    }
}
@media only screen and (max-width: 767px){
    li{
        width: 100%;
    }
}

Answer 2

 ul { display: flex; list-style: none; flex-wrap: wrap; margin: 0; padding: 0; } li { flex: 0 0 33.33333%; } @media (max-width: 1200px) { li { flex: 0 0 50%; } } @media (max-width: 780px) { li { flex: 0 0 100%; } }

 <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> <li>Item 9</li> </ul>

Answer 3

您可以使用 css 執行此操作，而無需使用媒體查詢。

ul {
  display: flex;
  flex-wrap: wrap;
}
ul li {
  flex: 1 0 400px;
}

flex 屬性中的400px設置元素應該至少為 400px（實際屬性是flex-basis ）這使得如果可用大小對於 3 列來說太小，它將自動生成 2 列 500px（如果屏幕是1000 像素）。

Answer 4

您可以使用網格布局和 CSS 變量。

 * { margin: 0; padding: 0; } .goals-list { --column-num: 3; display: grid; grid-template-columns: repeat(var(--column-num), 1fr); list-style: none; } li { height: 100px; background: red; border: 3px solid black; box-sizing: border-box; } @media (max-width: 1200px) { .goals-list { --column-num: 2; } } @media (max-width: 780px) { .goals-list { --column-num: 1; } }

 <ul class="goals-list"> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ul>