文章/答案/技术大牛

发布

社区首页 >问答首页 >Flexbox导致并排的元素。

问Flexbox导致并排的元素。
EN

Stack Overflow用户

提问于 2020-08-19 06:12:31

回答 4查看 683关注 0票数 0

我试图在下面的片段中使用flexbox。

但是，标题和它下面的div似乎没有得到CSS样式。如果删除容器div中的flexbox设置，则头显示在表单div的顶部。但是当我添加display时，它会将标题和div并排放在一起。

这一切为什么要发生？我试图显示标题在顶部和形式div在它下面，然后水平中心与合理-内容:中心。谢谢。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

header {
  border: 1px solid black;
}

#form {
  border: 1px solid black;
}

<div class="container">
  <header>
    <h1 id="title">Survey Form</h1>
    <p id="description">Thank you for helping us improve by taking this survey.</p>
  </header>
  <div id="form">
  <form id="survey-form">
    <div class="form-group">
      <label id="name-label" for="name">Name</label>
      <input type="text" id="name" name="name" placeholder="Enter your name" required>
    </div>
    <div class="form-group">
      <label id="email-label" for="email">Email</label>
      <input type="email" id="email" name="email" placeholder="Enter your email" pattern=".+@.+\..+" required>
     <div>
    <div class="form-group">
      <label id="number-label" for="number">Age (optional)</label>
      <input type="number" id="number" name="age" placeholder="Enter your email" min="1" max="200" required>
    <div class="form-group">
      <p>What's your coding experience?</p>
      <label>
        <input type="radio" name="user-experience" value="noob" class="input-radio" />
        Noob
      </label>
            <label>
        <input type="radio" name="user-experience" value="dangerous" class="input-radio" checked/>
        Dangerous
      </label>
            <label>
        <input type="radio" name="user-experience" value="veteran" class="input-radio" />
        Veteran
      </label>
    </div>
    <div class="form-group">
      <p>What programing language do you use the most at work?</p>
      <select id="dropdown" class="form-group" name="language" required>
        <option disabled selected value>Select a language</option>
        <option value="java">Java</option>
        <option value="javascript">JavaScript</option>
        <option value="python">Python</option>
        <option value="c++">C++</option>
        <option value="c">C</option>
        <option value="c#">C#</option>
        <option value="php">PHP</option>
        <option value="ruby">Ruby</option>
      </select>
    </div>
      <div class="form-group">
      <p>Do you like to work on the Front-end or Back-end? <span class="clue">(Check all that apply)</span</p>
      <label>
        <input name="prefer" value="front-end-projects" type="checkbox" class="input-checkbox" />Front-end
      </label>
      <label>
        <input name="prefer" value="back-end-projects" type="checkbox" class="input-checkbox" />Back-end
      </label>
    </div>
    <div class="form-group">
      <p>Please provide any comments if we missed anything?</p>
      <textArea id="comments" name="comment" placeholder="Place your comments here..."></textArea>
     <div>
    <div class="form-group">
      <button type="submit" id="submit" class="submit-button">Submit</button>
    <div>
  </form>
       </div>
</div>

html

css

flexbox

回答 4

Stack Overflow用户

回答已采纳

发布于 2020-08-19 06:18:37

您想要使用flex-direction属性。它需要四个价值：

row
column
row-reverse
column-reverse

您需要编辑容器类如下：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

有关排序Flex项的更多信息，请参见文档

编辑

您可以使用flex-flow属性，它是css的缩写属性，用于：

票数 3

Stack Overflow用户

发布于 2020-08-19 06:15:58

display: flex的默认行为是对齐一行中的项。您可以通过添加flex-flow: column来对齐列中的项来更改这一点。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column; /* added flex-flow: column here*/
}

header {
  border: 1px solid black;
}

#form {
  border: 1px solid black;
}

