レスポンシブでフォームを縦並びにしたい・

Question

初めて投稿させて頂きます。
コーディング初心者、ポートフォリオを作成しているところで躓いております。

PC版でフォームの要素を横並びにしたのですが、
レスポンシブでどうしても縦並びになってくれません・・。
display:flex, flex-direction:column; など、色々と試しておりますが
どこが間違っておりますでしょうか。
ご回答いただけますと幸いです。

 <form action="#" method="post">
            <div class="form">
              <div class="form-item">
                <p class="label">お名前</p>
                <input type="text" class="input" placeholder="例）山田太郎">
              </div>
              <div class="form-item">
                <p class="label">メールアドレス</p>
                <input type="email" class="input" placeholder="例）[e-mail]">
              </div>
              <div class="form-item">
                <p class="label">お問い合わせ内容</p>
                <textarea class="textarea"></textarea>
              </div>
            </div>

@media screen and (max-width: 480px) {
  .form {
    margin-top: 40px;
  }
  .form-item {
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 16px;
    padding-bottom: 16px;
    display:flex;
  }
  .label {
    align-items: center;
    font-size: 15px;
    display:flex;
    flex-direction: column;
  }
  .input {
    margin-left: 0;
    margin-top: 18px;
    height: 40px;
    font-size: 15px;
  }
  .textarea {
    margin-top: 18px;
    margin-left: 0;
    height: 200px;
    font-size: 15px;
  }

Comments

[Lhankor_Mhy]

「PC版でフォームの要素を横並びにした」時のCSSをご提示ください。

[designmom]

ご覧頂きありがとうございます。
PC版はこちらになります。

.form-item {
padding-top: 20px;
padding-left: 2 0px;
width: 100%;
display: flex;
align-items: center;
}

.label {
width: 100%;
max-width: 248px;
letter-spacing: 0.05em;
text-align: right;
}

.input {
border: 1px solid #ddd;
border-radius: 6px;
margin-left: 40px;
padding-left: 1em;
padding-right: 1em;
height: 40px;
flex: 1;
width: 100%;
max-width: 410px;
background: #eaedf2;
font-size: 18px;
}

Answer 1

flexレイアウトの コンテナと アイテム の関係が理解できていないようですね。下記などで確認してください。

もう迷わない！CSS Flexboxの使い方を徹底解説 | Web Design Trends

.label と .inputを縦並びにしたいのなら、display:flex; flex-direction:column;は親要素(コンテナ)の.form-itemに設定します。

  .form-item {
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 16px;
    padding-bottom: 16px;
    display:flex;
    flex-direction: column; /* 追加 */
  }
  .label {
    align-items: center;
    font-size: 15px;
  /*  display:flex;
    flex-direction: column; 削除 */
  }

Comments

[designmom]

ありがとうございます。教えていただいた通りにも何度か試しているのですが、反映されないのです・・。ここ以外に問題があるということが考えられますでしょうか。

[designmom]

ちなみに、PC版のコードにおいて、”.form-item"内のdisplay:flexを試しに削除すると、PC版ではもちろんですがSP版でも横並びは解除されて縦並びになります。PC版だけ横並びにならないのは、他の部分が影響しているのでしょうか・・。

[hatena19]

提示のコードだけだと縦並びになりますので、提示されていない他の部分が影響しているのでしょうね。
確認用サンプル↓
https://codepen.io/hatena19/pen/rNYvYBj

> C版のコードにおいて、”.form-item"内のdisplay:flexを試しに削除すると、PC版ではもちろんですがSP版でも横並びは解除されて縦並びになります。

それならSP版の .form-item に display: block; を設定すればどうでしょう。

[designmom]

ありがとうございます。ごへんしん遅くなりまして申し訳ありません。
display:blockでも解除できなかったのですが、メディアクエリで、480pxとなっていたブレイクポイントを試しに600pxにしたら、縦並びになりました。テキストの通りに480で設定していたのですが、、。とりあえず反映されましたので良かったです。ありがとうございました。

Answer 2

要素を横並びにする方法はdisplay: flex;以外にもいくつかあります。
今回（PCで横並び、SPで縦並びをレスポンシブで）の場合、floatプロパティで、横並びしていた要素が画面サイズが小さくなったらカラム落ちして縦並びになる、という風にするのはいかがでしょうか？

<div class="formtest">
  <div>
    <p>フォームてすと1</p>
    <input type="text">
  </div>
  <div>
    <p>フォームてすと2</p>
    <input type="text">
  </div>
  <div>
    <p>フォームてすと3</p>
    <input type="text">
  </div>
</div>

.formtest {
  border: 1px solid #000;
  border-radius: 5px;
  overflow: hidden;
}
.formtest > div {
  clear: both;
}
p,
input {
  float: left;
  margin: 1em;
  white-space: nowrap;
}
input {
  width: 300px;
}

Comments

[designmom]

ありがとうございます。
こちらは、PC版もflexではなく、floatにする必要がありますでしょうか。