css---flex布局--容器
2024-09-05 09:42:56
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
容器设置
新版的为display为flex 老版的为display为webkit-box；
布局方向 老版的布局方向
flex-direction: row; -webkit-box-orient: horizontal;
flex-direction: column; -webkit-box-orient: vertical;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
{
margin: ;
padding: ;
}
#wrap{
width: 400px;
height: 300px;
border: 1px solid;
margin:100px auto;
display:flex;
/*x排列*/
flex-direction: column;
}
#wrap > .item{
width: 50px;
height: 50px;
background: pink;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body><div id="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
flex布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
{
margin: ;
padding: ;
}
#wrap{
width: 400px;
height: 300px;
border: 1px solid;
margin:100px auto;
display:-webkit-box;
/* x排列*/
-webkit-box-orient: vertical;
}
#wrap > .item{
width: 50px;
height: 50px;
background: pink;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body><div id="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
box布局
老版容器排列方向
-webkit-box-direction: normal;
-webkit-box-direction: reverse;
（注意:项目永远是沿着主轴的正方向排列的）
-webkit-box-direction属性本质上改变了主轴的方向
新版
flex-direction:row-reverse;
flex-direction:column-reverse;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: ;
padding: ;
}
#wrap{
width: 400px;
height: 300px;
border: 1px solid;
margin:100px auto;
display:flex;
flex-direction: row-reverse;
}
#wrap > .item{
width: 50px;
height: 50px;
background: pink;
text-align: center;
line-height: 50px;
} </style>
</head>
<body>
<div id="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
flex容器排列方向
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: ;
padding: ;
}
#wrap{
width: 400px;
height: 300px;
border: 1px solid;
margin:100px auto;
display:-webkit-box;
/*-webkit-box-orient控制主轴和侧轴分别是哪一根*/
-webkit-box-orient:horizontal;
/*-webkit-box-direction控制主轴方向*/
-webkit-box-direction: reverse;
}
#wrap > .item{
width: 50px;
height: 50px;
background: pink;
text-align: center;
line-height: 50px;
} </style>
</head>
<body>
<div id="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
box排列方向
老版
富裕空间的管理（主轴）
start
end
center
justify
-webkit-box-pack:start; 不会给项目区分配空间，只是确定富裕空间的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: ;
padding: ;
}
#wrap{
width: 400px;
height: 300px;
border: 1px solid;
margin:100px auto;
display:-webkit-box;
/*-webkit-box-orient控制主轴和侧轴分别是哪一根*/
-webkit-box-orient:horizontal;
/*-webkit-box-direction控制主轴方向*/
-webkit-box-direction: reverse;
/*
start 富裕空间在右边
end 富裕空间在左边
center 富裕空间在两边
justify 富裕空间在项目之间
*/
-webkit-box-pack: start;
}
#wrap > .item{
width: 50px;
height: 50px;
background: pink;
text-align: center;
line-height: 50px;
} </style>
</head>
<body>
<div id="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
old box富裕空间主
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: ;
padding: ;
}
#wrap{
width: 400px;
height: 300px;
border: 1px solid;
margin:100px auto;
display:-webkit-box;
/*-webkit-box-orient控制主轴和侧轴分别是哪一根*/
-webkit-box-orient:horizontal;
/*-webkit-box-direction控制主轴方向*/
-webkit-box-direction: reverse;
/*
start 富裕空间在右边
end 富裕空间在左边
center 富裕空间在两边
justify 富裕空间在项目之间
*/
-webkit-box-pack: start;
}
#wrap > .item{
width: 50px;
height: 50px;
background: pink;
text-align: center;
line-height: 50px;
} </style>
</head>
<body>
<div id="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
old box 富余空间在侧
富裕空间的管理（侧轴）
start
end
center
-webkit-box-align:center; 不会给项目区分配空间，只是确定富裕空间的位置
新的
更强大的富裕空间的管理（主轴）
justify-content: flex-start;
flex-start
flex-end
center
space-between
space-around(box 没有的)
更强大的富裕空间的管理（侧轴）
align-items: stretch;
flex-start
flex-end
center
baseline(box 没有的)
stretch(box 没有的)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: ;
padding: ;
}
#wrap{
width: 400px;
height: 300px;
border: 1px solid;
margin:100px auto;
display:flex;
flex-direction: row-reverse;
/*
flex-start 富裕空间在主轴的正方向
flex-end 富裕空间在主轴的反方向
center 富裕空间在主轴的两边
space-between 富裕空间在项目之间
space-around(box 没有的) 富裕空间在项目两边
*/
justify-content: space-around;
}
#wrap > .item{
width: 50px;
height: 50px;
background: pink;
text-align: center;
line-height: 50px;
} </style>
</head>
<body>
<div id="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
new flex 富余空间在主轴
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: ;
padding: ;
}
#wrap{
width: 400px;
height: 300px;
border: 1px solid;
margin:100px auto;
display:flex;
flex-direction: row-reverse;
/*
flex-start 富裕空间在主轴的正方向
flex-end 富裕空间在主轴的反方向
center 富裕空间在主轴的两边
space-between 富裕空间在项目之间
space-around(box 没有的) 富裕空间在项目两边
*/
justify-content: space-around;
/*
flex-start: 富裕空间在侧轴的正方向;
flex-end: 富裕空间在侧轴的反方向;
content: 富裕空间在侧轴的两边; baseline(box 没有的) 按基线对齐
stretch(box 没有的) 等高布局
*/
align-items: stretch;
}
#wrap > .item{
width: 50px;
height: 50px;
background: pink;
text-align: center;
line-height: 50px;
} </style>
</head>
<body>
<div id="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
new flex富余空间在侧轴
老版old box弹性空间管理
弹性空间的管理：将富裕空间按比例分配到各个项目上
-webkit-box-flex: 1;
默认值:0 不可继承
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: ;
padding: ;
}
#wrap{
width: 400px;
height: 300px;
border: 1px solid;
margin:100px auto;
display:-webkit-box;
/*-webkit-box-orient控制主轴和侧轴分别是哪一根*/
-webkit-box-orient:horizontal;
/*-webkit-box-direction控制主轴方向*/
-webkit-box-direction: normal;
/*
start 富裕空间在右边（x） 下边（y）
end 富裕空间在左边 （x） 上边（y）
center 富裕空间在两边
justify 富裕空间在项目之间
*/
-webkit-box-pack: start;
/*
start 富裕空间在右边（x） 下边（y）
end 富裕空间在左边 （x） 上边（y）
center 富裕空间在两边
*/
-webkit-box-align:start;
}
#wrap > .item{
width: 50px;
height: 50px;
background: pink;
text-align: center;
line-height: 50px;
/*
* 弹性空间管理
* 将主轴上的富裕空间按比例分配到项目上!
*
* */
-webkit-box-flex: ;
} #wrap > .item:nth-child(){
-webkit-box-flex: ;
}
</style>
</head>
<body>
<div id="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
-webkit-box-flex:1;
新版本 flex 弹性空间管理
flex-grow: 1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: ;
padding: ;
}
#wrap{
width: 400px;
height: 300px;
border: 1px solid;
margin:100px auto;
display:flex;
flex-direction: row-reverse;
/*
flex-start 富裕空间在主轴的正方向
flex-end 富裕空间在主轴的反方向
center 富裕空间在主轴的两边
space-between 富裕空间在项目之间
space-around(box 没有的) 富裕空间在项目两边
*/
justify-content: space-around;
/*
flex-start: 富裕空间在侧轴的正方向;
flex-end: 富裕空间在侧轴的反方向;
content: 富裕空间在侧轴的两边; baseline(box 没有的) 按基线对齐
stretch(box 没有的) 等高布局
*/
align-items: stretch;
}
#wrap > .item{
width: 50px;
height: 50px;
background: pink;
text-align: center;
line-height: 50px;
flex-grow: ;
} #wrap > .item:nth-child(){
flex-grow: ;
} </style>
</head>
<body>
<div id="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
flex-grow：1；
最新文章
- Win10 HOSTS锁定 无法提权 修改 解决办法 100%有效
- c++中的宏 #define _CLASSDEF(name) class name
- Redis笔记（五）Redis的事务
- M1-S70卡片介绍
- RESTful架构
- vim解决中文显示乱码问题
- 微支付开发（.net）
- vs 2013 编译zlib
- Swift - 33 - 返回函数类型和函数嵌套
- HDU 5724 Chess（博弈论）
- A*算法进入
- 022 component（组件）关联映射
- whereis 命令详解
- 试着讲清楚：js代码运行机制
- 【BZOJ1146】网络管理（整体二分）
- 深入解读XML解析
- Visual Studio 2010 Shortcuts
- 【PMP】事业环境因素和组织过程资产
- STM32F103X datasheet学习笔记---DMA
- LD_LIBRARY_PATH