问我有一个集装箱，它是灵活的，合理的中心和对齐的中心。当我在其中创建另一个flex项时，间隔空间不起作用。
EN

Stack Overflow用户

提问于 2022-08-26 16:00:37

回答 1查看 24关注 0票数 0

容器具有挠性和居中的水平和垂直的
，我创建了两个div，它们被放置为按列排列的
，现在我有了第三个div，它给了一个带行的flex，需要在两者之间显示空间，但在这里之间的空格不工作，这是代码

<style>
      
       .flex{
           width: 100vw;
           height: 100vh;
           border: 1px solid black;
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;

       }
       .flex1,.flex2{
           width: 300px;
           border: 1px solid black;
       }
       .flex3{
           display: flex;
           justify-content: space-between;
       }
      
    </style>
<body>
    <div class="flex">
        <div class="flex1">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Recusandae alias dolorum cum sunt necessitatibus facere eveniet corrupti fugit fuga excepturi.</div>
        <div class="flex2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Commodi vero iste voluptates, exercitationem voluptate cum id quo rem placeat nemo.</div>
    
         <div class="flex3">
             <div class="flex4">
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio, cum.
             </div>
             <div class="flex5">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro, nostrum.
            </div>
         </div>
    </div>

</body>

.flex {
  width: 100vw;
  height: 100vh;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.flex1,
.flex2 {
  width: 300px;
  border: 1px solid black;
}

.flex3 {
  display: flex;
  justify-content: space-between;
}

<body>
  <div class="flex">
    <div class="flex1">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Recusandae alias dolorum cum sunt necessitatibus facere eveniet corrupti fugit fuga excepturi.</div>
    <div class="flex2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Commodi vero iste voluptates, exercitationem voluptate cum id quo rem placeat nemo.</div>
    <div class="flex3">
      <div class="flex4">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio, cum.
      </div>
      <div class="flex5">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro, nostrum.
      </div>
    </div>
  </div>
</body>

html

css

flexbox

回答 1

Stack Overflow用户

发布于 2022-08-26 16:10:29

如果align-items不是默认的stretch，那么Flex项在默认情况下仅与其内容一样宽。你需要给flex3一个宽度，大概是100%。

.flex {
  width: 100vw;
  height: 100vh;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.flex1,
.flex2 {
  width: 300px;
  border: 1px solid black;
}

.flex3 {
  width: 100%; /* <=== */
  display: flex;
  justify-content: space-between;
}

<div class="flex">
  <div class="flex1">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Recusandae alias dolorum cum sunt necessitatibus facere eveniet corrupti fugit fuga excepturi.
  </div>
  <div class="flex2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Commodi vero iste voluptates, exercitationem voluptate cum id quo rem placeat nemo.
  </div>
  <div class="flex3">
    <div class="flex4">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio, cum.
    </div>
    <div class="flex5">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro, nostrum.
    </div>
  </div>
</div>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73503712

复制

相似问题

问我有一个集装箱，它是灵活的，合理的中心和对齐的中心。当我在其中创建另一个flex项时，间隔空间不起作用。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我有一个集装箱，它是灵活的，合理的中心和对齐的中心。当我在其中创建另一个flex项时，间隔空间不起作用。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我有一个集装箱，它是灵活的，合理的中心和对齐的中心。当我在其中创建另一个flex项时，间隔空间不起作用。
EN