ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSS3 レイアウト プロパティとは何ですか?

CSS3 レイアウト プロパティとは何ですか?

青灯夜游
青灯夜游オリジナル
2022-02-25 18:12:542192ブラウズ

css3 レイアウト属性には、flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content、order、flex-grow、flex-shrink などが含まれます。

CSS3 レイアウト プロパティとは何ですか?

このチュートリアルの動作環境: Windows 7 システム、CSS3 バージョン、Dell G3 コンピューター。

1. フレキシブル ボックス モデル (フレキシブル ボックスまたはフレックスボックス)

フレキシブル ボックス モデルの最大の特徴は、動的に変更できることです。サブ要素の幅と高さを調整して、さまざまな画面サイズで適切なレイアウトを満たします。

(1) フレキシブル コンテナのプロパティ

flex-direction: 主軸の方向を設定し、弾性サブ要素の配置を決定します

flex- Wrap: When elastic 子要素がフレキシブルコンテナのスコープを超えたときにラップするかどうか

flex-flow:flex-direction および flex-wrap プロパティのショートカット、複合プロパティ

justify-content : 主軸の位置合わせ

align-items: 交差軸の位置合わせ

align-content: 交差軸にスペースがある場合の交差軸の位置合わせ

(2) Elastic サブ要素の属性

order: フレキシブル コンテナ内のサブ要素の順序を制御します。

flex-grow: Elastic サブ要素の拡張率を設定します。要素

flex-shrink: 弾性サブ要素を設定します。要素の収縮率

flex-basis: 伸長前の弾性サブ要素のデフォルトのサイズ値を指定します。 width 属性と height 属性

flex: flex-grow、flex-shrink、および、basic 属性の flex-Composite 属性

align-self: 独立した伸縮性のある子要素がデフォルトの配置設定をオーバーライドできるようにします。エラスティック コンテナの

#Flexbox メニュー項目の実際の戦闘

 <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Flexbox</title>
      <link rel="stylesheet" href="style.css">
  </head>
  <body>
      <!--
          响应式菜单html架构,emmet的方式进行简写
          ul.menu>li*6>a[href="#"]{HTML}
      -->
      <ul class="menu">
          <li><a href="#">HTML</a></li>
          <li><a href="#">CSS</a></li>
          <li><a href="#">JavaScript</a></li>
          <li><a href="#">Sass</a></li>
          <li><a href="#">Ruby</a></li>
          <li><a href="#">Mongo</a></li>
      </ul>
  </body>
  </html>
.menu{
      list-style-type: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-flow: row wrap;
  }
   
  .menu li{
      height: 40px;
      text-align: center;
      line-height: 40px;
      flex: 1 1 100%;
  }
   
  .menu li:nth-child(1){
      background-color: #39ADD1;
  }
  .menu li:nth-child(2){
      background-color: #3079AB;
  }
  .menu li:nth-child(3){
      background-color: #982551;
  }
  .menu li:nth-child(4){
      background-color: #E15258;
  }
  .menu li:nth-child(5){
      background-color: #CC6699;
  }
  .menu li:nth-child(6){
      background-color: #52AC43;
  }
   
  @media  (min-width:480px) {
      .menu li{
          flex: 1 1 50%;
      }
  }
   
  @media  (min-width:768px) {
      .menu{
          flex-flow: row nowrap;
      }
  }

2. 複数の列の詳細な説明

属性リスト:

columns: 複合属性 (column-width および columns-count)、幅と列数を設定;

column-width: 各列の幅を設定

column-count: 列数を設定します

column-gap: 列間のギャップを設定します

column-rule: 複合属性 (column-rule-width、column -rule-style、column-rule-color)、列間の境界線のスタイルを設定します

column-fill: 列の高さを設定します

column-span: 列の高さを統一するかどうかを設定しますすべての列にまたがる

3、メディア クエリ

ベスト プラクティス:

/*超小屏幕(手机,小于768px)*/
  /*没有任何媒体查询相关的代码,移动设备优先*/
   
  /*小屏幕(平板,大小等于768)*/
  @media (min-width: 768px) {
   
  }
   
  /*中等屏幕(桌面显示器,大于等于992px)*/
  @media (min-width: 992px) {
   
  }
   
  /*大屏幕(大桌面显示器,大于等于1200px)*/
  @media (min-width: 1200px) {
   
  }

(学習ビデオ共有: css ビデオ チュートリアルWeb フロント-入門チュートリアルを終了)

以上がCSS3 レイアウト プロパティとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。