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 布局的元素 ...
随机推荐
- python中函数的定义及调用
python中函数的定义及使用方法 1.函数的概念:函数是将具有独立功能的代码块组织为一个整体,使其具有特殊功能的代码集; 2.函数的作用:使用函数可以加强代码的复用性,提高程序编写的效率; 3.函数 ...
- springboot中引用配置文件中的参数
首先可以看到这是做微信登陆时候的配置,一般不会写死都是通过配置文件获取,所以,记载配置文件中 那么怎么引用呢: 可以看到直接注入的方式就可以引用了,所以看下面: 进行页面跳转,并且带有参数的, 使用m ...
- 认识AppDomain类
原文:认识AppDomain类 表示应用程序域,它是一个应用程序在其中执行的独立环境. 创建新的 AppDomain,在该新建 AppDomain 中实例化类型,以及与该类型的对象通信. usingn ...
- python接口自动化（post请求）
python接口自动化(post请求) 一.post请求的作用:新增资源 二.data格式的参数请求(data是字典对象) #1.导包 import requests #2.调用post方法 #请求的 ...
- UIPageViewController看这篇就够了
先说初始化 - (UIPageViewController *)PageViewController{ if(!_PageViewController){ //书脊位置,只有在UIPageViewCo ...
- 关于MySQL的insert添加自动获取日期的now()的用法
例如我的MySQL数据库里有个表table1,它的字段有id,date1,date2,除id外都是Datetime类型的.那么插值语句这样写:insert into table1(date1,date ...
- ps使logo背景色透明
方法一:魔法工具(对复杂的logo误差较大) 魔法工具--左键点击选区--delete--保存 方法二:拾色器 1.有的站上的素材图片不能直接用,需要先变成rgb图像,可这样操作:图像\模式,选择rg ...
- CSP-S2019旅游记
CSP-S2019 你问我为什么写旅游记? 因为好像除了旅游我今年啥都没干 Day0 校内模拟一直被吊锤,考前几场几乎要爆零 这提莫就不是什么好兆头 在家二刷水淹东京完回学校,带了一大堆家当上车 去广 ...
- 2019 hdu多校1
A:一类线性dp,时间卡的有点紧 /* 定义 dp[t][i][j][k]代表填完前 t 个位置后,{0, 1, 2, 3} 这 4 个数字最后一次出现的位置, 排序后为 t, i, j, k(t & ...
- 微信小程序--跳转页面常用的两种方法
一.bindtap="onProductsItemTap"绑定点击跳转事件 在.wxml文件中绑定 在.js文件中实现绑定事件函数 二.navigator标签配合URL跳转法 在w ...