社区 学习 工具库 休闲
搜索
简体中文

CSS3 弹性盒子(Flex Box)

web 应用的样式设计中，布局是非常重要的一部分。布局用来确定页面上不同组件和元素的尺寸和位置。随着响应式用户界面的流行，Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率。响应式用户界面设计中最重要的一环就是布局。需要根据窗口尺寸来调整布局，从而改变组件的尺寸和位置，以达到最佳的显示效果。这也使得布局的逻辑变得更加复杂。

本文介绍的是 CSS3 规范中引入的新布局模型：弹性盒模型（flex box）。弹性盒模型可以用简单的方式满足很多常见的复杂的布局需求。它的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式。浏览器会负责完成实际的布局。该布局模型在主流浏览器中都得到了支持。


CSS3 弹性盒子内容

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

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


flex-direction 属性

设置或检索伸缩盒对象的子元素在父容器中的位置。

语法

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

row：横向从左到右排列（左对齐），默认的排列方式。

row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。

column：纵向排列。

row-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

浏览器支持

Firefox、Opera 和 Chrome 支持 flex-direction 属性。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
.box{
display:-webkit-flex;
display:flex;
margin:0;padding:10px;list-style:none;background-color:#eee;}
.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
#box{
-webkit-flex-direction:row;
flex-direction:row;
}
#box2{
-webkit-flex-direction:row-reverse;
flex-direction:row-reverse;
}
#box3{
height:500px;
-webkit-flex-direction:column;
flex-direction:column;
}
#box4{
height:500px;
-webkit-flex-direction:column-reverse;
flex-direction:column-reverse;
}
</style>
</head>
<body>
    <h2>flex-direction:row</h2>
    <ul id="box" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    </ul>
    <h2>flex-direction:row-reverse</h2>
    <ul id="box2" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    </ul>
    <h2>flex-direction:column</h2>
    <ul id="box3" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    </ul>
    <h2>flex-direction:column-reverse</h2>
    <ul id="box4" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    </ul>
</body>
</html>


justify-content 属性

设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

当弹性盒里一行上的所有子元素都不能伸缩或已经达到其最大值时，这一属性可协助对多余的空间进行分配。当元素溢出某行时，这一属性同样会在对齐上进行控制。

语法

justify-content: flex-start | flex-end | center | space-between | space-around


flex-start：弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。

flex-end：弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。

center：弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐，同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距（如果剩余空间是负数，则保持两端相等长度的溢出）。

space-between：弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于'flex-start'。在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。

space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于'center'。在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
.box{
display:-webkit-flex;
display:flex;
width:400px;height:100px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
.box li{margin:5px;padding:10px;border-radius:5px;background:#aaa;text-align:center;}
#box{
-webkit-justify-content:flex-start;
justify-content:flex-start;
}
#box2{
-webkit-justify-content:flex-end;
justify-content:flex-end;
}
#box3{
-webkit-justify-content:center;
justify-content:center;
}
#box4{
-webkit-justify-content:space-between;
justify-content:space-between;
}
#box5{
-webkit-justify-content:space-around;
justify-content:space-around;
}
</style>
</head>
<body>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>justify-content:flex-end</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>justify-content:center</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>justify-content:space-between</h2>
<ul id="box4" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>justify-content:space-around</h2>
<ul id="box5" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>


align-items 属性

设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

语法

align-items: flex-start | flex-end | center | baseline | stretch


flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
.box{
display:-webkit-flex;
display:flex;
width:200px;height:100px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
.box li{margin:5px;border-radius:5px;background:#aaa;text-align:center;}
.box li:nth-child(1){padding:10px;}
.box li:nth-child(2){padding:15px 10px;}
.box li:nth-child(3){padding:20px 10px;}
#box{
-webkit-align-items:flex-start;
align-items:flex-start;
}
#box2{
-webkit-align-items:flex-end;
align-items:flex-end;
}
#box3{
-webkit-align-items:center;
align-items:center;
}
#box4{
-webkit-align-items:baseline;
align-items:baseline;
}
#box5{
-webkit-align-items:strecth;
align-items:strecth;
}
</style>
</head>
<body>
<h2>align-items:flex-start</h2>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>align-items:flex-end</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>align-items:center</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>align-items:baseline</h2>
<ul id="box4" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>align-items:strecth</h2>
<ul id="box5" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>


flex-wrap 属性

设置或检索伸缩盒对象的子元素超出父容器时是否换行。

语法

flex-wrap: nowrap | wrap | wrap-reverse


nowrap：当子元素溢出父容器时不换行。

wrap：当子元素溢出父容器时自动换行。

wrap-reverse：反转 wrap 排列。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
.box{
display:-webkit-flex;
display:flex;
width:220px;margin:0;padding:10px;list-style:none;background-color:#eee;}
.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
#box{
-webkit-flex-wrap:nowrap;
flex-wrap:nowrap;
}
#box2{
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
}
#box3{
-webkit-flex-wrap:wrap-reverse;
flex-wrap:wrap-reverse;
}
</style>
</head>
<body>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>flex-wrap:wrap</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>flex-wrap:wrap-reverse</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>


align-content 属性

设置或检索弹性盒堆叠伸缩行的对齐方式。

语法

align-content: flex-start | flex-end | center | space-between | space-around | stretch


flex-start：各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行。

flex-end：各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行。

center：各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。（如果剩下的空间是负数，则各行会向两个方向溢出的相等距离。）

space-between：各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'flex-start'。在其它情况下，第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等。

space-around：各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'center'。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。

stretch：各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于'flex-start'。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
.box{
display:-webkit-flex;
display:flex;
-webkit-flex-wrap:wrap;
flex-direction:wrap;
width:200px;height:200px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
.box li{margin:5px;padding:10px;border-radius:5px;background:#aaa;text-align:center;}
#box{
-webkit-align-content:flex-start;
align-content:flex-start;
}
#box2{
-webkit-align-content:flex-end;
align-content:flex-end;
}
#box3{
-webkit-align-content:center;
align-content:center;
}
#box4{
-webkit-align-content:space-between;
align-content:space-between;
}
#box5{
-webkit-align-content:space-around;
align-content:space-around;
}
#box6{
-webkit-align-content:strecth;
align-content:strecth;
}
</style>
</head>
<body>
<h2>align-content:flex-start</h2>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:flex-end</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:center</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:space-between</h2>
<ul id="box4" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:space-around</h2>
<ul id="box5" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:strecth</h2>
<ul id="box6" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
</body>
</html>


order 属性

设置或检索弹性盒模型对象的子元素出现的顺序。

语法

order: <integer>

<integer>：用整数值来定义排列顺序，数值小的排在前面。可以为负值。 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
.box{
display:-webkit-flex;
display:flex;
margin:0;padding:10px;list-style:none;background-color:#eee;}
.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
#box li:nth-child(3){
-webkit-order:-1;
order:-1;
}
</style>
</head>
<body>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
</body>
</html>


align-self 属性

设置或检索弹性盒子元素自身在侧轴（纵轴）方向上的对齐方式。

语法

align-self: auto | flex-start | flex-end | center | baseline | stretch


auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。

flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。 （如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
.box{
display:-webkit-flex;
display:flex;
-webkit-align-items: flex-end;
height:100px;margin:0;padding:10px;border-radius:5px;list-style:none;background-color:#eee;}
.box li{margin:5px;padding:10px;border-radius:5px;background:#aaa;text-align:center;}
.box li:nth-child(1){
-webkit-align-self: flex-end;
align-self: flex-end;
}
.box li:nth-child(2){
-webkit-align-self: center;
align-self: center;
}
.box li:nth-child(3){
-webkit-align-self: flex-start;
align-self: flex-start;
}
.box li:nth-child(4){
-webkit-align-self: baseline;
align-self: baseline;
padding:20px 10px;
}
.box li:nth-child(5){
-webkit-align-self: baseline;
align-self: baseline;
}
.box li:nth-child(6){
-webkit-align-self: stretch;
align-self: stretch;
}
.box li:nth-child(7){
-webkit-align-self: auto;
align-self: auto;
}
</style>
</head>
<body>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>i</li>
</ul>
</body>
</html>


flex 属性

复合属性。设置或检索伸缩盒对象的子元素如何分配空间。

如果缩写flex:1, 则其计算值为：1 1 0

语法

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


none：none关键字的计算值为: 0 0 auto

[ flex-grow ]：定义弹性盒子元素的扩展比率。

[ flex-shrink ]：定义弹性盒子元素的收缩比率。

[ flex-basis ]：定义弹性盒子元素的默认基准值。 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
.box{
display:-webkit-flex;
display:flex;
max-width:400px;height:100px;margin:10px 0 0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
.box li{background:#aaa;text-align:center;}
.box li:nth-child(1){background:#999;}
.box li:nth-child(2){background:#aaa;}
.box li:nth-child(3){background:#ccc;}
#box li:nth-child(1){-webkit-flex:1;flex:1;}
#box li:nth-child(2){-webkit-flex:1;flex:1;}
#box li:nth-child(3){-webkit-flex:1;flex:1;}
#box2 li:nth-child(1){-webkit-flex:1 0 100px;flex:1 0 100px;}
#box2 li:nth-child(2){-webkit-flex:2 0 100px;flex:2 0 100px;}
#box2 li:nth-child(3){-webkit-flex:3 0 100px;flex:3 0 100px;}
#box3{max-width: 800px;}
#box3 li:nth-child(1){-webkit-flex:1 1 300px;flex:1 1 300px;background:#999;}
#box3 li:nth-child(2){-webkit-flex:1 2 500px;flex:1 2 500px;background:#aaa;}
#box3 li:nth-child(3){-webkit-flex:1 3 600px;flex:1 3 600px;background:#ccc;}
</style>
</head>
<body>
<ul id="box" class="box">
<li>flex:1;</li>
<li>flex:1;</li>
<li>flex:1;</li>
</ul>
<ul id="box2" class="box">
<li>flex:1 0 100px;</li>
<li>flex:2 0 100px;</li>
<li>flex:3 0 100px;</li>
</ul>
<ul id="box3" class="box">
<li>flex:1 1 400px;</li>
<li>flex:1 2 400px;</li>
<li>flex:1 2 400px;</li>
</ul>
</body>
</html>


继续学习
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> <style> .box{ display:-webkit-flex; display:flex; margin:0;padding:10px;list-style:none;background-color:#eee;} .box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;} #box{ -webkit-flex-direction:row; flex-direction:row; } #box2{ -webkit-flex-direction:row-reverse; flex-direction:row-reverse; } #box3{ height:500px; -webkit-flex-direction:column; flex-direction:column; } #box4{ height:500px; -webkit-flex-direction:column-reverse; flex-direction:column-reverse; } </style> </head> <body> <h2>flex-direction:row</h2> <ul id="box" class="box"> <li>a</li> <li>b</li> <li>c</li> </ul> <h2>flex-direction:row-reverse</h2> <ul id="box2" class="box"> <li>a</li> <li>b</li> <li>c</li> </ul> <h2>flex-direction:column</h2> <ul id="box3" class="box"> <li>a</li> <li>b</li> <li>c</li> </ul> <h2>flex-direction:column-reverse</h2> <ul id="box4" class="box"> <li>a</li> <li>b</li> <li>c</li> </ul> </body> </html>
提交重置代码
上一节 下一节
教程列表
获取帮助
  • 课程推荐
  • 课件下载
课件暂不提供下载，工作人员正在整理中，后期请多关注该课程~

看过本课程的同学也在学

最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)  492831 次播放