Flexbox を使用してレスポンシブ メッセージ ボードを作成する (翻訳)_html/css_WEB-ITnose

元のリンク: http://tutorialzine.com/2015/11/using-flexbox-to-create-a-sensitive-comment-section/

デモを見る

ソースコードをダウンロード

Flexbox はWeb ページ 強力な新しいレイアウト方法で、一部の困難な Web 開発タスクを簡単にします。現在、ほぼすべてのブラウザーがこれをサポートしているため、今こそフロントエンド開発に組み込む時期です。

そのため、この簡単なチュートリアルでは、Flexbox を使用してメッセージ ボードを構築します。 Flexbox レイアウト モードが提供する興味深い機能をいくつか紹介し、それらを活用する方法を説明します。

使用するもの

Flexbox には大量の CSS プロパティがあります。今日使用するものは次のとおりです:

• display: flex – これにより、フレックス レイアウトがアクティブになり、要素の子がフレックスボックス ルールに従うようになります。
• justify-content - この属性は、子要素を整列させるメソッドを定義します (text-align と同様)。
• order - order は、値が小さいほど、配置される順序を制御できます。デフォルトは 0 です。
• flex-wrap - この属性を使用すると、小さな画面でもサポートを得ることができます。

レイアウト

ゲストブックが次の要件を満たすことを願っています:

• 各メッセージにはアバター、ニックネーム、時間、内容が含まれている必要があります。
• メッセージは 2 種類あり、1 つは作成者 (青い部分と右側のアバター) が書いたもの、もう 1 つは他人が書いたものです。
• コードを通じてコメントを簡単に生成できるようにするには、これら 2 種類の HTML マークアップが可能な限り類似している必要があります。
• ページ全体が応答性が高く、さまざまな画面に適応できます。

HTML

私たちの HTML は非常にシンプルで、メッセージのリストとメッセージ ボックスがあります。

<ulclass="comment-section">     <liclass="comment user-comment">        <divclass="info">            <a href="#">AnieSilverston</a>            <span>4 hoursago</span>        </div>        <a class="avatar" href="#">            <imgsrc="images/avatar_user_1.jpg" width="35" alt="Profile Avatar" title="Anie Silverston" />        </a>        <p>Suspendissegravidasem?</p>    </li>     <liclass="comment author-comment">        <divclass="info">            <a href="#">JackSmith</a>            <span>3 hoursago</span>        </div>        <a class="avatar" href="#">            <imgsrc="images/avatar_author.jpg" width="35" alt="Profile Avatar" title="Jack Smith" />        </a>        <p>Loremipsumdolorsitamet, consecteturadipiscingelit. Suspendissegravidasemsitametmolestieportitor.</p>     </li>     <!-- Morecomments -->     <liclass="write-new">         <formaction="#" method="post">            <textareaplaceholder="Write your comment here" name="comment"></textarea>            <div>                <imgsrc="images/avatar_user_2.jpg" width="35" alt="Profile of Bradley Jones" title="Bradley Jones" />                <buttontype="submit">Submit</button>            </div>        </form>     </li> </ul> 

上記のコードをよく見ると、ユーザー コメントと作成者コメントの 2 つの部分の HTML がほぼ同じであることがわかります。両者のスタイルとレイアウトの違いは、.user-comment と .author-comment の 2 つの CSS クラスに対応する CSS を通じて実装されます。

CSS

Flexbox レイアウトを使用するときに使用される関連テクニックを見てみましょう。すべての CSS スタイルを確認したい場合は、記事の上部で CSS ファイル全体をダウンロードできます。

まず、すべてのコメントに対して display: flex を設定する必要があります。これにより、コメントと子要素で Flexbox プロパティを使用できるようになります。

.comment{  display: flex;} 

これらのフレックス コンテナは、現在のレイアウトの幅を埋め、ユーザー情報、アバター、メッセージ コンテンツを含めることができる必要があります。著者が書いたコメントを右揃えにしたいので、次のプロパティを使用してこれを調整できます。

.comment.author-comment{    justify-content: flex-end;} 

これで、コメントは次のようになります:

これで右揃えになりましたが、要素を逆の順序で表示して、メッセージのコンテンツが最初に表示され、次にアバターと右側の情報。これを行うには、order 属性を使用します。

すごいですね

ご覧のとおり、Flexbox を使用すると、すべてを簡単に実装できます。

私たちのメッセージボードはすでに希望通りの見た目になっています。残っている唯一のことは、小型デバイス上でフレンドリーに表示されることを確認することです。小型デバイスでは画面のスペースが限られているため、コンテンツを読みやすくするために一部のレイアウトをやり直す必要がありました。

メッセージコンテンツをコンテナの幅全体を占めるように拡張するメディアクエリを設定しました。これにより、「flex-wrap」プロパティが「wrap」に設定されているため、アバターとユーザー情報が次の行に移動します。

すごいです

下の画像を見て上の画像と比較することもできます。また、記事の冒頭にある [デモ] をクリックしてブラウザのサイズを変更して、メッセージ ボードの変化を確認することもできます。