Question

我想把这些卡准确地放在浅蓝色背景的中间。而且当我缩小浏览器时，卡之间的空间也会减少。（我正在使用Chrome。）

我的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>

Answer 1

这里有一个正常工作的例子

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

将.flex-container移至与.row相同的元素。

由于您的.flex-item是inline-block而非申请。

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

对于卡片周围的空间 - 使用百分比：

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

删除col-类的bootstrap float：

.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%; }添加保证金。

示例：

＆＃13;
＆＃13;
<div class="flex-container"> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> </div>
＆＃13;
batcht
＆＃13;
＆＃13;
＆＃13;

如何将卡片放在Flex容器中

2 个答案: