css---flex布局--容器
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；
css---flex布局--容器的更多相关文章
- CSS Flex布局完全指南 #flight.Archives002
Title/CSS Flex布局完全指南 #flight.Archives002 序(from Ruanyf) : 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模 ...
- Flex布局-容器的属性
本文部分内容参考阮一峰大神博客,原文地址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex布局即弹性布局,使用起来十分方便灵活 ...
- CSS flex 布局快速入门
以前已经学过flex了,一直没做笔记,现在做下笔记再回忆下. 首先,flex布局的迷之属性们,如果一知半解,机械记忆的话,那不到半个月基本忘光光.先感受一下这12个flex布局属性,是不是很“迷”人. ...
- 轻轻松松学CSS:Flex布局
Flex布局就是"弹性布局",它可以简便.完整.响应式地实现各种页面布局.引入弹性布局的目的,当页面需要适应不同的屏幕大小确保元素拥有恰当的布局方式,对一个容器中的子元素进行排列 ...
- css flex布局
关于flex布局的一些简单用法 效果(下图) 实现代码: <!--html--> <div class="wrap"> <div class=&quo ...
- css flex布局详解
来源:https://blog.csdn.net/liveinmylife/article/details/51838939 1,flex布局是个什么东西? 官方说法:Flex是Flexible Bo ...
- CSS Flex布局整理
Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...
- [Web 前端 ] 还在用浮动吗？CSS flex布局你了解多少？
cp from : https://blog.csdn.net/wwwxuewen/article/details/80859764 传统的布局:围绕盒子模型(border.margin.paddin ...
- CSS Flex布局属性整理
Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...
- CSS flex 布局学习笔记
写在前面 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局. 采用 Flex 布局的元素 ...
随机推荐
- Feign 系列（04）Contract 源码解析
Feign 系列(04)Contract 源码解析 [TOC] Spring Cloud 系列目录(https://www.cnblogs.com/binarylei/p/11563952.html# ...
- jetson nano VNC
寻找比较好的远程桌面方式,最新系统里有写. ======================================================================= README ...
- !vtop 命令
这命令超级牛B ,用途是算内存所在屋里地址 !vtop 命令可以有两个参数,第一个参数是CR3 寄存器的值,第二个参数是要查询的虚拟地址是多少,比如 kd> !vtop 19001e0 7c80 ...
- ES7/ES8 语法学习
作为一个前端开发者,感觉需要学习的东西贼多,ES6刚学会用没多久,又得学习了解ES7/ES8新增的东西,这里是看了大佬们文章的一点点总结以及摘抄的内容,给自己当笔记使用 内容转载自:https://w ...
- Html+css编写太阳星系
我们都知道太阳系是以太阳为中心的,和所有受到太阳的引力约束天体的集合体.包括八大行星(由离太阳从近到远的顺序:水星.金星.地球.火星.木星.土星.天王星.海王星),而我用html和css所写的就是八大 ...
- PushSharp 由于远程方已关闭传输流，身份验证失败。
前段时间用到了PushSharp给APNS发推送,但是用的时候遇见很诡异的事情,每次第一次运行的时候能成功发送到 但是接下来就无限的提示“由于远程方已关闭传输流,身份验证失败. “ 然后我就各种找原因 ...
- Windows中区位码转换为机内码
步骤的简化 区位码的区和位分别加上32得到国标码, 再分别加上128得到机内码 区位码的区和位分别加上160得到机内码 区位码加上A0A0H = 机内码 示例: 我 我的区位码是4650 区位码 46 ...
- 关于第一次web前端面试的记录
最近参加了一场面试,感觉自己题目都懂,但是说起来就是有点说不明白,所以写个博客整理以下吧.答案不少不是面试时回答的答案,只是整理一下可行答案 1. 如图1,使B相对于A垂直居中 图1 <styl ...
- Android 防止切换横屏闪退
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="ht ...
- 后缀自动机模板——不同子串个数p2408
后缀自动机的入门博客 https://www.luogu.org/blog/Kesdiael3/hou-zhui-zi-dong-ji-yang-xie 有两种求法,分别对应了两种性质 #includ ...