我正在嘗試使用flexbox顯示集合網格，但我無法正確布局-有解無憂

我正在嘗試使用 flexbox 實作以下回應式布局，如下圖所示。

我正在嘗試使用 flexbox 顯示集合網格，但我無法正確布局

我嘗試了幾件事，但沒有得到想要的結果。

此設計中的每個專案都有一個影像和頂部，我需要顯示博客標題、日期和類別，但我無法正確布局

目前我在沒有 flexbox 的情況下做同樣的事情，但它有很多 css 和其他標簽，雖然我可以使用 flex 用更少的代碼進行更改。

我查看了很多示例，但找不到與我的布局類似的 1 個示例

當前頁面正在使用 bootstrap v3.3.6，我無法更改，因為它會影響網站的其他部分

.flex-container {
  display: flex;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
.flex1 {
 flex: 100%;
  max-height:372px;
}
.flex2 {
   flex:25%;
  max-height:372px;
}
.flex3 {
   flex:25%;
  max-height:372px;
}
.flex4 {
   flex:25%;
  max-height:372px;
}
.flex5 {
   flex:25%;
  max-height:372px;
}
.flex-container > div  > span {
  position:absolute;
  z-index:1;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
  <div class="row row-margin">
    <div class="flex-container">
      <div class="flex1">
        <img src="https://dummyimage.com/645x424/753075/fff.jpg&text=Image" class="img-responsive">
        <span>1</span>
      </div>
      <div class="flex2">
        <img src="https://dummyimage.com/480x360/3b063b/fff.jpg&text=Image" class="img-responsive">
        <span>2</span>
      </div>
      <div class="flex3">
        <img src="https://dummyimage.com/645x424/3b063b/fff.jpg&text=Image" class="img-responsive">
        <span>3</span>
      </div>
      <div class="flex4">
        <img src="https://dummyimage.com/480x360/3b063b/fff.jpg&text=Image" class="img-responsive">
        <span>4</span>
      </div>
      <div class="flex5">
        <img src="https://dummyimage.com/480x360/3b063b/fff.jpg&text=Image" class="img-responsive">
        <span>5</span>
      </div>

    </div>
  </div>
</div>

uj5u.com熱心網友回復：

我建議你使用網格，有很多方法可以實作這一點，但如果你關心媒體查詢，flex 絕對不是處理這樣的網格的最佳方法。然而，一種方法是使用位置和彈性。但它是一個權衡。

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1px;
}

.item {
    height: 4rem;
    width: 4rem;
    background-color: antiquewhite;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item-1 {
    height: 8rem;
    width: 8rem;
}

.item-2,
.item-3 {
    margin-top: -4rem;
}

.row {
    display: flex;
    gap: 1px;
}

.item-4 {
    position: absolute;
    margin-top: 1px;
}

.item-5 {
    position: absolute;
    margin-top: 1px;
    margin-left: 4.1rem;
}

  <div class="container">
    <div class="item item-1">1</div>
    <div class="row">
      <div class="item item-2">2</div>
      <div class="item item-3">3</div>
      <div class="item item-4">4</div>
      <div class="item item-5">6</div>
    </div>
  </div>

我還意識到您可以將 2 項 2 和 4 包裝到一個 div 中并將其 flex-direction 設定為列，對 3 和 6 項執行相同的操作。

uj5u.com熱心網友回復：

我已經設法使用網格來做到這一點，這是回應式的，無需撰寫任何額外的媒體查詢

基本作業代碼示例https://codepen.io/KGuide/pen/xxPWxKj

<div class="container">
<div class="row">
<div class="column1 columnX grid-col" style="background-color:#f00;">
 <img src="https://dummyimage.com/645x424/753075/fff.jpg&text=Image" class="img-responsive">
    <h2>Column 1</h2>
    <p>Some text..</p>
</div>

<div class=" column2 column grid-col" style="background-color:#f00;">
<div class="row margin-0">
  <div class="column grid-col" style="background-color:#aaa;">
   <img src="https://dummyimage.com/645x424/753075/fff.jpg&text=Image" class="img-responsive">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div class="column grid-col" style="background-color:#bbb;">
  <img src="https://dummyimage.com/645x424/753075/fff.jpg&text=Image" class="img-responsive">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
</div>

<div class="row margin-0">
  <div class="column grid-col" style="background-color:#ccc;">
  <img src="https://dummyimage.com/645x424/753075/fff.jpg&text=Image" class="img-responsive">
    <h2>Column 4</h2>
    <p>Some text..</p>
  </div>
  <div class="column grid-col" style="background-color:#ddd;">
  <img src="https://dummyimage.com/645x424/753075/fff.jpg&text=Image" class="img-responsive">
    <h2>Column 5</h2>
    <p>Some text..</p>
  </div>
</div>

</div>

CSS

* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 1px;
  margin:0;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}
.btn:hover {
  background-color: #ddd;
}
.btn.active {
  background-color: #666;
  color: white;
}
.column1{float: left; width:50%; padding:0; margin:0;}
.column2{float: left; width:50%; padding:0; margin:0;}
.grid-col {position:relative;}
.grid-col > img {z-index:9;}
.grid-col > h2,p {position:absolute; z-index:10;top:30px;left:25px;  }
.margin-0{margin:0px;}

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/437651.html

標籤：html css 推特引导弹性盒

上一篇：在Next.JS中將Bootstrap類與自定義CSS相結合

下一篇：如何將編程向下滾動添加到Flutter模態底頁內的串列視圖構建器？