Question

我创建了一个表单

想知道如何使用flexbox使其响应。

我是flexbox的新手，所以我还在努力。

这是我的HTML：

    <div class="form">

    <form action="#">
            <div>
                    <p class="title">BORGE</p>

                    <p>
                            <label for="email">E-mail : </label>
                            <input type="email" id="email">
                    </p>

                    <p>
                            <input type="submit" value="Register" class="btn">
                    </p>
            </div>

    </form>


</div>

任何想法如何在其上加入flexbox？

如果你能告诉我JSFIDDLE。

Answer 1

该代码中存在很多噪音。下次提交问题时，请尝试清理一下。

您没有指定您希望两个表单彼此相邻，所以我只使用了一个类似于您的示例。

body{
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
}

.form{
  border: 1px solid #555555;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
}

.title{
  font-size: 25px;
}

.btn {
  position: relative;
  vertical-align: top;
  height: 40px;
  width: 25%;
  padding: 0;
  font-size: 15px;
  color: white;
  text-align: center;
  background: #4d4d4d;
  border: 0;
  border-bottom: 2px solid #d0d0d0;
  cursor: pointer;
    margin-left: auto;
}

input:not([type="submit"]){
  flex: 1;
  padding: 10px 20px;
  box-sizing: border-box;
}

p {
  display: flex;
}

label {
    width: 7em;
    margin-right: .5em;
}

@media (max-width: 600px) {
  p {
    display: block;
  }
  input {
    width: 100%;
  }
  
  input[type="submit"] {
    width: 100%;
  }
}

<div class="form">

<form action="#">
		<div>
				<p class="title">BORGE</p>
				<p>
						<label for="first name">User Name : </label>
						<input type="text" id="first_name" autofocus>
				</p>
				<p>
						<label for="last name"> Last name : </label>
						<input type="text" id="last_name">
				</p>
				<p>
						<label for="email">E-mail : </label>
						<input type="email" id="email">
				</p>

				<p>
						<input type="submit" value="Register" class="btn">
				</p>
		</div>

</form>
  
</div>

Answer 2

/* 3- fluid textarea */
div + div {
    display: flex;
    flex-direction: column;
}
textarea {
    flex: 1; /* fluid height */
    display: block; /* IE fix */
}


/* Decoration */

body {
    max-width: 1000px;
    margin: auto;
    padding: 1em;
    background:rgba(0,0,0,.1);
    color: #333;
    font-size: 1.4em;
    font-family: georgia, "trebuchet ms", arial, serif;
}

h1 {
    margin-top: 20px;
    margin-bottom: 40px;
    color: #345;
    text-shadow: 1px 1px 1px #fff;
}
form > div {
    padding: 1em;
    background: #fff;
    border: 1px solid gray;
    border-radius: 4px;
}
input,
textarea {
    padding: .3em;
    border: 1px solid #555;
    border-radius: 4px;
    font-family: inherit;
    font-size: inherit;
  background: rgba(0,0,0,.02);
}
input:focus,
textarea:focus {
    outline: none;
}
input[type="submit"] {
    padding: .3em 1em;
    background: #555;
    border: none;
    color: #fff;   
    border-radius: 4px;
    cursor: pointer;
}

我认为这就是答案。

创建表单响应？

2 个答案: