Question

给出下面的flex CSS布局。

我需要在调整页面大小时缩小图像，因此img { width: 100% }这样可以调整页面大小，图像也会相应缩放。

我不确定为什么这种布局会导致三个博客条目宽度，特别是因为相关图片都是相同的。

div.container div.blog,
div.container-fluid div.blog {
    display: flex;
    flex: 1;
    flex-flow: row nowrap;
}

div.container div.blog div,
div.container-fluid div.blog div {
    margin: 0 12.5px;
}

div.container div.blog div:first-of-type,
div.container-fluid div.blog div:first-of-type {
    margin-left: 0px;
}

div.container div.blog div:last-of-type,
div.container-fluid div.blog div:last-of-type {
    margin-right: 0px;
}

div.container div.blog div img,
div.container-fluid div.blog div img {
    width: 100%;
}

div.container div.blog h1,
div.container-fluid div.blog h1 {
    color: #8f825a;
    font-size: 2.7rem;
    text-transform: none;
}

div.container div.blog h2,
div.container-fluid div.blog h2 {
    color: #8f825a;
    font-size: 1.8rem;
}

div.container div.blog+section,
div.container-fluid div.blog+section {
    margin-top: 5rem;
}

给出以下HTML

<div class="container">
    <h1>Blog</h1>
    <div class="blog">
            <div>
            <img src="image1">
                <h1>Lorem ipsum dolor sit amet</h1>
                <p>&#xA;      Lorem ipsum dolor sit amet, consectetur adipisicing elit Libero tenetur,&#xA;      earum repudiandae ut fuga qui modi maxime dolorem quo! Id maiores neque rem&#xA;      dignissimos amet velit perspiciatis labore veritatis eligendi.&#xA;    </p>
                <h2>Fred Jones</h2>
                <h3>2014-01-01</h3>
            </div>
            <div>
            <img src="image2">
                <h1>Eum debitis</h1>
                <p>&#xA;      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum debitis culpa modi, illo ullam necessitatibus&#xA;      beatae. Eveniet sequi quos explicabo magni ipsum nostrum asperiores dolore aliquam libero&#xA;      accusantium ullam omnis, sed fugiat dolorem est, quae quaerat deserunt labore delectus. Quis, earum fugit,&#xA;      necessitatibus recusandae perferendis, ducimus dignissimos amet autem ea, consequatur neque!&#xA;    </p>
                <h2>Joe Soap</h2>
                <h3>2014-01-01</h3>
            </div>
            <div>
            <img src="image3">
                <h1>Aliquid nesciunt delectus</h1>
                <p>&#xA;      Ut, sapiente, qui. Lorem ipsum dolor sit amet, consectetur adipisicing elit.&#xA;      Aliquid nesciunt delectus, quae deleniti voluptas neque consequatur,provident perspiciatis laborum culpa&#xA;      corporis fugit earum cupiditate deserunt vero atque harum iste illum officia maxime. Et officia distinctio&#xA;      corrupti repellat! Repellendus, distinctio voluptates, earum quidem dolore facere.&#xA;    </p>
                <h2>Ishmael</h2>
                <h3>2014-01-01</h3>
            </div>
    </div>
</div>

Answer 1

您已在Flex容器上指定了flex: 1。它不适用于那里。

如果您希望它们平均分配容器空间，则需要对项目应用flex: 1。

div.container div.blog,
div.container-fluid div.blog {
    display: flex;
    /* flex: 1; <----------- NOT DOING ANYTHING */
    flex-flow: row nowrap;
}

上述参考代码块（div.container）的父元素不是灵活容器，因此flex无效。

将规则转移到您的弹性项目：

div.container div.blog div, div.container-fluid div.blog div {
    margin: 0 12.5px;
    flex: 1; /* NEW */
}

revised demo

创建宽度相等的弹性盒子

1 个答案: