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>