CSS3与弹性盒布局
1、弹性盒布局对齐模式
1.1、弹性盒子
在规定弹性盒子之中的子级元素换行显示之前父级元素必须是弹性盒子模型,也就是设置 display 为 flex
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>弹性盒布局</title>
<style type="text/css">
.div1{
width: 800px;
height: 410px;
display: flex;/*设置为弹性盒模型*/
border: 1px solid red;
margin: 0 auto;
}
.div1 a{
text-decoration: none;
display: inline-block;
flex: auto; /*子元素平均分配父级元素宽度与高度*/
margin: 5px;
background-color: #757575;
}
</style>
</head>
<body>
<div class="div1">
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
</div>
</body>
</html>
结果:
1.2、弹性盒子换行显示
flex-wrap:wrap ; 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行,子项内部会发生断行。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>弹性盒布局</title>
<style type="text/css">
.div1{
width: 800px;
height: 410px;
display: flex;/*设置为弹性盒模型*/
flex-wrap: wrap; /*规定弹性盒子的内容换行显示*/
border: 1px solid red;
margin: 0 auto;
}
.div1 a{
text-decoration: none;
display: inline-block;
width: 150px;
height: 200px;
border: 1px solid red;
background-color: #757575;
}
</style>
</head>
<body>
<div class="div1">
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
</div>
</body>
</html>
结果:
从上面的结果来看虽然子元素换行显示了但是布局效果并不是很好,好的别着急我们接着往下看
1.3、弹性盒子两端对齐
CSS 语法:justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;
属性值:
flex-start 默认值。项目位于容器的开头。
flex-end 项目位于容器的结尾。
center 项目位于容器的中心。
space-between 项目位于各行之间留有空白的容器内。
space-around 项目位于各行之前、之间、之后都留有空白的容器内。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。
justify-content 的属性值有很多,本次为大家介绍的是 space-between 也是在我们布局中比较好用的一中布局方式,缺点就是兼容性不是很理想
废话就不多说了,给大家试试效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>弹性盒布局</title>
<style type="text/css">
.div1{
width: 800px;
height: 410px;
display: flex;/*设置为弹性盒模型*/
flex-wrap: wrap; /*规定弹性盒子的内容换行显示*/
justify-content: space-between; /*规定弹性盒子两端对齐*/
border: 1px solid red;
margin: 0 auto;
}
.div1 a{
text-decoration: none;
display: inline-block;
width: 150px;
height: 200px;
background-color: #757575;
}
</style>
</head>
<body>
<div class="div1">
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
</div>
</body>
</html>
结果:
虽然效果已经很不错了,但是细心的童鞋不难发现我们的子元素并没有与父元素的底部平齐
1.4、弹性盒子交叉轴对齐
CSS 语法 align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;
stretch 默认值。元素被拉伸以适应容器。各行将会伸展以占用剩余的空间。如果剩余的空间是负数,该值等效于'flex-start'。在其它情况下 ,剩余空间被所有行平分,以扩大它们的侧轴尺寸。
center 元素位于容器的中心。各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐,保持弹性盒容器的侧轴起始内 容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。(如果剩下的空间是负数,则各行会向两个方向 溢出的相等距离。)
flex-start 元素位于容器的开头。各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界,之 后的每一行都紧靠住前面一行。
flex-end 元素位于容器的结尾。各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界, 之后的每一行都紧靠住前面一行。
space-between 元素位于各行之间留有空白的容器内。各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行,该值等效 于'flex-start'。在其它情况下,第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界,最后一行的侧轴结束边界紧靠住弹 性盒容器的侧轴结束内容边界,剩余的行则按一定方式在弹性盒窗口中排列,以保持两两之间的空间相等。
space-around 元素位于各行之前、之间、之后都留有空白的容器内。各行在弹性盒容器中平均分布,两端保留子元素与子元素之间间距大小的一半。 如果剩余的空间是负数或弹性盒容器中只有一行,该值等效于'center'。在其它情况下,各行会按一定方式在弹性盒容器中排列,以 保持两两之间的空间相等,同时第一行前面及最后一行后面的空间是其他空间的一半。
属性值有很多,本次介绍一下 space-between
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>弹性盒布局</title>
<style type="text/css">
.div1{
width: 800px;
height: 410px;
display: flex;/*设置为弹性盒模型*/
flex-wrap: wrap; /*规定弹性盒子的内容换行显示*/
justify-content: space-between; /*规定弹性盒子两端对齐*/
align-content: space-between; /*当弹性盒内容为多行显示是 规定交叉轴对齐*/
border: 1px solid red;
margin: 0 auto;
}
.div1 a{
text-decoration: none;
display: inline-block;
width: 150px;
height: 200px;
background-color: #757575;
}
</style>
</head>
<body>
<div class="div1">
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
</div>
</body>
</html>
结果:
非常快速的就完成了一个非常完美的布局了,是不是呢。
小结:这样的布局方式不会脱离标准文档流,所以就不会有需要清除浮动的问题
CSS3与弹性盒布局的更多相关文章
- 深入理解 CSS3 弹性盒布局模型
Web 应用的样式设计中,布局是非常重要的一部分.布局用来确定页面上不同组件和元素的尺寸和位置.随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率.响应式用户界面设计中最 ...
- CSS3 弹性盒布局模型(转)
简介 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列. 对齐和分配空白空间.即便容器中条目的尺寸未知或是动态变化的,弹性盒布局模型也能正常的工作.在该布局模型中,容器会根 ...
- CSS3弹性盒布局方式
一.CSS3弹性盒子 弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的 ...
- CSS3弹性盒布局
使用自适应的窗口弹性盒布局 可以使div总宽度等于浏览器宽度,而且可以随着浏览器的改变而改变. <!DOCTYPE html> <html lang="zh-CN" ...
- 请解释一下css3的flexbox(弹性盒布局模型),以及适用场景
弹性盒模型是c3规范的新的布局方式,该布局模型的目的是提供一种更加高效的方式来对容器的条目进行布局.对齐和分配空间.在传统的布局中,block布局是把块级元素在垂直方向从上向下一次排列的,而inlin ...
- css3之弹性盒模型(Flex Box)
CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时 ...
- CSS3-box-flex弹性盒布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- css笔记 - flex弹性盒布局
flex: display:-webkit-box | -moz-box;盒布局 -webkit-box-flex | -moz-box-flex;弹性盒布局 -webkit-box-ordinal- ...
- css怪异盒模型和弹性盒布局(flex)详解及其案例
一.怪异盒模型 怪异盒模型的属性是box-sizing,他有两个属性值: 1.content-box 这是由 CSS2.1 规定的宽度高度行为.宽度和高度分别应用到元素的内容框.在宽度和高度之外绘制元 ...
随机推荐
- Flex AIR操作文件系统
1.各种文件操作http://blog.csdn.net/zdingxin/article/details/6635376 2.file.browseForDirectory("请选择一个目 ...
- Linux之解决每次git pull/git push都需输入密码设置
操作命令: //执行这两条命令cd / git config --global credential.helper store 执行完命令之后会在.gitconfig文件中多加红色字体 [user] ...
- __enter__,__exit__
目录 上下文管理协议 模拟open 优点 我们知道在操作文件对象的时候可以这么写 with open('a.txt') as f: '代码块' 上述叫做上下文管理协议,即with语句,为了让一个对象兼 ...
- 对单片机C语言的一些误用和总结
在学习单片机的时候才真正知道C语言是什么它是来干什么的~但是C语言用到嵌入式只是它小小的一部分他的应用还有很多地方呢,呵呵我们这里就不讨论这个了.我们是不是在写程序的时候错误很多就算编译通过了也达不到 ...
- java快速排序代码
public class test1 { public static int partition(int[] array,int lo,int hi){ int key=array[lo]; whil ...
- 《Python网络爬虫相关基础概念》
爬虫介绍 引入 之前在授课过程中,好多同学都问过我这样的一个问题:为什么要学习爬虫,学习爬虫能够为我们以后的发展带来那些好处?其实学习爬虫的原因和为我们以后发展带来的好处都是显而易见的,无论是从实际的 ...
- 洛谷1005(dp)
1.不要贪,缩小区间去dp就好. 2.预处理指数. 3.__int128可还行. #include <cstdio> #include <cctype> #include &l ...
- RTOS之CMSIS-RTOS
CMSIS-RTOS 是实时操作系统的通用 API.它提供了标准化的编程接口,它只是封装了RTX/embos,以后还可能封装freeRTOS,uc/os等等第三方OS,CMSIS RTOS是ARM现在 ...
- 剑指offer部分编程题
一 斐波那契数列 题目描述: 大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项. n<=39 问题分析: 可以肯定的是这一题通过递归的方式是肯定能做出来,但是这样会有 ...
- Linux--NiaoGe-Service-07网络安全与主机基本防护
Linux系统内自带的防火墙有两层: 第一层:数据包过滤防火墙:IP Filtering和Net Filter 要进入Linux本机的数据包都会先通过Linux预先内置的防火墙(Net Filter) ...