【CSS3】 CSS3:彈性盒（Flex Box）

1. Flex版面是什麼

justify-content
align-items

1. flew-wrap

2. align-self

3. flex-flow

4. 範例
骰子的佈局
聖杯的版面
8. 參考文章

9. 一， Flex佈局是什麼？它對於那些特殊佈局非常不方便，例如，垂直居中就不容易實現。 Flex佈局是W3C組織於2009年提出的佈局方案，可以簡單、完整、響應式地實現各種頁面佈局。目前，它已經得到了所有瀏覽器的支援。 Flex佈局將會成為未來佈局的首選方案。

4.  
二，如何指定一個容器為Flex佈局

1. 只需要在容器中加入值為flex的display屬性。

2. .box{
     display: flex;
   }

 
5. 三，Flex的基本語法
   display

語法： display:flex;

display

語法：display:flex;

。

 flex-direction

語法： 

flex

-

direction

:

row

|

row🜎

。這個也可以透過設定 direction:rtl; 或是

:等效實現，其中的rtl、ltr是right to left、left to right的簡寫。 justify content　文法： justify-content: flex-start |c flex- -between | space- around

內容對齊（justify-content）屬性應用在彈性容器上，把彈性項沿著彈性容器的主軸線（main axis）對齊。

其中space-around，筆者總結了一個簡單的公式：

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

x:最兩邊留下的寬度。

W₂:就是模組的width。

W₁:一個子模組的寬度（每個均勻）。

N:

align-items

文法： align-items: flex- baseline | stretch

設定彈性盒子元素在側軸（縱軸）方向上的對齊方式。 文法： flex-flow : nowrap | warp | warp-reverse

align-content

：

|

flex

-end | center | space-between | space-around

|

stretch

🜎

 設定各個行的對齊方式。 align-self文法： align-self: auto | flex -auto | | center | baseline | stretch

在彈性。這個屬性要區別與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%，那麼該彈性模組就會單獨佔一行。 oder語法： order: number|initial|inherit;指定彈性模組的排列順序，其中值越小，越優先，可以為負值。  四，例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）！