如何解决Flexbox导致并排元素
我正在尝试在以下代码段中使用flexbox。
但是，标头和它下面的div似乎没有CSS样式。如果我删除容器div中的flexbox设置，则标题将显示在div窗体顶部。但是，当我添加display flex时，它将标题和div并排放置。
为什么会这样？我正在尝试在顶部显示标题，并在其下方形成div，然后以justify-content：center水平居中。谢谢。
.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>解决方法
您想使用flex-direction属性。它具有四个值：
-
row -
column -
row-reverse -
column-reverse
您要为此编辑容器类：
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
有关订购弹性商品的更多信息，请参见docs
修改：
您可以使用flex-flow属性，该属性是用于以下目的的css-shorthand属性：
gst-launch-1.0 imxv4l2videosrc device=/dev/video0 fps-n=30 imx-capture-mode=0 ! textoverlay name=overlay text=\"Overlay text here\" valignment=top halignment=left font-desc=\"Sans,22\"! gdkpixbufoverlay name=imageoverlay location=/home/user/LZ_50/CamOverlay.png ! imxg2dvideotransform ! imxg2dvideosink framebuffer=/dev/fb1 use-vsync=true sync=false"的默认行为是对齐项目。您可以通过添加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;
},
尝试一下：
.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>,
使用flex-flow:column来容器
.container {
display: flex;
flex-flow: column;
}
在标题下方添加样式，以使标题内的内容与居中对齐。
header {
align-items: center;
justify-content:center;
display:flex;
flex-flow:column;
}
尝试此代码段
.container {
display: flex;
flex-flow: column;
}
header {
border: 1px solid black;
margin-bottom: 10px;
align-items: center;
justify-content:center;
display:flex;
flex-flow:column;
}
#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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。