CSS学习（二十）-flexbox模型
2016-03-26 23:09
531 查看
一、理论：
1.混合版本flexbox模型
a.display
1)flexbox 设置元素为块级容器
2)inline-flexbox 设置元素为内联块伸缩容器
b.display容器的基本使用
1)主要用于IE10浏览器
2.伸缩流方向flex-direction
a.flex-direction
1)row ltr-->自左向右排列，rtl-->自右向左排列
2)row-reverse ltr-->自右向左排列，rtl-->自左向右排列
3)column 按出现顺序从上到下排列
4)column-reverse 伸缩项目从下到上排列
二、实践：
(注：1，2，3是伸缩布局盒，4，5是flexbox模型)
1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css" media="screen">
*{
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#header,#footer{
width:100%;
padding:10px;
background-color:#ccc;
}
#sidebar-left,
#sidebar-right{
width:220px;
padding:10px;
background-color: #123589;
}
#main{
background-color: #9eaab6;
padding: 10px;
margin : 0 10px;
}
#page{
width:100%;
display:-moz-box;
display:-webkit-box;
display:box;
}
#main{
-moz-box-flex: 1;
-webkit-box-flex:1;
-moz-box-flex: 1;
}
</style>
</head>
<body>
<div id = "header">
<h1>Header</h1>
</div>
<div id = "page">
<div id="main">
<h1>MainContent</h1>
</div>
<div id="sidebar-left">
<h1>LeftContent</h1>
</div>
<div id="sidebar-right">
<h1>RightContent</h1>
</div>
</div>
<div id="footer">
<p>footer</p>
</div>
</body>
</html>
2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css" media="screen">
*{
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#header,#footer{
width:100%;
padding:10px;
background-color:#ccc;
}
#sidebar-left,
#sidebar-right{
width:220px;
padding:10px;
background-color: #123589;
}
#sidebar-right{
-moz-box-ordinal-group: 2;
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
}
#main{
background-color: #9eaab6;
padding: 10px;
margin : 0 10px;
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
-moz-box-ordinal-group: 2;
-webkit-box-ordinal-group: 2;
box-ordinal-group:2;
}
#page{
width:100%;
display:-moz-box;
display:-webkit-box;
display:box;
}
#main{
-moz-box-flex: 1;
-webkit-box-flex:1;
-moz-box-flex: 1;
}
</style>
</head>
<body>
<div id = "header">
<h1>Header</h1>
</div>
<div id = "page">
<div id="main">
<h1>MainContent</h1>
</div>
<div id="sidebar-left">
<h1>LeftContent</h1>
</div>
<div id="sidebar-right">
<h1>RightContent</h1>
</div>
</div>
<div id="footer">
<p>footer</p>
</div>
</body>
</html>
3.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css" media="screen">
body{
height: 100%;
display: -webkit-box;
display:-moz-box;
display:box;
-moz-box-orient: vertical;
-webkit-box-orient:vertical;
box-orient:vertical;
width:100%;
}
*{
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-sizing:border-box;
}
#header,#footer{
width:100%;
padding:10px;
background-color:#ccc;
}
#sidebar-left,
#sidebar-right{
width:220px;
padding:10px;
background-color: #123589;
}
#sidebar-right{
-moz-box-ordinal-group: 3;
-webkit-box-ordinal-group: 3;
box-ordinal-group: 3;
}
#main{
background-color: #9eaab6;
padding: 10px;
margin:0 10px;
-moz-box-ordinal-group: 2;
-webkit-box-ordinal-group: 2;
-moz-box-group: 2;
}
#page{
width:100%;
display:-moz-box;
display:-webkit-box;
display:box;
}
#main{
-moz-box-flex: 1;
-webkit-box-flex:1;
-moz-box-flex: 1;
}
</style>
</head>
<body>
<div id = "header">
<h1>Header</h1>
</div>
<div id = "page">
<div id="main">
<h1>MainContent</h1>
</div>
<div id="sidebar-left">
<h1>LeftContent</h1>
</div>
<div id="sidebar-right">
<h1>RightContent</h1>
</div>
</div>
<div id="footer">
<p>footer</p>
</div>
</body>
</html>
4.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css" media="screen">
*{
margin:0;
padding: 0;
}
.flexbox-container{
padding:10px;
border:1px solid hsla(120,30%,50%,0.8);
margin:50px;
background-color: hsla(10,80%,10%,0.2);
}
.flexbox-container >div{
width: 100%;
height: 100px;
border:1px solid hsla(120,30%,50%,0.8);
margin: 5px;
font-size:20px;
text-align: center;
line-height: 100px;
color:#fff;
font-weight: bold;
}
.flexbox-container > div:nth-child(1){
background-color: hsla(120,30%,50%,0.8);
}
.flexbox-container > div:nth-child(2){
background-color: hsla(120,30%,10%,0.8);
}
.flexbox-container > div:nth-child(3){
background-color: hsla(20,30%,50%,0.8);
}
.flexbox-container > div:nth-child(4){
background-color: hsla(20,80%,50%,0.8);
}
.flexbox-container > div:nth-child(5){
background-color: hsla(320,80%,50%,0.8);
}
.flexbox-container > div:nth-child(6){
background-color: hsla(320,80%,50%,0.8);
}
.flexbox-container{
display: ms-flexbox;
-ms-flex-direction: row;
}
</style>
</head>
<body>
<div class="flexbox-container">
<div>Box1</div>
<div>Box2</div>
<div>Box3</div>
<div>Box4</div>
<div>Box5</div>
<div>Box6</div>
</div>
</body>
</html>
5.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css" media="screen">
*{
margin:0;
padding: 0;
}
.flexbox-container{
padding:10px;
border:1px solid hsla(120,30%,50%,0.8);
margin:50px;
background-color: hsla(10,80%,10%,0.2);
}
.flexbox-container >div{
width: 100%;
height: 100px;
border:1px solid hsla(120,30%,50%,0.8);
margin: 5px;
font-size:20px;
text-align: center;
line-height: 100px;
color:#fff;
font-weight: bold;
}
.flexbox-container > div:nth-child(1){
background-color: hsla(120,30%,50%,0.8);
}
.flexbox-container > div:nth-child(2){
background-color: hsla(120,30%,10%,0.8);
}
.flexbox-container > div:nth-child(3){
background-color: hsla(20,30%,50%,0.8);
}
.flexbox-container > div:nth-child(4){
background-color: hsla(20,80%,50%,0.8);
}
.flexbox-container > div:nth-child(5){
background-color: hsla(320,80%,50%,0.8);
}
.flexbox-container > div:nth-child(6){
background-color: hsla(320,80%,50%,0.8);
}
.flexbox-container{
display:-ms-flexbox;
-ms-flex-direction:column;
}
</style>
</head>
<body>
<div class="flexbox-container">
<div>Box1</div>
<div>Box2</div>
<div>Box3</div>
<div>Box4</div>
<div>Box5</div>
<div>Box6</div>
</div>
</body>
</html>
1.混合版本flexbox模型
a.display
1)flexbox 设置元素为块级容器
2)inline-flexbox 设置元素为内联块伸缩容器
b.display容器的基本使用
1)主要用于IE10浏览器
2.伸缩流方向flex-direction
a.flex-direction
1)row ltr-->自左向右排列，rtl-->自右向左排列
2)row-reverse ltr-->自右向左排列，rtl-->自左向右排列
3)column 按出现顺序从上到下排列
4)column-reverse 伸缩项目从下到上排列
二、实践：
(注：1，2，3是伸缩布局盒，4，5是flexbox模型)
1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css" media="screen">
*{
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#header,#footer{
width:100%;
padding:10px;
background-color:#ccc;
}
#sidebar-left,
#sidebar-right{
width:220px;
padding:10px;
background-color: #123589;
}
#main{
background-color: #9eaab6;
padding: 10px;
margin : 0 10px;
}
#page{
width:100%;
display:-moz-box;
display:-webkit-box;
display:box;
}
#main{
-moz-box-flex: 1;
-webkit-box-flex:1;
-moz-box-flex: 1;
}
</style>
</head>
<body>
<div id = "header">
<h1>Header</h1>
</div>
<div id = "page">
<div id="main">
<h1>MainContent</h1>
</div>
<div id="sidebar-left">
<h1>LeftContent</h1>
</div>
<div id="sidebar-right">
<h1>RightContent</h1>
</div>
</div>
<div id="footer">
<p>footer</p>
</div>
</body>
</html>
2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css" media="screen">
*{
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#header,#footer{
width:100%;
padding:10px;
background-color:#ccc;
}
#sidebar-left,
#sidebar-right{
width:220px;
padding:10px;
background-color: #123589;
}
#sidebar-right{
-moz-box-ordinal-group: 2;
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
}
#main{
background-color: #9eaab6;
padding: 10px;
margin : 0 10px;
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
-moz-box-ordinal-group: 2;
-webkit-box-ordinal-group: 2;
box-ordinal-group:2;
}
#page{
width:100%;
display:-moz-box;
display:-webkit-box;
display:box;
}
#main{
-moz-box-flex: 1;
-webkit-box-flex:1;
-moz-box-flex: 1;
}
</style>
</head>
<body>
<div id = "header">
<h1>Header</h1>
</div>
<div id = "page">
<div id="main">
<h1>MainContent</h1>
</div>
<div id="sidebar-left">
<h1>LeftContent</h1>
</div>
<div id="sidebar-right">
<h1>RightContent</h1>
</div>
</div>
<div id="footer">
<p>footer</p>
</div>
</body>
</html>
3.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css" media="screen">
body{
height: 100%;
display: -webkit-box;
display:-moz-box;
display:box;
-moz-box-orient: vertical;
-webkit-box-orient:vertical;
box-orient:vertical;
width:100%;
}
*{
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-sizing:border-box;
}
#header,#footer{
width:100%;
padding:10px;
background-color:#ccc;
}
#sidebar-left,
#sidebar-right{
width:220px;
padding:10px;
background-color: #123589;
}
#sidebar-right{
-moz-box-ordinal-group: 3;
-webkit-box-ordinal-group: 3;
box-ordinal-group: 3;
}
#main{
background-color: #9eaab6;
padding: 10px;
margin:0 10px;
-moz-box-ordinal-group: 2;
-webkit-box-ordinal-group: 2;
-moz-box-group: 2;
}
#page{
width:100%;
display:-moz-box;
display:-webkit-box;
display:box;
}
#main{
-moz-box-flex: 1;
-webkit-box-flex:1;
-moz-box-flex: 1;
}
</style>
</head>
<body>
<div id = "header">
<h1>Header</h1>
</div>
<div id = "page">
<div id="main">
<h1>MainContent</h1>
</div>
<div id="sidebar-left">
<h1>LeftContent</h1>
</div>
<div id="sidebar-right">
<h1>RightContent</h1>
</div>
</div>
<div id="footer">
<p>footer</p>
</div>
</body>
</html>
4.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css" media="screen">
*{
margin:0;
padding: 0;
}
.flexbox-container{
padding:10px;
border:1px solid hsla(120,30%,50%,0.8);
margin:50px;
background-color: hsla(10,80%,10%,0.2);
}
.flexbox-container >div{
width: 100%;
height: 100px;
border:1px solid hsla(120,30%,50%,0.8);
margin: 5px;
font-size:20px;
text-align: center;
line-height: 100px;
color:#fff;
font-weight: bold;
}
.flexbox-container > div:nth-child(1){
background-color: hsla(120,30%,50%,0.8);
}
.flexbox-container > div:nth-child(2){
background-color: hsla(120,30%,10%,0.8);
}
.flexbox-container > div:nth-child(3){
background-color: hsla(20,30%,50%,0.8);
}
.flexbox-container > div:nth-child(4){
background-color: hsla(20,80%,50%,0.8);
}
.flexbox-container > div:nth-child(5){
background-color: hsla(320,80%,50%,0.8);
}
.flexbox-container > div:nth-child(6){
background-color: hsla(320,80%,50%,0.8);
}
.flexbox-container{
display: ms-flexbox;
-ms-flex-direction: row;
}
</style>
</head>
<body>
<div class="flexbox-container">
<div>Box1</div>
<div>Box2</div>
<div>Box3</div>
<div>Box4</div>
<div>Box5</div>
<div>Box6</div>
</div>
</body>
</html>
5.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css" media="screen">
*{
margin:0;
padding: 0;
}
.flexbox-container{
padding:10px;
border:1px solid hsla(120,30%,50%,0.8);
margin:50px;
background-color: hsla(10,80%,10%,0.2);
}
.flexbox-container >div{
width: 100%;
height: 100px;
border:1px solid hsla(120,30%,50%,0.8);
margin: 5px;
font-size:20px;
text-align: center;
line-height: 100px;
color:#fff;
font-weight: bold;
}
.flexbox-container > div:nth-child(1){
background-color: hsla(120,30%,50%,0.8);
}
.flexbox-container > div:nth-child(2){
background-color: hsla(120,30%,10%,0.8);
}
.flexbox-container > div:nth-child(3){
background-color: hsla(20,30%,50%,0.8);
}
.flexbox-container > div:nth-child(4){
background-color: hsla(20,80%,50%,0.8);
}
.flexbox-container > div:nth-child(5){
background-color: hsla(320,80%,50%,0.8);
}
.flexbox-container > div:nth-child(6){
background-color: hsla(320,80%,50%,0.8);
}
.flexbox-container{
display:-ms-flexbox;
-ms-flex-direction:column;
}
</style>
</head>
<body>
<div class="flexbox-container">
<div>Box1</div>
<div>Box2</div>
<div>Box3</div>
<div>Box4</div>
<div>Box5</div>
<div>Box6</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS圣杯布局与双飞翼布局
- CSS中 清除浮动解决“包含问题”
- css div靠最下
- css透明属性
- css3多列example
- 他们的CSS3 3D正方体
- css3的基本内容
- css的基本内容
- <div+css页面布局课堂笔记>5---与盒子相关的CSS属性第二部分
- CSS3 卡片翻转(transform)
- github反应过慢，css加载失败问题
- WPF样式的使用
- CSS兼容IE6 IE7 IE8 IE9 Firefox的总结
- <div+css页面布局课堂笔记>4---与盒子相关的CSS属性
- css文字超出自动显示省略号
- [DIV/CSS] 认识一下 Material Design Lite 布局组件
- [DIV/CSS] CSS 属性 :before && :after的用法，伪类和伪元素的区别
- <div+css页面布局课堂笔记>3---页面布局的盒子模型（IE与其他浏览器区别）
- django中css问题
- css 兼容ie6,ie7,ff的fixed,元素上下端固定定位方法