CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSFlexboxでアイテムの固定幅を設定する

構文

CSSflexプロパティの構文は次のとおりです-

Selector {
   flex: /*value*/
}

例

次の例は、CSSフレックスプロパティを示しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            display: flex;
            padding: 4%;
         }
         .d1 {
            background: hotpink;
            flex: 0 20 20px;
         }
         .d2 {
            background: greenyellow;
            flex: 1;
         }
         .d3 {
            background: tomato;
            flex: 1;
         }
      </style>
   </head>
   <body>
      <div class="demo">
         <div class="d1"></div>
         <div class="d2"></div>
         <div class="d3"></div>
      </div>
   </body>
</html>

これにより、次の出力が得られます

CSSFlexboxでアイテムの固定幅を設定する

例

<!DOCTYPE html>
<html>
   <style>
      div {
         display: flex;
         border-radius: 2%;
         background-color: linen;
         height: 50px;
      }
      #d1 {
         border: 5px solid orangered;
         padding: 2%;
         flex: auto;
      }
      #d2 {
         border: 5px groove greenyellow;
         width: 66px;
      }
      #d3 {
         padding: 5%;
         border: 5px ridge hotpink;
      }
      #d4 {
         height: 100px;
         border: 5px solid magenta;
      }
   </style>
   <body>
      <div>
         <div id="d1">Auto Resize</div>
         <div id="d2">66px fixed width</div>
         <div id="d3"></div>
      </div>
      <div id="d4">Last Div</div>
   </body>
</html>

これにより、次の出力が得られます

CSSFlexboxでアイテムの固定幅を設定する


  1. CSSを使用した固定ポジショニング

    CSSでの要素の配置を固定として定義し、ユーザーのビューポートを基準にして要素をレンダリングすることができます。ポジショニング方法が固定されている要素は、スクロールしても移動せず、CSSポジショニングプロパティ（左、右、上、下）によって配置されます。 例 CSS固定測位方法の例を見てみましょう- <!DOCTYPE html> <html> <head> <style> p {    margin: 0;    position: absolute;    top: 50%; &nbs

  2. フレックスボックスを使用した高度なCSSレイアウト

    CSS3は、一般にFlexboxと呼ばれるレイアウトモードのFlexibleBoxを提供します。 Flexbox（フレキシブルボックス）はCSS3のレイアウトモードです。このモードを使用すると、複雑なアプリケーションやWebページのレイアウトを簡単に作成できます。コンテナ、フレックスアイテムなどが含まれます。コンテナには次のプロパティがあります- フレックス方向 フレックスラップ フレックスフロー justify-content 整列アイテム align-content 以下は、flexboxを使用した高度なCSSレイアウトのコードです- 例 &l