質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1270閲覧

flexboxにおける子要素の位置が揃わない

Yamachoo

総合スコア19

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2019/03/14 11:46

前提・実現したいこと

現在、airbnbのページ模写をしており、レスポンシブ化したところ、サイズを小さくした際に、flexboxを設定している部分の真ん中の子要素がずれてしまいます。
この子要素を上部揃えにしたいです。
イメージ説明

該当のソースコード

html

1 <div class="concepts-wrap"> 2 <div class="container"> 3 <h2>いつも完璧な贈りもの</h2> 4 <div class="consepts"> 5 <div class="consept"> 6 <img src="img/icon_1.png"> 7 <h3>簡単に使える</h3> 8 <p>ギフトカードはメールで届きます。Airbnbアカウントへのギフト登録も超かんたん。</p> 9 </div> 10 <div class="consept"> 11 <img src="img/icon_2.png"> 12 <h3>有効期限なし</h3> 13 <p>Airbnbギフトカードは無期限。だから友達も時間をかけて旅をプランできます。</p> 14 </div> 15 <div class="consept"> 16 <img src="img/icon_3.png"> 17 <h3>忘れられない旅</h3> 18 <p>お家は100万件以上あるので、ずっと住みたいと憧れていた街の暮らしも叶います。</p> 19 </div> 20 </div> 21 </div> 22 </div>

css

1* { 2 font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; 3 margin: 0; 4 padding: 0; 5 box-sizing: border-box; 6} 7 8.container { 9 max-width: 1050px; 10 margin: 0 auto; 11} 12 13/* concepts-wrap */ 14 15.concepts-wrap { 16 text-align: center; 17 margin: 50px 0; 18} 19 20.concepts-wrap h2 { 21 font-size: 32px; 22 color: #484848; 23 margin-bottom: 40px; 24} 25 26.concepts { 27 display: flex; 28 margin: 0; 29} 30 31.consepts img { 32 height: 50px; 33 width: 50px; 34} 35 36.consepts h3 { 37 font-size: 18px; 38 color: #484848; 39 margin: 20px 0; 40} 41 42.consepts p { 43 font-size: 16px; 44 color: #767676; 45} 46 47.consept { 48 display: inline-block; 49 width: 32%; 50} 51 52.consept p { 53 width: 98%; 54} 55 56/* resposive */ 57 58@media(max-width: 1100px) { 59 .header-right { 60 display: none; 61 } 62 63 .top-wrap .container { 64 max-width: 650px; 65 } 66 .concepts-wrap .container { 67 max-width: 650px; 68 } 69 .mid-wrap .container { 70 max-width: 650px; 71 } 72 73}

試したこと

aline-itemsのflex-startやalign-selfのflex-startなどを試してみましたが何も変化はありませんでした。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yoshinavi

2019/03/14 12:53

子要素に「inline-block」がありますが、flexで並べるのなら不要です。
guest

回答1

0

ベストアンサー

css

1.concepts { 2 display: flex; 3 margin: 0; 4}

ここのCSSのクラス指定が間違っていると思われます。
.conceptsではなく**.consepts**に変更してください。

投稿2019/03/14 12:22

編集2019/03/14 12:23
gogojp

総合スコア211

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Yamachoo

2019/03/14 14:13

ありがとうございます。 ご指摘をもとに見直してみたところ、conceptをconseptと書いてあるところが何個かあったため、それをすべて統一したところ、無事に表示されました!
gogojp

2019/03/14 14:19

解決されて何よりです。 スペルミスはよくあることなので、おかしいなと思ったらまず初歩的なところを確認してみると良いと思います。 またデベロッパーツールを活用して、しっかり要素にCSSが適用されてるか確認するのも1つの方法です。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問