flex-basis プロパティを使用して、フレックスボックスの境界線の幅を設定します-CSSチュートリアル-php.cn

flex-basis プロパティを使用して、フレックスボックスの境界線の幅を設定します

不言

リリース： 2018-11-09 09:42:04

オリジナル

3333 人が閲覧しました

この記事では、flex-basis プロパティを使用して Flexbox の境界線の幅を設定する方法について紹介します。必要な場合は、このプロパティを参照してください。

フレックスボックスの境界線の幅を指定するために使用するプロパティは、フレックスベースです。

具体的なコードを見てみましょう

flex-basis.css

.container {
    display: flex;
    }
.frameA { 
   border: 1px solid #e9006b;    
   flex-basis: 64px;
   }
.frameB { 
   border: 1px solid #ff6a00;    
   flex-basis: 128px;
   }
.frameC { 
   border: 1px solid #d0b106;    
   flex-basis: 194px;
   }
.frameD {  
  border: 1px solid #4aae20;    
  flex-basis: 256px;
  }
.frameE {  
  border: 1px solid #01b9b3;    
  flex-basis: 320px;
  }

ログイン後にコピー

flex-basis.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="flex-basis.css" />
  </head>
  <body>
  <div class="container">
    <div class="frameA">第一个内容<br/>php中文网<br />php中文网</div>
    <div class="frameB">第二个内容<br />php中文网<br /></div>
    <div class="frameC">第三个内容<br />php中文网<br />php中文网</div>
    <div class="frameD">第四个内容<br />php中文网<br />php中文网</div>
    <div class="frameE">第五个内容<br />php中文网<br />php中文网</div>
  </div>
  </body>
  </html>

ログイン後にコピー

手順: flex を変更します。 Basic プロパティは、フレックスボックスの境界線の幅の基本値に設定されます。この例では、左フレームから順に、64ピクセル、128ピクセル、194ピクセル、256ピクセル、320ピクセルの値を設定します。

結果は次のとおりです。

Web ブラウザを使用して上記の HTML ファイルを表示します。以下のページが表示されます。 Webブラウザのウィンドウ幅がフレーム幅より大きい場合は、指定したフレームサイズで表示されます。下の画像では、左から右に、64px、128px、194px、256px、境界線の幅が 320px であることがわかります。

flex-basis プロパティを使用して、フレックスボックスの境界線の幅を設定します

#ウィンドウの幅が狭くなっても、幅がフレーム幅より大きい場合はフレームの幅は変わりません。

flex-basis プロパティを使用して、フレックスボックスの境界線の幅を設定します #ウィンドウの幅がフレームの全幅より狭くなると、フレームの幅も縮小します。

flex-basis プロパティを使用して、フレックスボックスの境界線の幅を設定します flex-shrink プロパティの値を設定していないため、フレーム幅はフレームごとに同じ割合で縮小します。各フレームのフレーム縮小量を変更するには、flex-shrink プロパティを設定します。 flex-shrink プロパティの動作の詳細については、

この記事

を参照してください。

#ウィンドウの幅をさらに縮小します。ウィンドウを縮小しても、フレームの幅はウィンドウの幅と同じ割合であることがわかります。 flex-basis プロパティを使用して、フレックスボックスの境界線の幅を設定します

補足: ウィンドウ幅が表示ボックスいっぱいの場合

上記の例では、ウィンドウ幅が広い場合、右側に余白が生じます。ウィンドウの幅いっぱいにフレームを表示したい場合があります。

ウィンドウの全幅が使用されてフレームが表示される場合、フレームの C に flex-grow 属性が設定されます。 flex-grow プロパティの詳細については、

この記事

を参照してください。

以下のコードでは、右端のframeDにflex-grow属性が設定されているため、ウィンドウ幅が大きい場合、右端のフレームのバナーが引き伸ばされたウィンドウの幅いっぱいに表示されます。

flex-basis.css

.container {  
  display: flex;
}
.frameA {   
 border: 1px solid #e9006b;    
 flex-basis: 64px;
}
.frameB {  
  border: 1px solid #ff6a00;    
  flex-basis: 128px;
}
.frameC {   
 border: 1px solid #d0b106;    
 flex-basis: 194px;
}
.frameD {  
  border: 1px solid #4aae20;    
  flex-basis: 256px;
}
.frameE {   
 border: 1px solid #01b9b3;    
 flex-basis: 320px;    
 flex-grow: 1;
}

ログイン後にコピー

flex-basis2.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="flex-basis2.css" />
  </head>
  <body>
    <div class="container">
    <div class="frameA">第一个内容<br/>php中文网<br />php中文网</div>
    <div class="frameB">第二个内容<br />php中文网<br /></div>
    <div class="frameC">第三个内容<br />php中文网<br />php中文网</div>
    <div class="frameD">第四个内容<br />php中文网<br />php中文网</div>
    <div class="frameE">第五个内容<br />php中文网<br />php中文网</div>
  </div>
  </div>
  </body>
  </html>

ログイン後にコピー

Web ブラウザを使用して上記の結果を表示します。以下のページが表示されます。ウィンドウの幅全体にフレームが表示されていることがわかります。

flex-basis プロパティを使用して、フレックスボックスの境界線の幅を設定します #ウィンドウの幅を小さくすると、フレームの幅も小さくなります。