CSS3フレキシブルボックス

CSS3 Flex Box

Flex Box は CSS3 の新しいレイアウトモードです。

CSS3 フレキシブルボックス (フレキシブルボックスまたはフレックスボックス) は、ページがさまざまな画面サイズやデバイスの種類に適応する必要がある場合に、要素が適切に動作することを保証するレイアウト方法です。

フレックスボックスレイアウトモデルを導入する目的は、コンテナ内のサブ要素に空のスペースを配置、整列、割り当てるためのより効率的な方法を提供することです。

CSS3 フレキシブルボックスのコンテンツ

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

フレキシブルコンテナは、display プロパティの値を flex または inline-flex に設定することで、フレキシブルコンテナとして定義されます。

フレキシブルコンテナには 1 つ以上のフレキシブルなサブ要素が含まれます。

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

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

次の要素は、左から右に一列に表示された伸縮性のある子要素を示しています:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<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;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>
</body>
</html>

プログラムを実行して試してみましょう

もちろん、配置を変更することもできます。

方向属性を rtl (右から左) に設定すると、伸縮性のあるサブ要素の配置も変更され、ページレイアウトも変更されます:

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
body {
    direction: rtl;
}
.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;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>
</body>
</html>

試してみるプログラム

flex-direction

flex-direction の順序は、親コンテナ内の柔軟な子要素の位置を指定します。

文法

flex-direction: row | row-reverse | column-reverse

flex-direction の値は次のとおりです:

行: デフォルトの配置方法。
row-reverse: 水平方向を逆に配置 (右揃え、後ろから前、最後の項目が前にあります。)
column: 垂直方向に配置。
column-reverse: 垂直方向を逆に配置、後ろから前に最後の項目が一番上になるように前に配置します。

次の例は、row-reverse の使用法を示しています。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>
</body>
</html>

プログラムを実行して試してください。次の例は、column:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>
</body>
</html>

の使用法を示しています。プログラムを実行して試してください

次の例は、column-reverse の使用方法を示しています:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>
</body>
</html>

プログラムを実行して試してください

justify-content 属性

justify-content 属性は、に適用されますelastic コンテナ上で、flex コンテナの主軸に沿って flex アイテムを配置します。

justify-content: flex-start | space | | space-around

各値の分析:

flex-start:

flex 項目は行頭の隣に埋められます。これは、最初の flex 項目の main-start マージンです。

flex-end:
最初のフレックス項目のメインエンドマージンエッジは、行の先頭に配置されます。行のメインエンドの端。後続のフレックス項目は互いに同一平面上に配置されます。フレックス項目は互いに隣接して中央に配置されます (残りの空きスペースが負の場合)。、フレックス項目は両方向にオーバーフローします)。
スペース間:
残りのスペースが負の場合、またはフレックス項目が 1 つしかない場合、これは行に均等に配置されます。値は flex-start と同等です。最初のフレックス項目のマージンは行のメイン開始端に位置合わせされ、最後のフレックス項目のマージンは行のメイン終了端に位置合わせされます。フレックスアイテムは、隣接するアイテムの間に等間隔でライン上に配置されます。
スペースアラウンド: フレックス項目は行に均等に配置され、両側に半分のスペースが残ります。残りのスペースが負の場合、またはフレックス項目が 1 つしかない場合、この値は center と等価です。それ以外の場合、フレックスアイテムは、最初と最後の辺とフレックスコンテナーの間に半分のスペース (1/2*20px=10px) を残しながら、互いに等間隔 (たとえば 20px) で行に沿って分散されます。

レンダリング表示:

次の例は、flex-endの使用を示します:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>
</body>
</html>

プログラムを実行して試してください

次の例は、centerの使用を示します:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>
</body>
</html>

プログラムを実行して試してください

次の例は、space-between の使用を示しています:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>
</body>
</html>

プログラムを実行して試してください

次の例は、space-around の使用を示しています:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>
</body>
</html>

プログラムを実行して、試してみてください

align-items 属性

align-items は、フレックスボックス要素の交差軸 (垂直軸) 方向の配置を設定または取得します。

構文

align-items: flex-start | flex-end center |stretch ) の開始位置の境界は、行の交差軸の開始境界のすぐ隣にあります。

flex-end: フレックスボックス要素の交差軸(縦軸)の開始位置の境界線が、行の交差軸の終了境界線に近いです。

center: フレックスボックス要素は、行の交差軸 (垂直軸) の中心に配置されます。 (行のサイズがフレックスボックス要素のサイズより小さい場合、両方向に同じ長さでオーバーフローします)。
baseline: フレックスボックス要素のインライン軸と横軸が同じ場合、この値は 'flex-start' と同等です。それ以外の場合、この値はベースライン調整に参加します。
stretch: 軸の横のサイズを指定する属性値が「auto」の場合、その値は項目のマージンボックスのサイズを行のサイズに可能な限り近づけますが、同時に「min/max-width/height」属性に準拠します。

次の例は、ストレッチ (デフォルト値) の使用方法を示しています:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: stretch;
    align-items: stretch;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>
</body>
</html>

プログラムを実行して試してください

次の例は、flex-start の使用法を示します:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>
</body>
</html>

プログラムを実行して試してください

次の例は、flex-end の使用法を示します:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>
</body>
</html>

プログラムを実行して試してください

次の例は、center の使用法を示しています:

<!DOCTYPE html>
<html>
<head>
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>
</body>
</html>

プログラムを実行して試してください

次の例は、ベースラインの使用を示しています:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: baseline;
    align-items: baseline;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>
</body>
</html>

プログラムを実行して試してください

flex-wrap 属性

flex-wrap 属性は、フレックスボックスの子要素の改行モードを指定するために使用されます。

構文

flex-flow: ||

各値の分析:

nowrap - デフォルトでは、フレックスコンテナは単一行です。この場合、フレックス項目がコンテナからオーバーフローする可能性があります。
wrap - Flex コンテナーは複数行です。この場合、伸縮性のある子のオーバーフロー部分は新しい行に配置され、子の中で改行が発生します
wrap-reverse - ラップ配置を逆にします。

次の例は、nowrap の使用法を示しています:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 300px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>
</body>
</html>

プログラムを実行して試してください

次の例は、wrap の使用法を示しています:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 300px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>
</body>
</html>

プログラムを実行して試してください

以下例では、wrap-reverse の使用法を示します。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
    width: 300px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>
</body>
</html>

プログラムを実行して試してみる

align-content 属性

align-content 属性は、flex-wrap 属性の動作を変更するために使用されます。 align-items と似ていますが、flex 子要素の配置を設定する代わりに、個々の行の配置を設定します。

文法

整列内容: フレックス開始 | スペース間ストレッチ |行は残りのスペースを占めるように引き伸ばされます。

flex-start - 各行は、フレックスコンテナーの開始位置に向かってスタックされます。

flex-end - 行はフレックスコンテナの末尾に向かって積み重ねられます。
center - 各行はフレックスボックスコンテナーの中央に向かって積み重ねられます。
space-between - 行はフレックスボックスコンテナ内に均等に分散されます。
space-around - 各行はフレックスボックスコンテナー内に均等に分散され、両端の子要素間に半分のスペースが残ります。

次の例は、center の使用法を示しています:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
    width: 300px;
    height: 300px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>
</body>
</html>

order:

分析各値の:

<integer>: 整数値を使用して並べ替え順序を定義し、小さい値が最初にリストされます。マイナスになることもあります。

order 属性は、Elastic Container 内の Elastic 子要素の属性を設定します:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<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;
}
.first {
    -webkit-order: -1;
    order: -1;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item first">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>
</body>
</html>

プログラムを実行して試してください

Alignment

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: 10px;
}
.flex-item:first-child {
    margin-right: auto;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>
</body>
</html>

プログラムを実行して試してください

完璧なセンタリング

次の例は、私たちがよく遭遇するセンタリングの問題を完全に解決します。

柔軟なボックスを使用すると、中央揃えが非常に簡単になります。 margin: auto を設定するだけで、弾性サブ要素が上 2 つの軸方向で完全に中央に配置されます。

align-self 属性は、弾性要素自体の交差軸 (縦軸) 方向の配置を設定するために使用されます。構文

flex-start: フレックスボックス要素の交差軸(縦軸)の開始位置の境界線が、行の交差軸の開始境界線に近いです。

flex-end: フレックスボックス要素の交差軸(縦軸)の開始位置の境界が、行の交差軸の終了境界に近いです。

center: フレックスボックス要素は、行の交差軸 (垂直軸) の中心に配置されます。 (行のサイズがフレックスボックス要素のサイズより小さい場合、両方向に同じ長さでオーバーフローします)

ベースライン: フレックスボックス要素のインライン軸と横軸が同じ場合、この値は「flex -start」と同じです。それ以外の場合、この値はベースライン調整に参加します。
stretch: 軸の横のサイズを指定する属性値が「auto」の場合、その値は項目のマージンボックスのサイズを行のサイズにできる限り近づけますが、同時に「min/max-width/height」属性に従います。

次の例は、Elastic 子要素に対するさまざまな align-self 値の適用効果を示しています:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: auto;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">Perfect centering!</div>
</div>
</body>
</html>

flex

flex プロパティは、弾性子要素がスペースを割り当てる方法を指定するために使用されます。

構文

flex: none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

none: none キーワードの計算値は: 0 0 auto

[ flex-grow ]: フレックスボックス要素の拡張率を定義します。
[flex-shrink]: フレキシブルボックス要素の収縮率を定義します。
[ flex-basis ]: フレックスボックス要素のデフォルトの基準値を定義します。

次の例では、最初の弾性子要素がスペースの 2/4 を占め、他の 2 つがスペースの 1/4 を占めます:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 60px;
    min-height: 100px;
    margin: 10px;
}
.item1 {
    -webkit-align-self: flex-start;
    align-self: flex-start;
}
.item2 {
    -webkit-align-self: flex-end;
    align-self: flex-end;
}
.item3 {
    -webkit-align-self: center;
    align-self: center;
}
.item4 {
    -webkit-align-self: baseline;
    align-self: baseline;
}
.item5 {
    -webkit-align-self: stretch;
    align-self: stretch;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item item1">flex-start</div>
  <div class="flex-item item2">flex-end</div>
  <div class="flex-item item3">center</div>
  <div class="flex-item item4">baseline</div>
  <div class="flex-item item5">stretch</div>
</div>
</body>
</html>

CSS3 flex box 属性

次の表に、フレキシブルボックスで一般的に使用されるプロパティを示します:

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <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; } </style> </head> <body> <div class="flex-container"> <div class="flex-item">flex item 1</div> <div class="flex-item">flex item 2</div> <div class="flex-item">flex item 3</div> </div> </body> </html>

提出するリセットコード

自動運転

前のセクション次のセクション

チュートリアルリスト

ヘルプの取得

おすすめコース
コースウェアのダウンロード

現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜

このコースを視聴した生徒はこちらも学んでいます

属性	説明
display	HTML要素のボックスタイプを指定します。
flex-direction	は、フレックスコンテナ内の子要素の配置を指定します。
justify-content	は、フレックスボックス要素の主軸（横軸）方向の配置を設定します。
align-items	クロス軸（縦軸）方向のフレックスボックス要素の配置を設定します。
flex-wrap	フレックスボックスの子要素が親コンテナを超えたときにラップするかどうかを設定します。
align-content	次のように、flex-wrap 属性の動作を変更します。 Align-ITEMSですが、サブ要素の配置を設定するのではなく、アラインメントラインとフレックスラップの略称としてエラスティックボックスのサブ要素の配置順序を設定するラインを設定します。
align-self	flex 子要素で使用します。コンテナの align-items プロパティをオーバーライドします。
flex	フレックスボックスの子要素がスペースを割り当てる方法を設定します。

CSS3フレキシブルボックス

初級CSS3 をすぐに始めましょう

初級CSS3 入門チュートリアル

初級PHP+MySQL Webサイトプログラミング入門コース（広東語・広東語）梁浩賢

中級CSS3 入門ビデオチュートリアル

初級HTML5/CSS3/JavaScript/ES6入門コース

初級CSS3 を始めるための基本的なビデオチュートリアル

初級入門から習熟までの CSS3 チュートリアル

初級HTML5+CSS3 クイックスタートビデオチュートリアル

初級フロントエンド初心者のための HTML5+CSS3 入門

初級最新の CSS3 チュートリアルは素早くてわかりやすい

初級フロントエンド基礎HTML5+CSS3入門から習熟まで（完全版）

初級Imperial CMS エンタープライズ模倣 Web サイトのチュートリアル

CSS3フレキシブルボックス

初級CSS3 をすぐに始めましょう

初級CSS3 入門チュートリアル

初級PHP+MySQL Webサイトプログラミング入門コース（広東語・広東語）梁浩賢

中級CSS3 入門ビデオチュートリアル

初級HTML5/CSS3/JavaScript/ES6入門コース

初級CSS3 を始めるための基本的なビデオチュートリアル

初級入門から習熟までの CSS3 チュートリアル

初級HTML5+CSS3 クイック スタート ビデオ チュートリアル

初級フロントエンド初心者のための HTML5+CSS3 入門

初級最新の CSS3 チュートリアルは素早くてわかりやすい

初級フロントエンド基礎HTML5+CSS3入門から習熟まで（完全版）

初級Imperial CMS エンタープライズ模倣 Web サイトのチュートリアル

初級HTML5+CSS3 クイックスタートビデオチュートリアル