<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

  .flex-container {

    display: flex;

    /*换行后有多根轴线，align-content在只有一根轴线的情况下看不到效果*/

    flex-wrap: wrap;

	/* align-content适用于多根轴线，行与行之间的布局 */

	/*默认值：子盒子均等分父盒子的高度*/

	/*align-content: stretch;*/

	/*整体上对齐*/

	/*align-content: flex-start;*/

	/*整体居中对齐*/

	/*align-content: center;*/

	/*整体下对齐*/

	/*align-content: flex-end;*/

	/*行与行，平分父盒子多余的空白*/

	/*align-content: space-between;*/

	/*各行均等分，子盒子在该行垂直居中显示*/

	align-content: space-around;

    width: 400px;

    height: 400px;

    background-color: gray;

  }

  .flex-item {

    background-color: green;

    width: 100px;

    margin: 5px;

  }

  </style>

</head>

<body>

  <div class="flex-container">

    <div class="flex-item">flex item 1</div>

    <div class="flex-item">flex item 2</div>

    <div class="flex-item">flex item 3</div>

    <div class="flex-item">flex item 4</div>

    <div class="flex-item">flex item 5</div>

    <div class="flex-item">flex item 6</div>

    <div class="flex-item">flex item 7</div>

  </div>

</body>

</html>

flexbox父盒子align-content属性的更多相关文章

  1. flexbox父盒子align-items属性

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

  2. flexbox父盒子flex-wrap属性

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

  3. flexbox父盒子justify-content属性

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

  4. flexbox父盒子flex-direction属性

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

  5. flexbox子盒子align-self属性

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

  6. css FlexBox 弹性盒子常用方法总结

    总结一下弹性盒子常用的方法,弹性盒子的功能强大,这次我做了兼容性的felxbox,虽然代码多了一点,但在项目时候可以直接复制过来用,同时在项目上线的时候,如果这时候弹性盒子出了兼容问题,那就可急了~ ...

  7. 盒子总结,文本属性操作,reset操作,高级选择器,高级选择器优先级,边界圆角(了解),a标签的四大伪类,背景图片操作,背景图片之精灵图

    盒子总结 ''' block: 设置宽高 1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width) 2.没有设置高,高由内容撑开 设置了宽高 一定采用设置的 ...

  8. 行内元素(inline标签)设置了行高为什么不生效，还是表现为父盒子的行高？行内元素行高问题终极解释

    最近在看张鑫旭大佬的<css世界>,读到5.2.4  内联元素 line-height 的“大值特性” ,产生了疑惑, 在开发中确实也遇到了同样的问题,深入探究后得出结果,先说结论吧,论证 ...

  9. 怎么样子盒子能撑起父盒子？浮动,BFC,边距重叠

    怎么样子盒子能撑起父盒子? 从行内元素跟块元素来看: 一般情况下,行内元素只能包含数据和其他行内元素. 而块级元素可以包含行内元素和其他块级元素. 块级元素内部可以嵌套块级元素或行内元素. 建议行内元 ...

随机推荐

  1. lvreduce -L 1000M /dev/vg0/lv0 表示最后缩减至多大,不是减少了多大

    resize2fs在前 lvextend 在后 将/dev/vg0/lv0缩减到1000M umount /lv/ 取消挂载 [root@desktop4 ~]# e2fsck -f /dev/vg0 ...

  2. 跨域通信--Window.postMessage()

    一.跨源通信概述 源:协议.端口号(https默认值433).主机域名(document.domain) 作用:向目标窗口派发MessageEvent消息(四个属性) 兼容参考 MessageEven ...

  3. Maven打包生成源码包和Javadoc包

    https://blog.csdn.net/top_code/article/details/53586551 当我们开发了一个公共模块,将它deploy到Maven仓库时,最好同时提供源码包和Jav ...

  4. nvalid bound statement (not found)

    问题详情: org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.coocaa.te ...

  5. postgresql远程连接中断的处理

    在网络上连接远程服务器postgresql时,不活动时间稍长就会自动断开连接,不利于操作. 琢磨了一下,服务器上使用以下网络配置时,解决了这个问题.   #man 7 tcp   net.ipv4.t ...

  6. C和C++的内存操作小贴士（一）：const char*的内存释放问题

    C和C++的内存操作一直是困扰开发人员的老问题,基本概念相信老司机们都很清楚了,在这里就不做过多的描述了,只是把在实际开发中可能遇到的一些小问题的案例列举下,供大家参考.“C和C++的内存操作小贴士” ...

  7. 在kali linux之下安装wps之后 报错字体缺失

    启动WPS for Linux后,出现提示"系统缺失字体" . 出现提示的原因是因为WPS for Linux没有自带windows的字体,只要在Linux系统中加载字体即可. 第 ...

  8. pymysql和MySQLdb

    MySQLdb创建mysql数据库表 其实mysqldb创建表是有限制的,要求是5.1-5.5版本 pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb几乎相同. 1.下载 首 ...

  9. c#中的对象生命周期

    无论是指类型的变量或是类类型的变量,其存储单元都是在栈中分配的,唯一不同的是类类型的变量实际上存储的是该类对象的指针,相当于vc6中的CType*,只是在.net平台的语言中将指针的概念屏蔽掉了.我们 ...

  10. (转) IDirectSoundBuffer::SetVolume的参数与音量分贝的函数关系

    假如将播放器的控制音量切割成0-100的话,由于IDirectSoundBuffer::SetVolume(LONG lVolume)中参数的输入值是[-10000,0] MySetVolume( D ...