如何使用 flex 制作等高的引导面板

Question

我在使用引导程序设置 CSS 样式时遇到问题。我想要的是将数据列表显示到具有相同高度大小的面板中，例如 udemy 中的课程

这是我的索引

<div class="row-flex>
@foreach($courses['data'] as $course)
<div class="col-lg-3">

    <div class="panel panel-default">
        <a href="{{ route('courses.show', $course['id'] ) }}">

            <div class="panel-body">
                <h4>{{ $course['title'] }}</h4>
                <p>{{ $course['description'] }}</p>
                <p>{{ $course['fee'] }}</p>
            </div>
        </a>
    </div>
</div>      
@endforeach 
</div>

还有我的 app.css

.flex, .flex > div[class*='col-'] {  
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: inline-block;
    flex:1 0 auto;
}

.panel {
   display: flex;
   flex-direction:column;
   align-content:stretch; 
}

.panel-body {
   display: flex;
   flex-grow:1;
}

任何人都可以帮助我如何格式化提取值，如 udemy 的格式。

Answer 1

父母：

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;

第一个孩子：

 display: flex;
 flex-direction: column;