【ゴール】
flex-box忘れていたので、振り返り
【コード】
何はともあれ、「display: flex;」を親要素に指定
flex-wrap: wrap;
＊折り返し
＊HTMLにboxとcontentクラスを用意
css.hoge.css
.box{background-color:lightgreen;min-height:200px;widows:100%;display:flex;flex-wrap:wrap;}.content{margin:10px;height:100px;width:30%;background-color:green;justify-content: space-between;
hoge.css
.box{background-color:lightgreen;height:200px;widows:100%;display:flex;justify-content:space-between;align-items:center;}.content{background-color:green;height:100px;width:100px;}justify-content: center;
＊横軸の位置
css.hoge.css
.box{background-color:lightgreen;height:200px;widows:100%;display:flex;justify-content:center;}align-items: center;
＊縦軸の位置
css.hoge.css
.box{background-color:lightgreen;height:200px;widows:100%;display:flex;justify-content:center;align-items:center;}抜けていたので、復習含めて書きました。
bootstrapを使えばあまり使わずすみますが、覚えていて損はないかと
【合わせて読みたい】
■ 【Rails new】Ruby on rails アプリケーション作成
https://qiita.com/tanaka-yu3/items/3fe1ed2852c6513d3583
■ 【devise】 rails g devise:install ができない、、時こそ！！
https://qiita.com/tanaka-yu3/items/8a2002921cda080907f8
■ 【メソッド集】 rails メソッド まとめ 基礎 随時追加
https://qiita.com/tanaka-yu3/items/89abad875187494bec53
