Question

此刻我的div中有一些奇怪的行为，每个div都像其他div一样（它们只是镜像）。文字正在模仿列，并且并排设置，而不是像它应该的那样从上到下。最奇怪的是，它似乎在另一个页面上正常工作，这个特定的页面只包含行为。

代码是这样的

<div class="flex-wrap">

    <div class="flex">
        <h3>A title</h3>
        <p>some text</p>
    </div>
    <div class="flex">
        <h3>A title</h3>
        <p>some text</p>
    </div>

</div>

<style>
.flex-wrap{
    display:flex;
    flex-wrap:wrap;
}
.flex{
    display:flex;
    align-items: center;
}
</style>

我在检查工具中逐一区分了这一点，我更加困惑的是为什么它在一个页面上正常工作而在另一个页面上完全没有。最后一节使用相同的css布局，它只包含不同的图片和文本。谁能告诉我如何解决这个问题？奖金积分，如果你能告诉我为什么。

Answer 1

首先要记住的是，flex布局仅适用于父元素和子元素。儿童以外的弹性容器中的后代不参与弹性布局。

在“破碎的页面”中，四个并排的段落元素是弹性容器（.tours-sec-3-p2-wrap）的子元素。

.tours-sec-3-p2-wrap {
    padding: 2%;
    align-items: center;
    display: flex;
    background-size: 15%;
    padding-top: 0;
    background-position: 0px 30%;
    background-repeat: no-repeat;
}

弹性容器的初始设置为flex-direction: row，因此子项（弹性项目）排成一排。快速简便的解决方案是使用flex-direction: column覆盖默认值。

在“正常工作”页面中，图像和段落不是 Flex容器的子项。这些元素是块容器的子元素，该容器是flex容器的子元素。

您的图片和文字与浮动，而非柔性，属性对齐。

如果要使用flex属性，请将display: flex添加到父元素。

Answer 2

如果您不想使用flex-direction：column;你可以让你的元素拉伸到100％宽度来强制包裹。

＆＃13;

.flex-wrap{
    display:flex;
    flex-wrap:wrap;
}
.flex{
    display:flex;
    align-items: center;
    flex-wrap:wrap; /* added  */
}
.flex,
.flex h3,
.flex p
 {
    width: 100%;
}

＆＃13;

<div class="flex-wrap">
  <div class="flex">
    <h3>A title</h3>
    <p>some text</p>
  </div>
  <div class="flex">
    <h3>A title</h3>
    <p>some text</p>
  </div>
</div>

＆＃13;

justify-content: center的额外提示和包装后左对齐的文字。（运行代码段）

＆＃13;

.flex-wrap{
    display:flex;
    flex-wrap:wrap;
    flex-direction: column;
}
.flex {
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.text-centered {
  text-align: center;
}

＆＃13;

<div class="flex-wrap">
  <div class="flex">
    <h3>Centered (but it hasn't wrapped)</h3>
    <p>centered text</p>
  </div>
  <div class="flex">
    <h3>Not Centered (after wrap)</h3>
    <p>sometimes you'll want to use justify-content: center; and  keep the text centered along with whatever other elements are inside the div. You'll see in the 2nd example the text aligns left after it wraps. Add text-align: center; and it will center the text.</p>
  </div>
  <div class="flex text-centered">
    <h3>Centered</h3>
    <p>sometimes you'll want to use justify-content: center; and  keep the text centered along with whatever other elements are inside the div. You'll see in the 2nd example the text aligns left after it wraps. Add text-align: center; and it will center the text.</p>
  </div>
</div>

＆＃13;

Answer 3

尽管有人相信，每个部分的布局都完全相同。它们是用cms生成的，它们不是静态页面。

也就是说，由于每个flex容器中内容的长度，2之间的行为只是不同。将相同内容添加到游览页面会产生相同的行为。

问题确实是通过flex-direction解决的：列;另外添加justify-content：center;

flexbox正在并排设置我的所有文字

3 个答案: