【CSS3】 CSS3：フレックスボックス

1. Flexレイアウトとは

2. コンテナをFlexレイアウトとして指定する方法

3. Flexの基本構文

1. display

2. flex-direction

3. コンテンツの正当化

4. align-items

5. flew-wrap

6. align-self

7. flex-flow

8. flex

9. order

4. 例

1. サイコロのレイアウト

2. 聖杯レイアウト

5. 参考記事

1. レイアウトの従来のソリューションは、表示属性 + 位置属性 + フロート属性に依存しています。 。たとえば、垂直方向のセンタリングを実現するのが難しいなど、特殊なレイアウトでは非常に不便です。 Flex レイアウトは、2009 年に W3C 団体によって提案された、さまざまなページ レイアウトを簡単、完全、レスポンシブに実現できるレイアウト ソリューションです。現在、すべてのブラウザでサポートされています。フレックス レイアウトは、将来のレイアウトで推奨されるソリューションになります。

2 番目に、コンテナを Flex レイアウトとして指定する方法

コンテナに flex の値を持つ表示属性を追加するだけです。

.box{
  display: flex;
}

三、Flexの基本構文

display

構文:display:flex;

Flexを指定します。

flex-direction

構文:

flex

-direction:行|行-反転|列|列-反転

柔軟な子要素が親コンテナ内で配置される順序を指定します。これは、 direction:rtl; または direction:ltr; を設定することでも同様に実現できます。と ltr は右です to の略語左、左から右へ。 コンテンツの両端揃え

構文:

justify

-

content: flex-start | flex-end | center | space-beトゥイーン | スペース-

コンテンツjustify-content プロパティは、フレックス コンテナの主軸に沿ってフレックス項目を配置するためにフレックス コンテナに適用されます。 概念理解図:

その中で、スペースアラウンドについて、著者は簡単な公式をまとめました:

x=(W₂-N*W₁)/(2N)

x: 最も両側に残された幅。

W₂: モジュールの幅です。

W₁: サブモジュールの幅 (それぞれの場合でも)。

N:

align-items

構文: align-items: flex-start | flex-end | center | ベースライン|ストレッチ

横軸(縦軸)にフレキシブルボックス要素を設定します) 方向の位置合わせがオンです。

次の図は、読者がベースラインを理解するのに役立ちます。

構文: flex

-

flow

:

nowrap

| ワープリバースalign-content 構文:

align

-

content

:

flex

-start | flex -終了 | 中央|空間-の間|空間-周囲|ストレッチ セット各行の配置。 align-self

構文:

align

-

self

:

auto

| flex-start | flex-end | center | ベースライン |ストレッチ 弾性要素自体の軸交差方向の配置を設定します。この属性は align-content と区別する必要があります。align-content の範囲は各行ですが、align-self は特定の行内の特定の伸縮要素のみです。 flex-flow

構文: flex-direction と flex-wrap の略語。

flex

構文: flex:

flex-grow

flex-shrink

flex-basis

|auto|initial|inherit;

要素の割り当てスペースを指定します。 flex-basis が 100% の場合、flex モジュールは別の行を占有することに注意してください。 oder

構文: order:

number

|initial|inherit;

値が小さいほど優先度が高くなります。負の値にすることもできます。

4、例

1、サイコロの配置

サイコロの片面には最大9つの点を配置​​できます。

下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到codepen查看Demo。

如果不加说明，本节的HTML模板一律如下。

<p class="box">  <span class="item">>>

上面代码中，p元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目。如果有多个项目，就要添加多个span元素，以此类推。

1.1 单项目

首先，只有左上角1个点的情况。Flex布局默认就是首行左对齐，所以一行代码就够了。

.box {  display: flex;}

设置项目的对齐方式，就能实现居中对齐和右对齐。

.box {  display: flex;  justify-content: center;}

.box {  display: flex;  justify-content: flex-end;}

设置交叉轴对齐方式，可以垂直移动主轴。

.box {  display: flex;  align-items: center;}

.box {  display: flex;  justify-content: center;  align-items: center;}

.box {  display: flex;  justify-content: center;  align-items: flex-end;}

.box {  display: flex;  justify-content: flex-end;  align-items: flex-end;}

1.2 双项目

.box {  display: flex;  justify-content: space-between;}

.box {  display: flex;  flex-direction: column;  
justify-content: space-between;}

.box {  display: flex;  flex-direction: column;  
justify-content: space-between;  align-items: center;}

.box {  display: flex;  flex-direction: column;  
justify-content: space-between;  align-items: flex-end;}

.box {  display: flex;}.item:nth-child(2) {  align-self: center;}

.box {  display: flex;  
justify-content: space-between;}.item:nth-child(2) {  align-self: flex-end;}

1.3 三项目

.box {  display: flex;}.item:nth-child(2) {  align-self: center;}.item:nth-child(3) {  
align-self: flex-end;}

1.4 四项目

.box {  display: flex;  flex-wrap: wrap;  justify-content: flex-end;  
align-content: space-between;}

HTML代码如下。

<p class="box">  <p class="column"><span class="item">><span class="item">>  >  
<p class="column"><span class="item">><span class="item">>  >>

CSS代码如下。

.box {  display: flex;  flex-wrap: wrap;  align-content: space-between;}
.column {  flex-basis: 100%;  display: flex;  justify-content: space-between;}

1.5 六项目

.box {  display: flex;  flex-wrap: wrap;  align-content: space-between;}

.box {  display: flex;  
flex-direction: column;  
flex-wrap: wrap;  
align-content: space-between;
}

HTML代码如下。

<p class="box">  <p class="row"><span class="item">>
<span class="item">><span class="item">>  >  <p class="row"><span class="item">>  >  
<p class="row"> <span class="item">> <span class="item">>  >>

CSS代码如下。

.box {  display: flex;  flex-wrap: wrap;}
.row{  flex-basis: 100%;  display:flex;}
.row:nth-child(2){  justify-content: center;}
.row:nth-child(3){  justify-content: space-between;}

1.6 九项目

.box {  display: flex;  flex-wrap: wrap;}

    2,圣杯布局

圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。

HTML代码如下：

9b5daa3407e0c48a5f3f492558298fbb
  72c941ffd0db4f4b78a97b702d08b85e头部header>
  ca9edeb25e209951e9499be9e0cce7cfe388a4556c0f65e1904146cc1a846bee主体p>
  article>
  4dd108320b3638b22adf08f41207540f边栏 1aside>
  d99b8f80ee6d46f6044aed7273c60db0边栏 2aside>
  14b51f17a31fa25726e48adc19e8a249底部footer>p>

 

CSS代码入下：

.flex-container {
display: -webkit-flex;display: flex;  
    -webkit-flex-flow: row wrap;flex-flow: row wrap;font-weight: bold;text-align: center;
}
.flex-container > * {padding: 10px;flex: 1 100%;
}
.main {text-align: left;background: cornflowerblue;
}
.header {background: coral;}
.footer {background: lightgreen;}
.aside1 {background: moccasin;}
.aside2 {background: violet;}@media all and (min-width: 600px) {.aside { flex: 1 auto; }}

@media all and (min-width: 800px) {
.main    
{ 
flex: 3 0px; 
}
.aside1 
{ 
order: 1; 
} 
    .main    
    { order: 2; 
    }
    .aside2 { order: 3; }
    .footer  
    { 
    order: 4; 
    }
    }

以上就是【CSS3】 CSS3:弹性盒子（Flex Box）的内容，更多相关内容请关注PHP中文网（www.php.cn）！