index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サイトのタイトル</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="myflex">
<div class="myflex-basis-40" style="margin: 1em;">
<img src="flex-test.jpg" />
</div>
<div class="myflex-basis-40" style="margin: 1em;">
ここに色々なテキストを書きます。<br />あいうえお。かきくけこ。
</div>
</div>
<hr>
<div class="myflex">
<div class="myflex-basis-20" style="margin: 1em;">
テキスト１番です。テキスト１番です。テキスト１番です。テキスト１番です。
</div>
<div class="myflex-basis-20" style="margin: 1em;">
アイウエオカキクケコ
</div>
<div class="myflex-basis-20" style="margin: 1em;">
abcdefghijklmnopqrstuvwxyz.
</div>
<div class="myflex-basis-20" style="margin: 1em;">
<img src="flex-test.jpg" />
</div>
</div>
</body>
</html> style.css
/* 画像をBOXのサイズに合わせて拡縮するための設定 */
.myflex img {
width:auto;
height:auto;
max-width:100%;
max-height:100%;
}
.myflex{display:-webkit-flex;display:flex;}
.myflex-col-1{flex:1;}
.myflex-col-2{flex:2;}
.myflex-col-3{flex:3;}
.myflex-col-4{flex:4;}
.myflex-col-5{flex:5;}
.myflex-col-6{flex:6;}
.myflex-basis-10{flex-basis:10%;}
.myflex-basis-20{flex-basis:20%;}
.myflex-basis-30{flex-basis:30%;}
.myflex-basis-40{flex-basis:40%;}
.myflex-basis-50{flex-basis:50%;}
.myflex-basis-60{flex-basis:60%;}
.myflex-basis-70{flex-basis:70%;}
.myflex-basis-80{flex-basis:80%;}
.myflex-basis-90{flex-basis:90%;}
.myflex-basis-100{flex-basis:100%;}
@media screen and (max-width:767px){ /* スマホは1カラム表示 */
.myflex img{max-width:50%;}
.myflex{-webkit-flex-direction:column;flex-direction:column;}
}
実際の挙動
ここに色々なテキストを書きます。
あいうえお。かきくけこ。
あいうえお。かきくけこ。
テキスト１番です。テキスト１番です。テキスト１番です。テキスト１番です。
アイウエオカキクケコ
abcdefghijklmnopqrstuvwxyz.
参考記事