Question

我有一排，其中一列的高度可能会有所不同，所以我不知道它会有多高。为了正确地隔开相邻列，我使用了嵌套的弹性框。

这在主要断点上工作正常，但是一旦我添加了弹性框，这就会打破响应性，因为列不再叠加在移动设备上。

我该怎么办？我应该放弃flexbox吗？我怎么能达到这个间距？

＆＃13;

.container{
  margin-top: 60px;
}
 .container{
  border: 1px solid #000;  
}
.row{
  display: flex;
}
.row-center{
  display: flex;
  flex: 1;
}

.outer{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  border: 1px solid #000;
  width: 100%;
}

.one, .two, .three{
  flex: 0 0 40px;
  border: 1px solid #000;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6"><img src="http://placehold.it/350x500"></div>
    <div class="col-xs-12 col-sm-6 row-center">
      <div class="outer">
        <div class="one">some text</div>
        <div class="two">some text</div>
        <div class="three">some text</div>
      </div>
    </div>
  </div>
</div>

＆＃13;

jsfiddle mirror：https://jsfiddle.net/y68dnzwy/

Answer 1

可以帮助你：

＆＃13;

... CROSS JOIN (SELECT MIN(modified) AS first_modified FROM user) ue

＆＃13;

.container{
  margin-top: 60px;
}
 .container{
  border: 1px solid #000;  
}
.row{
  display: flex;
}
.row-center{
  display: flex;
  flex: 1;
}

.outer{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  border: 1px solid #000;
  width: 100%;
}

.one, .two, .three{
  flex: 0 0 40px;
  border: 1px solid #000;
}
/* Added: */
@media screen and (min-width:100px) and (max-width: 980px) {
  .row-center {
    flex: auto;
  }
}

＆＃13;

<强> Demo

Answer 2

根据动态文本使用引导程序3,4个文本框，行高度相同，平板电脑和移动设备只有2行。以tetx为中心

不知何故，这个弹性魔法会在移动设备上产生，只有同一行的文本框具有相同的高度，所以如果最后一个项目超高，则只有最后两个项目超高，不影响前两个。

   <div class="row row-flex-box">
        <div class="col-xs-6 col-sm-6 col-md-3">
            <div class="thumbnail flex-col-vertical-center">
                <div class="caption"><span>text text text text</span></div>
            </div>
        </div>
        <div class="col-xs-6 col-sm-6  col-md-3">
            <div class="thumbnail flex-col-vertical-center">
                <div class="caption"><span>text text text text text text text text</span></div>
            </div>
        </div>
        <div class="col-xs-6 col-sm-6  col-md-3">
            <div class="thumbnail flex-col-vertical-center">
                <div class="caption"><span>text text text text</span></div>
            </div>
        </div>
        <div class="col-xs-6 col-sm-6  col-md-3">
            <div class="thumbnail homepage-slider-bottom-block-single flex-col-vertical-center">
                <div class="caption"><span>text text text texttext text text texttext text text text</span></div>
            </div>
        </div>
    </div>

的CSS：

.row-flex-box {
    display: flex; /* make cols same heigh */
    flex-wrap: wrap; /* alows responsive behavior of cols (otherwise cols will never break on mobile)*/
}

.flex-col-vertical-center {
    display: flex; /* specifing display/flex-direction/justifi-content only because i want to have text aligned in the middle of boxes much cleaner than display:table-cell way*/
    flex-direction: column;
    justify-content: center;
    text-align:center;
    height: 100%; /* since cols have bigger height this has effect, also can be ussefull - height: calc(100% - 15px); with 15px bottom margin */
}

Flexbox打破了自举响应

2 个答案: