フレキシブルボックス--事例1
Flexbox nuovo
uno
due
tre
<!DOCTYPE html> <html> <head> <style> .flex{ /* 基本のスタイルの設定 */ width: 350px; height: 200px; border: 1px solid #555; font: 14px Arial; /* flexbox の設定 */ display: -webkit-flex; -webkit-flex-direction: row; display: flex; flex-direction: row; } .flex > div{ -webkit-flex: 1 1 auto; flex: 1 1 auto; width: 30px; /* transition を上手く動作させるために指定します (始めまたは終わりに "width:auto" を指定している場合の transition は現在の Gecko と Webkit では不安定です。 詳細については http://bugzil.la/731886 を参照してください) */ -webkit-transition: width 0.7s ease-out; transition: width 0.7s ease-out; } /* 色の指定 */ .flex > div:nth-child(1){ background : #009246; } .flex > div:nth-child(2){ background : #F1F2F1; } .flex > div:nth-child(3){ background : #CE2B37; } .flex > div:hover{ width: 200px; } </style> </head> <body> <p>Flexbox nuovo</p> <div class="flex"> <div>uno</div> <div>due</div> <div>tre</div> </div> <p><a target="_blank" href="https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Flexible_boxes"> 出展:CSS flexible box の利用</a></p> </body> </html>
フレキシブルボックス--レイアウトの表示例
フレキシブルボックス--レイアウトのソース
<!DOCTYPE html> <html> <head> <style> #main { min-height: 500px; margin: 0px; padding: 0px; display: -webkit-flex; display: flex; -webkit-flex-flow: row; flex-flow: row; } #main > article { margin: 4px; padding: 5px; border: 1px solid #cccc33; border-radius: 7pt; background: #dddd88; -webkit-flex: 3 1 60%; flex: 3 1 60%; -webkit-order: 2; order: 2; } #main > nav { margin: 4px; padding: 5px; border: 1px solid #8888bb; border-radius: 7pt; background: #ccccff; -webkit-flex: 1 6 20%; flex: 1 6 20%; -webkit-order: 1; order: 1; } #main > aside { margin: 4px; padding: 5px; border: 1px solid #8888bb; border-radius: 7pt; background: #ccccff; -webkit-flex: 1 6 20%; flex: 1 6 20%; -webkit-order: 3; order: 3; } header, footer { display: block; margin: 4px; padding: 5px; min-height: 100px; border: 1px solid #eebb55; border-radius: 7pt; background: #ffeebb; } @media all and (max-width: 640px) { #main, #page { -webkit-flex-flow: column; flex-flow: column; } #main > article, #main > nav, #main > aside { -webkit-order: 0; order: 0; } #main > nav, #main > aside, header, footer { min-height: 50px; max-height: 50px; } } </style> </head> <body> <header>header</header> <div id='main'> <article>article <p><a target="_blank" href="https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Flexible_boxes"> 出展:CSS flexible box の利用</a></p> </article> <nav>nav</nav> <aside>aside</aside> </div> <footer>footer </footer> </body> </html>