代码之家 › 专栏 › 技术社区 › Sidaqpreet Singh

为什么当设置为包裹时,柔性包裹会导致横轴出现间隙?

flexbox css html

Sidaqpreet Singh · 技术社区 · 11 月前

所以我一直在学习CSS作为一个初学者。最近我在探索flex box。我对柔性包装的原始知识:包装;如果沿着主轴(柔性方向)发生溢出,它会通过将项目包裹在下一行(假设柔性方向:行;)来防止溢出。我似乎不明白的是,为什么它会在横轴上留下间隙?请查看下面的代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Display Flex</title>
    <link rel="stylesheet" href="display_flex.css" />
  </head>
  <body>
    <h1>Flexbox Playground</h1>
    <div id="container">
      <div style="background-color: #9400d3">violet</div>
      <div style="background-color: #4b0082">indigo</div>
      <div style="background-color: #0000ff">blue</div>
      <div style="background-color: #00ff00">green</div>
      <div style="background-color: #ffff00">yellow</div>
      <div style="background-color: #ff7f00">orange</div>
      <div style="background-color: #ff0000">red</div>
    </div>
  </body>
</html>

#container {
    height : 300px;
    width : 80%;
    background-color: azure;
    margin : 10px auto ;
    border : 2px solid black;
    display : flex;
    flex-direction: row;
    flex-wrap: wrap;
}

h1 {
    text-align: center;
}

#container div {
    height : 90px;
    width : 300px;
    color  : white;
    text-align : center;
    font-size: 1.5em;
}

因此,由于我的初始项目高度为100px,我在横轴上没有看到任何错误。但后来我试图将项目的高度从100px降低到50px,我看到横轴(垂直方向)有间隙。我没想到会这样,也不明白是什么导致了这种行为。我附上照片以供参考。第一个是当项目的高度为100px时 first_image 第二种是当高度降低到50px时。 second_image

1 回复 | 直到 11 月前

Paulie_D 11 月前

这是因为默认值为 align-content 是 stretch 将divs分布在父母的身高上。

它需要设置为 start .

#container {
  height: 300px;
  width: 80%;
  background-color: azure;
  margin: 10px auto;
  border: 2px solid black;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: start;
}

h1 {
  text-align: center;
}

#container div {
  height: 90px;
  width: 25%;
  color: white;
  text-align: center;
  font-size: 1.5em;
}

* {
  margin: 0;
  padding: 0;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}

<div id="container">
  <div style="background-color: #9400d3">violet</div>
  <div style="background-color: #4b0082">indigo</div>
  <div style="background-color: #0000ff">blue</div>
  <div style="background-color: #00ff00">green</div>
  <div style="background-color: #ffff00">yellow</div>
  <div style="background-color: #ff7f00">orange</div>
  <div style="background-color: #ff0000">red</div>
</div>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

9 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

9 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

9 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

9 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

9 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

9 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

9 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

10 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

10 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

10 月前