floatとflexは併用できないのか？

以下のようにHTMLとCSSを書いたのですが、floatとflexは併用できないのでしょうか？
flexの部分（yokon)が横並びにならないです。
何が原因でしょうか？
ケアレスミスも目視でみましたが、無かったと思います。
追記
IE11のみ横並びになりません。
CSS

*{
margin:0;
padding:0;
}
#wapper{
width:900px;
margin:20px auto;
}
#header{
margin:20px auto;
padding:15px 20px 10px 20px;
border:solid 1px #CCC;
}
h1{
color:green;
font-size:25px;
}
#contents{
border:solid 1px #CCC;
padding:10px;
}
#left{
float:left;
}
#right{
float:left;
}
.yokon{
dispaly:flex;
display:-webkit-flex;
display:-webkit-box;
}
.clear{
clear:both;
} 
.border{
border-bottom:solid 1px #CCC;
}
div img{
width:10%;
height:auto;
}
#footer{
padding:20px 0px;
border:solid 1px #CCC;
text-align:center;
margin-top:20px;
}

HTML

<!DOCTYPE html>
<html>
<head>
<title>無題ドキュメント</title>
<link rel="stylesheet" type="text/css" href="style3.css">
</head>
<body>
<div id="wapper">
<div id="header">
<h1>test</h1>
<p>testは、～です。</p>
</div>
<!--header_end-->
<div id="contents">
<div>
<p>あかさたなは2まやらわ1あかさたなはまやわあかさたなはまやらわあかさたなはまやわあかさたなはまやらわ
</p>
</div>
<div>
<h2>見出し</h2>
<p>あかさたなは2まやらわ1あかさたなはまやわあかさたなはまやらわあかさたなはまやわあかさたなはまやらわ
</p>
</div>
<div id="left">
<div class="yokon border">
<img src="images/lake1web.jpg" />
<p>あかさたなは2まやらわ</p>
</div>
<div class="yokon border">
<img src="images/lake1web.jpg" />
<p>あかさたなは2まやらわ</p>
</div>
<div class="yokon border">
<img src="images/lake1web.jpg" />
<p>あかさたなは2まやらわ</p>
</div>
</div>
<!--left_end-->
<div id="right">
<div class="yokon border">
<p>あかさたなは2まやらわ</p>
<img src="images/lake1web.jpg" />
</div>
<div class="yokon border">
<p>あかさたなは2まやらわ</p>
<img src="images/lake1web.jpg" />
</div>
<div class="yokon border">
<p>あかさたなは2まやらわ</p>
<img src="images/lake1web.jpg" />
</div>
</div>
<!--right_end-->
<div class="yokon border clear">
<p>あかさたなは2まやらわ</p>
<img src="images/lake1web.jpg" />
</div>
<div>
<h2>見出し</h2>
<p>あかさたなは2まやらわ</p>
</div>
</div>
<!--contents_end-->
<div id="footer">
株式会社トラスト
</div>
<!--footer_end-->
</div>
<!--wapper_end-->
</body>
</html>

kszk311

2018/01/29 14:39

dispaly…。。ここだけで直りますか？

退会済みユーザー

2018/01/29 14:46 編集

直りました。疲れていたのでみつけにくかったと思います。ありがとうございました。質問は解決したので締め切りたいと思いますが、どうしたらいいものか…

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

回答1件

ベストアンサー

改めて回答しておきますね。

CSS
1.yokon{
2display:flex;
3display:-webkit-flex;
4display:-webkit-box;
5}

回答しないと、締めきれないのかな…？

投稿2018/01/29 14:55

kszk311

総合スコア3404

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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

floatとflexは併用できないのか？

関連した質問