如何在柔性容器中插入卡片

我想將這些卡片準確放置在淺藍色背景的中間。而且，當我縮小瀏覽器時，卡片之間的空間也應該減少。（我使用的瀏覽器。）如何在柔性容器中插入卡片

這是不工作我的style.css文件

.flex-item{ 
    height: 350px; 
    width: 250px; 
    background-color: white; 
    text-align: center; 
    margin: 15px; 
    display: inline-block; 
    border: 1px solid #ccc; 
    box-shadow: 0px 5px 25px #aaa; 
    border-radius: 10px; 
} 


.flex-container{ 
    display: flex; 
    webkit-justify-content: center; 
    height:380px; 
    background-color: lightblue; 
    }

HTML：

 <!-- cards --> 
    <div class="flex-container"> 
     <div class="row"> 
      <div class="col-md-3 flex-item" > 
      <img src="bg.jpg" class="img img-responsive" style="margin-bottom:5px; margin-top:10px; border-radius:250px;"> 
      <legend>Section</legend> 
      <p>Lorem ipsum dolor sit amet glo dlbogn</p> 
      <button class="btn btn-success btn-sm" style="float:right;" >Read More</button> 
      </div> 
      <div class="col-md-3 flex-item" > 
      <img src="bg.jpg" class="img img-responsive" style="margin-bottom:5px; margin-top:10px; border-radius:250px;"> 
      <legend>Section</legend> 
       <p>Lorem ipsum dolor sit amet glo dlbogn</p> 
       <button class="btn btn-success btn-sm" style="float:right;" >Read More</button> 
      </div> 
      <div class="col-md-3 flex-item" > 
      <img src="bg.jpg" class="img img-responsive" style="margin-bottom:5px; margin-top:10px; border-radius:250px;"> 
      <legend>Section</legend> 
      <p>Lorem ipsum dolor sit amet glo dlbogn</p> 
      <button class="btn btn-success btn-sm" style="float:right;" >Read More</button> 
      </div> 
     </div> 
    </div>

來源

2016-01-20 Noob Coder

將.flex-container移動到與.row相同的元素。

由於您的.flex-item是inline-block比適用。

.flex-container { 
    text-align: center; 
}

對於空間在你的卡 - 使用比例爲它：

.flex-item + .flex-item { 
    margin-left: 2%; 
}

爲col-類刪除自舉浮動：

.flex-item { 
    float: none; 
}

它將爲所有.flex-item增加保證金，除了第一個。

例子：

.flex-container { 
 
    width: 100%; 
 
    height: 250px; 
 
    background-color: rgba(0, 0, 150, .3); 
 
    text-align: center; 
 
} 
 
.flex-item { 
 
    box-sizing: border-box; 
 
    border: 1px solid #ddd; 
 
    background-color: rgba(0, 150, 0, .3); 
 
    display: inline-block; 
 
    width: 150px; 
 
    height: 250px; 
 
} 
 
.flex-item + .flex-item { 
 
    margin-left: 2%; 
 
}

<div class="flex-container"> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
</div>

來源

2016-01-20 09:17:48 Justinas

其工作..謝謝:)但你能解釋一下，請問text-align屬性影響的卡？據我所知，它應該隻影響文本。即時新手。 –

@ MD.TAWSIF-UL-KARIMTawsif它也影響內聯元素。這就是爲什麼它會影響'display：inline-block'元素。 – Justinas

這裏有一個例子做工精細

.flex-container { 
 
    background-color: lightblue; 
 
    height:380px; 
 
    padding: 0; 
 
    margin: 0; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.flex-item { 
 
    background-color: white; 
 
    padding: 5px; 
 
    height: 350px; 
 
    width: 250px; 
 
    margin: 10px; 
 
    line-height: 20px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 2em; 
 
    text-align: center; 
 
    margin: 15px; 
 
    display: inline-block; 
 
    border: 1px solid #ccc; 
 
    box-shadow: 0px 5px 25px #aaa; 
 
    border-radius: 10px; 
 
}

<div class="flex-container"> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 

 

 
</div>

來源

2016-01-20 09:16:21

如何在柔性容器中插入卡片

回答

相關問題