ブラウザに上手く表示されない

/*HTML*/
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>フレックスの使い方</title>
	<link rel="stylesheet" href="スタイル.css"> 
	<body>
	<div class="container">
		<div class="item">Item 1</div>
		<div class="item">Item 2</div>
		<div class="item">Item 3</div>
		<div class="item">Item 4</div>
	</div>
</body>
</head>
</html>

/*CSS*/
.container{
	display: flex;
}

HTML

CSS

上記のコードで作ったもの

見本

コードをHTMLとCSSに分けて書いたのですが、見本のようにうまく反映されません。

なにが原因ですか。

ご回答の程、よろしくお願いいたします。

m.ts10806

2020/08/11 23:25 編集

コードは画像ではコピペできませんので、テキストでマークダウンのcode機能にてご提示ください。 https://teratail.com/questions/238564

行動規範の内容に同意します

回答2件

ベストアンサー

display: flexしか書いてないので挙動は正しいと思います

スペースを開けたいならwidthとjustify-content: space-between;を設定したらできると思います
背景の色をつけたいならbackground-colorとかで色を指定するといいと思います

投稿2020/08/12 01:05

koskacts

総合スコア145

画像で提示されているのでコピペできないのですが

下記は画像のコードに対する回答です。

<<title>　

ここでは。（<<と重なっている）

追記：

<link rel="stylesheet" href="スタイル.css">

「Haml」のとのことでRuby on Railsなどのフレームワークから利用しているかもしれませんが、
全角ファイル名（マルチバイト文字の利用）は可能な限り避けた方が良いです。トラブルの元、問題切り分けも難しくします。
こんなHTMLファイル名は嫌だ！知らないと恥ずかしい「名付け」の問題（後編）(1/2)

投稿2020/08/11 23:23

編集2020/08/12 01:54

m.ts10806

総合スコア80875