代码之家 › 专栏 › 技术社区 › Jonas

为什么我必须显示:块项目,以便它们在flexbox中彼此下方对齐?

flexbox forms css html

Jonas · 技术社区 · 4 年前

下面的CSS代码应该使表单的每一项都位于一列中,比如,一列在另一列的下面,但除非我添加代码,否则它不会工作:

input {
    display:block;
}

#flex 规则块?

    * {
        box-sizing: border-box;
        margin: 0;
        padding:0
    }
    
    #flex {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        align-content: center;
        justify-items: center;
        height: 90vh;
    }

<div id='flex'>
      <form id='something'>
                <input type='email' />
                <input type='password' />
                <button>Entrar</button>
            </form>
            </div>

2 回复 | 直到 4 年前

Johannes 4 年前

你的 #flex #something ,因此flex设置几乎没有效果,它们肯定不会影响孙子辈 input 和 button ,但只有直接的孩子( )。将您的设置应用于 #某物 -这将产生你所要求的效果,因为它会直接影响你的孩子 :

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

#something {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  justify-items: center;
  height: 90vh;
}

<div id='flex'>
  <form id='something'>
    <input type='email' />
    <input type='password' />
    <button>Entrar</button>
  </form>
</div>

Alohci 4 年前

display:contents

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

#something {
    display:contents;
}
    
#flex {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    justify-items: center;
    height: 90vh;
}

<div id='flex'>
  <form id='something'>
      <input type='email' />
      <input type='password' />
      <button>Entrar</button>
  </form>
</div>

推荐文章

JWWalker · CSS的resize属性可以用来调整flex列宽吗?

1 年前

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

1 年前

rifx · 在kendoTreeViewNodeTemplate(Angular)中设置数据项的样式

1 年前

Fox L · 每行4个项目,但如果少于4个项目则留空?

1 年前

Zack Riquelme · 如何使用CSS将HTML的<header>中的<a>和<nav>内容在同一个父框中左右拆分?

1 年前

JobHunter69 · 为什么这个组件不填充整个宽度?

1 年前

Vasantha Kalyani · Flexbox Html CSS设置位置问题[重复]

1 年前

coder · 边界半径不适用于容器元素

2 年前

user9026 · 项目登录页面(freecodecamp)定价设计

2 年前

Bo Thompson · 根据需要调整柔性物品的高度,但不得超过容器

2 年前