CSS3でボックスの弾力性を宣言する方法-CSSチュートリアル-php.cn

CSS3でボックスの弾力性を宣言する方法

醉折花枝作酒筹

リリース： 2023-01-06 11:16:07

オリジナル

1574 人が閲覧しました

css3 は、display 属性の値を flex または inline-flex に設定することで、ボックスの弾力性を宣言します。フレキシブルボックスは、フレキシブルコンテナ (Flex コンテナ) とフレキシブルサブ要素 (Flex item) で構成され、フレキシブルコンテナには 1 つ以上のフレキシブルサブ要素が含まれます。

CSS3でボックスの弾力性を宣言する方法

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

フレキシブルボックスは、フレキシブルコンテナ (Flex コンテナ) とフレキシブルサブ要素 (Flex アイテム) で構成されます。

フレキシブルコンテナは、display プロパティの値を flex または inline-flex に設定することによって、フレキシブルコンテナとして定義されます。フレックスコンテナには 1 つ以上のフレックス子要素が含まれます。

注: フレキシブルコンテナの外側とフレキシブルサブ要素の内側は通常どおりレンダリングされます。フレックスボックスは、フレックス子要素がフレックスコンテナ内でどのようにレイアウトされるかを定義するだけです。

フレキシブルサブ要素は通常、フレキシブルボックス内に 1 行で表示されます。デフォルトでは、コンテナーごとに 1 行のみが存在します。

例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
 
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
    text-align: center;
    line-height: 100px;
}
</style>
</head>
<body>
 
<div class="flex-container">
  <div class="flex-item">弹性容器 1</div>
  <div class="flex-item">弹性容器 2</div>
  <div class="flex-item">弹性容器 3</div> 
</div>
 
</body>
</html>
</html>

ログイン後にコピー

効果:

CSS3でボックスの弾力性を宣言する方法