css - 使用 Flexbox 响应式包装 3 个盒子及其内容

Question

我创建了一个 jsfiddle 来说明我正在尝试做什么。当您将窗口调整得更小时，这些框会重叠。我遇到的另一个问题是让“阅读更多”文本位于每个框的右下角。

https://jsfiddle.net/natetg/dhaqzy29/1/

<header>header</header>
<div id='main'>
<leftCol>left
    <div class="bottom">
        <div class="right">read more</div>
    </div>
</leftCol>
<middleCol>middle
    <div class="bottom">
        <div class="right">read more</div>
    </div>
</middleCol>
<rightCol>right
    <div class="bottom">
        <div class="right">read more</div>
    </div>
</rightCol>
</div>
<footer>footer</footer>

Answer 1

#box-container
{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-around;
}
.box
{
    display:flex;
    flex-direction:column;
    flex:1;
    min-width:250px;
    height:300px;
    border:1px solid black;
}
.box-title
{
    font-weight:bold;
}
.box-text
{
    flex:1;   
}
.box-read-more
{
    align-self:flex-end;
}


<div id="box-container">
<div class="box">
    <div class="box-title">
        Box #1 title
    </div>
    <div class="box-text">
        Text content for the box goes here.
    </div>
    <div class="box-read-more">
        Read more...
    </div>
</div>
<div class="box">
    <div class="box-title">
        Box #2 title
    </div>
    <div class="box-text">
        Text content for the box goes here.
    </div>
    <div class="box-read-more">
        Read more...
    </div>
</div>
<div class="box">
    <div class="box-title">
        Box #3 title
    </div>
    <div class="box-text">
        Text content for the box goes here.
    </div>
    <div class="box-read-more">
        Read more...
    </div>
</div>
</div>