<div class="container">
  <header>
    <h1 id="title">Survey Form</h1>
    <p id="description">Thank you for helping us improve by taking this survey.</p>
  </header>
  <div id="form">
  <form id="survey-form">
    <div class="form-group">
      <label id="name-label" for="name">Name</label>
      <input type="text" id="name" name="name" placeholder="Enter your name" required>
    </div>
    <div class="form-group">
      <label id="email-label" for="email">Email</label>
      <input type="email" id="email" name="email" placeholder="Enter your email" pattern=".+@.+\..+" required>
     <div>
    <div class="form-group">
      <label id="number-label" for="number">Age (optional)</label>
      <input type="number" id="number" name="age" placeholder="Enter your email" min="1" max="200" required>
    <div class="form-group">
      <p>What's your coding experience?</p>
      <label>
        <input type="radio" name="user-experience" value="noob" class="input-radio" />
        Noob
      </label>
            <label>
        <input type="radio" name="user-experience" value="dangerous" class="input-radio" checked/>
        Dangerous
      </label>
            <label>
        <input type="radio" name="user-experience" value="veteran" class="input-radio" />
        Veteran
      </label>
    </div>
    <div class="form-group">
      <p>What programing language do you use the most at work?</p>
      <select id="dropdown" class="form-group" name="language" required>
        <option disabled selected value>Select a language</option>
        <option value="java">Java</option>
        <option value="javascript">JavaScript</option>
        <option value="python">Python</option>
        <option value="c++">C++</option>
        <option value="c">C</option>
        <option value="c#">C#</option>
        <option value="php">PHP</option>
        <option value="ruby">Ruby</option>
      </select>
    </div>
      <div class="form-group">
      <p>Do you like to work on the Front-end or Back-end? <span class="clue">(Check all that apply)</span</p>
      <label>
        <input name="prefer" value="front-end-projects" type="checkbox" class="input-checkbox" />Front-end
      </label>
      <label>
        <input name="prefer" value="back-end-projects" type="checkbox" class="input-checkbox" />Back-end
      </label>
    </div>
    <div class="form-group">
      <p>Please provide any comments if we missed anything?</p>
      <textArea id="comments" name="comment" placeholder="Place your comments here..."></textArea>
     <div>
    <div class="form-group">
      <button type="submit" id="submit" class="submit-button">Submit</button>
    <div>
  </form>
       </div>
</div>

票数 1

Stack Overflow用户

发布于 2020-08-19 06:20:53

试试这个：

.container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: fit-content;
  margin: auto;
}

header {
  border: 1px solid black;
}

#form {
  border: 1px solid black;
}

<div class="container">
  <header>
    <h1 id="title">Survey Form</h1>
    <p id="description">Thank you for helping us improve by taking this survey.</p>
  </header>
  <div id="form">
  <form id="survey-form">
    <div class="form-group">
      <label id="name-label" for="name">Name</label>
      <input type="text" id="name" name="name" placeholder="Enter your name" required>
    </div>
    <div class="form-group">
      <label id="email-label" for="email">Email</label>
      <input type="email" id="email" name="email" placeholder="Enter your email" pattern=".+@.+\..+" required>
     <div>
    <div class="form-group">
      <label id="number-label" for="number">Age (optional)</label>
      <input type="number" id="number" name="age" placeholder="Enter your email" min="1" max="200" required>
    <div class="form-group">
      <p>What's your coding experience?</p>
      <label>
        <input type="radio" name="user-experience" value="noob" class="input-radio" />
        Noob
      </label>
            <label>
        <input type="radio" name="user-experience" value="dangerous" class="input-radio" checked/>
        Dangerous
      </label>
            <label>
        <input type="radio" name="user-experience" value="veteran" class="input-radio" />
        Veteran
      </label>
    </div>
    <div class="form-group">
      <p>What programing language do you use the most at work?</p>
      <select id="dropdown" class="form-group" name="language" required>
        <option disabled selected value>Select a language</option>
        <option value="java">Java</option>
        <option value="javascript">JavaScript</option>
        <option value="python">Python</option>
        <option value="c++">C++</option>
        <option value="c">C</option>
        <option value="c#">C#</option>
        <option value="php">PHP</option>
        <option value="ruby">Ruby</option>
      </select>
    </div>
      <div class="form-group">
      <p>Do you like to work on the Front-end or Back-end? <span class="clue">(Check all that apply)</span</p>
      <label>
        <input name="prefer" value="front-end-projects" type="checkbox" class="input-checkbox" />Front-end
      </label>
      <label>
        <input name="prefer" value="back-end-projects" type="checkbox" class="input-checkbox" />Back-end
      </label>
    </div>
    <div class="form-group">
      <p>Please provide any comments if we missed anything?</p>
      <textArea id="comments" name="comment" placeholder="Place your comments here..."></textArea>
     <div>
    <div class="form-group">
      <button type="submit" id="submit" class="submit-button">Submit</button>
    <div>
  </form>
       </div>
</div>

票数 0

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

原文链接：

https://stackoverflow.com/questions/63480963

复制

相似问题

问Flexbox导致并排的元素。
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Flexbox导致并排的元素。EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Flexbox导致并排的元素。
EN