使用Flexbox与引导3和laravel 4叶片模板和相关的少混音

Question

我正在尝试实现一个柔性盒解决方案，以便为正在开发的站点显示内联邮箱系统。我需要实现的基本设计显示在线框中：

​

​

带红色边框的区域是我需要实现柔性盒的地方。

由于开发是用Laravel诱人的引擎完成的，我们使用包含的文件来生成三个窗格(左邮箱、中间邮件列表和右电子邮件查看器)的内容。

基本代码结构如下：

第一个代码段设置收件箱的视图：

@extends('layouts.master')

@section('content')
  <div class="content-container" ng-app="cs" ng-controller="MessagingCtrl">
    <div class="content-pane message-centre">
      <div class="row email-container">
        <div class="col-xs-12 header">
          <h3>Message Centre</h3>
        </div>
      </div>
      <div class="row email-panes">
        <div class="col-xs-2 mailboxes">
          @include('messages.partials.sidebar', ['active' => 'inbox'])
        </div>
        <div class="col-xs-3 emails">
          @include('messages.partials.message-list')
        </div>
        <div class="col-xs-7 email-viewer">
          @if(isset($message_opened))
            @include('messages.partials.message', ['message' => $message_opened])
          @endif
        </div>
      </div>
    </div>
  </div>
@stop

@section('scripts')
  {{HTML::script('assets/js/modules/cs.js')}}
  {{HTML::script('assets/js/app/configurations/messaging.js')}}
  {{HTML::script('assets/js/app/controllers/MessagingCtrl.js')}}
@stop

正如您所看到的，我们使用部分来包含三个垂直窗格。邮箱是一个简单的结构2 div与a链接。单击其中一个显示中间窗格中的电子邮件列表，该列表将电子邮件枚举为无序列表项。最后，单击其中一个项目将在右侧大窗格中显示所选电子邮件的内容。

我需要确保三个窗格或列具有相同的高度，正如我们所知道的，css在调整相邻div的大小时有限制，使其具有相同的高度。这样柔性箱就可以拯救了。

我的问题是在引导程序3中如何支持flexbox，以及在实现flexbox时是否需要特别考虑。我有以下基本的css (较少)混频器：

.flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.flex(@values) {
  -webkit-box-flex: @values;
  -moz-box-flex:  @values;
  -webkit-flex:  @values;
  -ms-flex:  @values;
  flex:  @values;
}
.order(@val) {
  -webkit-box-ordinal-group: @val;
  -moz-box-ordinal-group: @val;
  -ms-flex-order: @val;
  -webkit-order: @val;
  order: @val;
}
.wrapper {
  .flexbox();
}
.item {
  .flex(1 200px);
  .order(2);
}

具体来说，我需要一些建议和帮助，如何实现更少的，以适应引导网格。

如有任何建议，将不胜感激。

Answer 1

我认为一种选择是覆盖您的柔性盒区域的引导CSS。据我所知，您可以在引导CSS代码之后(或在后面)应用以下CSS代码：

.row.email-panes {
display: flex;
}      
.row.email-panes .col-xs-2{
flex-grow:2;
background-color: green;          
}
.row.email-panes .col-xs-3
{
flex-grow:3;
} 
.row.email-panes .col-xs-7{
flex-grow:7;
background-color: red;
} 

或更少(有一些嵌套)：

.row.email-panes {
    display: flex;

    .col-xs-2{
    flex-grow:2;
    background-color: green;          
    }

    .col-xs-3
    {
    flex-grow:3;
    } 

    .col-xs-7{
    flex-grow:7;
    background-color: red;
    } 
} 

演示：http://codepen.io/anon/pen/yyVMVo

因为您覆盖了Bootstrap的网格类，所以对于不支持柔性盒的浏览器来说，这将是一个退步。

我的代码不包含供应商前缀。在您的示例中，您使用mixins来设置这些供应商前缀。使用(a)自动修复后处理器似乎是更好的做法，通过社会的共识。还请参见LESS transition mixin with prefixes