HTMLとCSSのFlexBoxについて。 Flexを使って以下のようなレイアウトを作成するにはどうしたら良いでしょうか?

画像

ベストアンサー

0

ThanksImg質問者からのお礼コメント

無事できました。ありがとうございました!

お礼日時:5/19 10:20

その他の回答(1件)

1

1150201903さん >・・・4つを25%にしたいのと、その中の要素は80%にした上で中央寄せに・・・・・・・ ご参考に↓ *なお、背景色を付けて、分かり易くしています。不要なら削除して下さい・ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <style> .main-wrapper{ width:1170px; height:580px; text-align:center; margin:0 auto; background:#eee; /* 追加 */ } .main-wrapper .container{ margin:0 auto; background:#efe; /* 追加 */ } .learning-contents{ display:flex; background:#fee; position:relative; justify-content:space-around; /* 追加 */ } .learning-contents div{ background:#eef; flex-basis:20%; } /* 追加 */ .learning-tittle{ margin-top:80px; margin-bottom:50px; font-weight:normal; } </style> </head> <body> <div class="main-wrapper"> <div class="container"> <h2 class="laering-title">Learn Where to Get Started!</h2> <div class="learning-contents"> <div class="box hc"> <img src="https://prog-8.com/images/html/advanced/html.png" alt="" /> <p>HTML & CSS</p> <p>ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p> </div> <div class="box jq"> <img src="https://prog-8.com/images/html/advanced/jQuery.png" alt="" /> <p>jQuery</p> <p>素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax(エイジャックス)を使って外部ファイルを読み込んだりと色々なことができます。</p> </div> <div class="box rb"> <img src="https://prog-8.com/images/html/advanced/ruby.png" alt="" /> <p>Ruby</p> <p>オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p> </div> <div class="box ph"> <img src="https://prog-8.com/images/html/advanced/php.png" alt="" /> <p>PHP</p> <p>HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p> </div> </div> </div> </div> </body> </html>

1人がナイス!しています

この返信は削除されました