Question

我在这里复制了问题http://jsfiddle.net/dmo266uy/1/

可悲的是，我无法触及那个父类，但如果我删除它上面的宽度，那么flex就可以了。调整窗口大小会将卡片移动到卡片列表中。

如何让此卡列表在此约束条件下工作？（更多细节更多细节更多细节更多细节更多细节.....） CSS：

    .container_9 {
      margin: 0 auto;
      width: 980px;
    }
    .clearfix {
        display: block;
        border: none;
    }
    .card-list {
      width: auto !important;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: stretch;
    }
    .card {
        width: 270px;
        min-width: 150px;
        margin: 0 20px 30px 0;
        text-align: center;
        background-color: #fff;
        border: 1px solid #eee;
        border-radius: 3px;
        cursor: pointer;
        position: relative;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        position: relative;
        transition: all .2s ease-in-out;
    }

    .card:hover {
        border-color: #DDD;
        box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
        transform: translateY(-6px);
    }

    .card * {
        box-sizing: border-box;
    }

    .type {
        background-color: #0099CC;
        width: 100%;
        flex: 0 1 45px;
        line-height: 25px;
        padding: 10px;
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        border-radius: 3px 3px 0 0;
    }

    .content {
        flex: auto;
    }

    .content .title {
        font-size: 24px;
        color: #0099CC;
        font-weight: normal;
        margin: 10px 0;
    }

    .content .title i {
        font-size: 18px;
    }

    .content p {
        font-size: 14px;
        color: #777;
        padding: 5px;
    }
    .content img {
      margin: 3px;
    }
    <div id="page" class="container_9 clearfix">
    <ul class="card-list">
        <li class="card">
            <div class="type">
                Title</div>
            <div class="content">
                 <h3 class="title"><img src="http://placehold.it/100x100" style="float: left;">My repo name </h3>
    <p>
    We would add a rule to our stylesheet that would float that image and also add a little padding next to it so that the text that will ultimately wrap around the image does not butt up against it too closely. Here is the CSS you may write: .left { float: left; padding: 0 20px 20px 0; }. This style floats that image to the</p>
            </div>

        </li>
            <li class="card">
            <div class="type">

                Title</div>
            <div class="content">
                 <h3 class="title"><img src="http://placehold.it/100x100" style="float: left;">My repo name </h3>
    <p>
    We would add a rule to our stylesheet that would float that image and also add a little padding next to it so that the text that will ultimately wrap around the image does not butt up against it too closely. Here is the CSS you may write: .left { float: left; padding: 0 20px 20px 0; }. This style floats that image to the</p>
            </div>

        </li>
            <li class="card">
            <div class="type">

                Title</div>
            <div class="content">
                 <h3 class="title"><img src="http://placehold.it/100x100" style="float: left;">My repo name </h3>
    <p>
    We would add a rule to our stylesheet that would float that image and also add a little padding next to it so that the text that will ultimately wrap around the image does not butt up against it too closely. Here is the CSS you may write: .left { float: left; padding: 0 20px 20px 0; }. This style floats that image to the</p>
            </div>

        </li>
   </ul>   
    </div>

Answer 1

您可以在Flex容器上添加max-width: 100vw。

这样，flex容器将其所有卡片包裹起来以适合水平视口。

.card-list {
    width: auto !important; /* not necessary */
    display: flex;
    ... /* other properties */
    max-width: 100vw; /* <-- added */
}

固定宽度父级内的Flexbox无法正常工作

1 个答案:

Updated fiddle