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与弹性盒布局的更多相关文章

  1. 深入理解 CSS3 弹性盒布局模型

    Web 应用的样式设计中,布局是非常重要的一部分.布局用来确定页面上不同组件和元素的尺寸和位置.随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率.响应式用户界面设计中最 ...

  2. CSS3 弹性盒布局模型(转)

    简介 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列. 对齐和分配空白空间.即便容器中条目的尺寸未知或是动态变化的,弹性盒布局模型也能正常的工作.在该布局模型中,容器会根 ...

  3. CSS3弹性盒布局方式

    一.CSS3弹性盒子 弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的 ...

  4. CSS3弹性盒布局

    使用自适应的窗口弹性盒布局 可以使div总宽度等于浏览器宽度,而且可以随着浏览器的改变而改变. <!DOCTYPE html> <html lang="zh-CN" ...

  5. 请解释一下css3的flexbox(弹性盒布局模型),以及适用场景

    弹性盒模型是c3规范的新的布局方式,该布局模型的目的是提供一种更加高效的方式来对容器的条目进行布局.对齐和分配空间.在传统的布局中,block布局是把块级元素在垂直方向从上向下一次排列的,而inlin ...

  6. css3之弹性盒模型(Flex Box)

    CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时 ...

  7. CSS3-box-flex弹性盒布局

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. css笔记 - flex弹性盒布局

    flex: display:-webkit-box | -moz-box;盒布局 -webkit-box-flex | -moz-box-flex;弹性盒布局 -webkit-box-ordinal- ...

  9. css怪异盒模型和弹性盒布局(flex)详解及其案例

    一.怪异盒模型 怪异盒模型的属性是box-sizing,他有两个属性值: 1.content-box 这是由 CSS2.1 规定的宽度高度行为.宽度和高度分别应用到元素的内容框.在宽度和高度之外绘制元 ...

随机推荐

  1. Channel的使用

    Channel必须要通过buffer来读写 1. Channel需要通过IO流的getChannel()方法获取 2. buffer需要通过Channel的map()方法获取 package com. ...

  2. 洛谷 - P1593 - 因子和 - 费马小定理

    类似的因为模数比较小的坑还有卢卡斯定理那道,也是有时候逆元会不存在,因为整除了.使用一些其他方法避免通过逆元. https://www.luogu.org/fe/problem/P1593 有坑.一定 ...

  3. Linux下更改mysql版本

    想要更改linux的mysql版本,并不需要重装系统重新选择mysql版本,只需要删除掉原来的mysql然后在安装新的就可以啦 (谨记:一定要做好数据库备份) 详情请参照:大牛博客 over!over ...

  4. Telnet 对memcached进行数据操作

    连接Telnet 127.0.0.1 11211 存储数据 add news 0 1 8 (news为数据名称,1为存储的时间,当为0的时候则为永久储存,永久缓存最多为30天,8为长度) aaaaaa ...

  5. 始终要覆盖toString

    始终要覆盖toString   虽然java.lang.Object提供了toString方法的一个实现,但它返回的字符串通常并不是类的用户所期望看到的.它包含类的名称,以及一个"@&quo ...

  6. 转 Vlan

    1.支持VLAN的交换机一定是三层交换机吗?2.Trunk配置了就可以VLAN间通信吗?3.Trunk具体怎么工作的?4.VLAN间的通信到底是怎么执行的?如果说给若干个纯二层环境加上若干个路由器,我 ...

  7. struts2学习笔记 day02 获取参数 访问ServletAPI 结果类型

  8. Windows类标识符及其妙用

    Windows类标识符 百度百科这样解释: Windows的类标识符class identifier也称为CLASSID或CLSID,是与某一个类对象相联系的唯一标记(UUID).一个准备创建多个对象 ...

  9. O(nlogn)求逆序数对的个数

    #include<iostream> #include<stdio.h> #include<string.h> #include<algorithm> ...

  10. CSS入门使用

    声明标签 HTML <!DOCTYPE> 内链样式表 <body style="background-color:green;margin:0;padding:0;&quo ...