Vue 水平レイアウト flex を使用した 1 プロポーショナル組版

質問

下の写真はサイトのタイトルで、解像度1kでは余白を調整することでセンタリング効果が得られますが、解像度2kでは下の写真のようにゴーストになり、タイトルが左に傾いてしまいます。

どのズームでもタイトルが常に中央にあることを願っています もちろん、方法はたくさんありますが、ここでは 1 つの方法のみを記録します。

解決

フレックス レイアウトを使用して
、最初の行をまず classLeft、classCenter、classRight の 3 つの部分に分割します.この部分の比率は 1:5:1 です.もちろん、この比率を自分で設定することもできます.
次に、classCenter では、内部のコンテンツ classTitle を中央に配置し、classRight では、内部のコンテンツを右に配置する必要があります。

コード

上記の各フレームは div である
ため、classRow にはフレックス レイアウトが必要です。

.classRow{
    
    
   display:flex;
}

classLeft の場合、幅は 1 パーツを占めます

.classLeft{
    
    
   box-flex: 1;/*灵活度*/
  -webkit-box-flex: 1; /* Safari and Chrome */
  -moz-box-flex: 1; /* Firefox */
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

classCenter の場合、幅は 5 つの部分を占めます

.classCenter{
    
    
  box-flex: 5;
  -webkit-box-flex: 5;
  -moz-box-flex: 5;
  -webkit-flex: 5;
  -ms-flex: 5;
  flex: 5;
 }

classRight の場合、幅は 1 つだけを占めます

.classRight{
    
    
   box-flex: 1;/*灵活度*/
  -webkit-box-flex: 1; /* Safari and Chrome */
  -moz-box-flex: 1; /* Firefox */
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

classCenter では、内部のコンテンツを中央に配置する必要があります。フレックス レイアウト justify-content:center to center を使用できます。

.classCenter{
    
    
  box-flex: 5;
  -webkit-box-flex: 5;
  -moz-box-flex: 5;
  -webkit-flex: 5;
  -ms-flex: 5;
  flex: 5;
  
  display: flex;
  justify-content: center;
 }

classRight では、コンテンツは右側にある必要があり、justify-content: flex-end; を右側に使用できます。

.classRight{
    
    
   box-flex: 1;/*灵活度*/
  -webkit-box-flex: 1; /* Safari and Chrome */
  -moz-box-flex: 1; /* Firefox */
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  
  display: flex;
  justify-content: flex-end;
}

最終的な効果を見てみましょう。異なる解像度スケーリングの下で​​中央に配置されています。


あなたは終わった

要約する

ページの横方向の配分については、フレックス レイアウトを使用して比例分割と位置の配置 (中央、右、左) を実行し、目的の効果を実現します。