フレックス レイアウトは、エラスティック レイアウトとも呼ばれます。任意のコンテナーをフレックス レイアウトとして指定できます。 フレキシブルボックスを宣言するいくつかの方法 前述のように、すべてのコンテナはフレックスレイアウトとして指定できます。
インライン要素も使用できます。
フレックス要素の方向を変更する 弾性ボックスのデフォルトの方向は左から右です。軸は水平です。flex
配置方向を変更する属性、つまり軸を垂直方向に変更する属性
プロパティを 同じ理由 弾性ボックスのオーバーフローの制御 ボックス内の要素が多すぎて、水平方向の幅または高さが足りない場合、デフォルトではボックス内の要素の幅が縮小されます。 ここで行を折り返すことで解決できます ボックスに 同様に、 wrap 属性の後にreverseを追加すると、下の行から折り返す効果が得られます。 水平軸と垂直軸についても同様です。 主軸と交差軸 では早速、写真を見てみましょう。 幅が十分でなく、要素がオーバーフローして行の折り返しが発生する場合は、交差軸が発生します。 プロパティが 主軸の配置 主軸を制御するプロパティは 以下は水平方向を例に挙げます 1. 体全体が片側に傾いている デフォルトの方法は、主軸の左から右への開始に揃えることです。つまり、 末尾に揃える場合は、 主軸が右から左に反転している場合、開始は右側、終了は左側になります。 2. 全体を中央揃えにする: justify-content:center 3. 左右中央:justify-content:space-between 4. 要素の両側の間隔は同じです: justify-content:space-around 5. コンテンツスペース均等配置 交差軸配置 クロス描画を制御するプロパティは 1. 体全体が片側に傾いている メイン軸と同様に、 2. 全体の中央揃え: align-content:center 3. 交差軸が端に近く、他の要素が均等に配置されています: justify-content:space-between 4. 交差軸要素間の間隔は同じです: justify-content:space-around 5. 交差軸要素間の均等間隔: justify-content:space-evenly フレックスボックス内の個々の要素を制御する 1. 整列
2. 要素の利用可能なスペースの割り当て: flex-grow 両方とも 1 の場合: 他の比率にすることもできます。0の場合は元のサイズになります。 要素を動的に縮小する 要素の動的な収縮は 0 はズームなしを意味します。値が大きいほど、ズームが大きくなります。 主軸のフレックスベース ボックス内の要素の基本サイズを 弾性要素の属性の組み合わせの書き方 フレックス成長:1; フレックス収縮:2; フレックスベース:100px; 同等
要約する CSS のフレックスレイアウトの詳細な説明については、これで終わりです。CSS フレックスレイアウトに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: SQL ファジー クエリ レポート: ORA-00909: パラメータの数が無効です。解決策
派生テーブルについてメイン クエリに派生テーブルが含まれている場合、または SELECT ステートメ...
1. ソフトウェアのダウンロードMySQL のダウンロードとインストール:公式サイトのダウンロード...
まず、効果図の下にコードを添付します <!DOCTYPE html> <html&...
グリッドシステムの形成1692年、新しく即位したフランス国王ルイ14世は、フランスの印刷技術のレベル...
概要今日は主に、NGINX を Web サーバーとして設定する方法を共有します。内容は次のとおりです...
proxy_intercept_errors と recursive_error_pages を使...
目次序文オプションの連鎖ヌル結合呼び出されていない関数のチェック他の序文TypeScript 3.7...
この記事ではjQueryを使用して、階段のスライド効果を実装し、フロアをスクロールし、フロアボタンを...
昨日は遅くまで寝ていて、一日中起きていました。私の年齢では、夜更かしして本を書くのはもう無理のようで...
JSはショッピングカート内の商品の合計金額を計算して参考とします。具体的な内容は以下のとおりです。質...
最近、Docker を使用して Java アプリケーションをデプロイしていたときに、タイムゾーンが間...
略語を使用すると、CSS ファイルのサイズが小さくなり、読みやすくなります。 CSS 省略形の主なル...
参照ドキュメント公式 Docker インストール ドキュメント: https://docs.dock...
1. フローティング方式を使用する効果画像: コードは次のとおりです: (.content の高さは...
1. 環境整備各コンテナの IP アドレス: nginx: 172.16.10.10マイSQL: 1...