css3彈性盒模型（Flexbox）詳細介紹

2020-03-24 16:14:31

字體：大中小

來源：轉載

供稿：網友

Flexbox是布局模塊，而不是一個簡單的屬性，它包含父元素和子元素的屬性。

Flexbox布局的主體思想是似的元素可以改變大小以適應可用空間，當可用空間變大，Flex元素將伸展大小以填充可用空間，當Flex元素超出可用空間時將自動縮小。總之，Flex元素是可以讓你的布局根據瀏覽器的大小變化進行自動伸縮。

css3彈性盒模型（Flexbox）詳細介紹

創建Flex容器

flexbox布局首先需要創建一個flex容器。為此給元素設置display屬性的值為flex。對于IE10來說，我們需要在開頭的地方添加-ms-flexbox。

復制代碼代碼如下:

.container{

display:-webkit-flex;

display:-moz-flex;

display:flex;

display:-ms-flexbox;

}

水平或垂直分布

box-orient定義分布的坐標軸：vertical和horizional。這兩個值分別定義盒子垂直顯示和水平顯示：

復制代碼代碼如下:

.container{

display: box;

box-orient: horizontal;

}

語法

復制代碼代碼如下:

box-orient: horizontal|vertical|inline-axis|block-axis|

雙視影院[www.aikan.tv/special/shuangshiyingyuan/]inherit;

案例

復制代碼代碼如下:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8"/>

<title>Centering an Element on the Page</title>

<style type="text/css">

html {

height: 100%;

} body {

display: -webkit-box; /* 老版本語法: Safari, iOS, Android browser, older WebKit browsers. */

display: -moz-box; /* 老版本語法: Firefox (buggy) */

display: -ms-flexbox; /* 混合版本語法: IE 10 */

display: -webkit-flex; /* 新版本語法： Chrome 21+ */

display: flex; /* 新版本語法： Opera 12.1, Firefox 22+ */ /*垂直居中*/

/*老版本語法*/

-webkit-box-align: center;

-moz-box-align: center;

/*混合版本語法*/

-ms-flex-align: center;

/*新版本語法*/

-webkit-align-items: center;

align-items: center; /*水平居中*/

/*老版本語法*/

-webkit-box-pack: center;

-moz-box-pack: center;

/*混合版本語法*/

-ms-flex-pack: center;

/*新版本語法*/

-webkit-justify-content: center;

justify-content: center; margin: 0;

height: 100%;

width: 100% /* needed for Firefox */

}

/*實現文本垂直居中*/

h1 {

display: -webkit-box;

display: -moz-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex; -webkit-box-align: center;

-moz-box-align: center;

-ms-flex-align: center;

-webkit-align-items: center;

align-items: center;

height: 10rem;

} </style>

</head>

<body>