画面を左中右の3つに分割し、
#item-center
をrem指定で真ん中配置したいと思っています。
ブラウザのビューポートというよりは、文字の大きさに合わせて画面のレイアウトを作ります。
ルートの文字の大きさで真ん中のエリアの横幅を決め、
両側は均等配置するようにします。
例えば、具体的な値を以下のように仮定します。
#container
のwidth
が1000px
1rem
が10px
そのとき、ブラウザでのComputedの値が、下記のようになるのが理想です。
#item-center
のwidth
は70rem
=700px
#item-left
のwidth
は(1000%
-70rem
)/2 = (1000px-700px)/2 = 150px#item-right
のwidth
は(1000%
-70rem
)/2 = (1000px-700px)/2 = 150px
下記のsassはエラーになります。
calcが単位変換でエラーになるからです。
このような計算を実現したいとき、皆さんはどうしていますか?
sass
1* 2 margin: 0px 3 padding 0px 4 overflow: hidden 5#container 6 width: 100% 7 height: 100% 8 display: flex 9 flex-direction: row 10#item-left 11 height: 100% 12 width: calc(100%-70rem)/2 13#item-center 14 height: 100% 15 width: 70rem 16#item-right 17 height: 100% 18 width: calc(100%-70rem)/2
html
1<div id="container"> 2 <div id="item-left"> 3 </div> 4 <div id="item-center"> 5 </div> 6 <div id="item-right"> 7 </div> 8</div>
回答1件
あなたの回答
tips
プレビュー