サイドバー
css:flex
目次
flexbox
【CSS】Flexboxの使い方を徹底解説！基本から実践まで(サンプルあり)
- index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flexcontainer</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div id="makeImg"class="flexcontainer"/> <div class="flexitem item1">Item 1</div> <div class="flexitem item2">Item 2</div> <div class="flexitem item3">Item 3</div> </body> </html>
- style.css
.flexcontainer{ //display:flex; } .flexitem{ width: 100%; height: 100px; text-align: center; } .item1{ background: #faa6a6;; } .item2{ background: #8bbaff; } .item3{ background: #f3ffbe; }
displayの指定なし
display:flex(flex-direction:row)
- style.css
.flexcontainer{ display:flex; flex-direction:row; // デフォルトrow } ...
display:flex(flex-direction:column)
- style.css
.flexcontainer{ display:flex; flex-direction:column; }
flex-wrap:wrap
<code css style.css>
.flexcontainer{
display:flex; flex-direction:row; flex-wrap:wrap;
}
.flexitem{
width: 200px; height: 100px; text-al
}
css/flex.txt · 最終更新: 2020/09/21 17:00 by ips
