<!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. python 输出当前行号

    import sys print sys._getframe().f_lineno ---------------------------------------------------------- ...

  2. Sublime Text3工具的安装、破解、VIM功能vintage插件教程

    1.安装Sublime Text 3  下载安装:http://www.sublimetext.com/3 Package Control安装:https://sublime.wbond.net/in ...

  3. ASP.NET CORE 开发路线

    .NET CORE 开发路线图,时刻提醒自己

  4. 強大的javascrpt原型链學習

    一个自带隐式的 __proto__ 属性[implicit __proto__ property],指向foo的原型 這有點類似實現C# 繼承作用 a類的公共東西,給b和c類共用 var a = { ...

  5. 使用x11vnc作为vncserver端

    1 安装x11vnc $ sudo apt-get update $ sudo apt-get install x11vnc 2 生成密码 $ x11vnc -storepasswd Enter VN ...

  6. vb 三种启动模式

    正常启动不用说了 就是虚拟机和显示部分在同一个程序里进行 直接关闭程序 就都关闭了 相当于我们普通的电脑, 有主机和显示器无界面启动 也很好理解 ,就是在后台启动虚拟机,如同服务器, 我们只有一个主机 ...

  7. Java Management Extensions (JMX) - Best Practices 最佳实践

    Java Management Extensions (JMX) - Best Practices 注意,本文一些管理可能与JMX API或JSR 77 (J2EE management)不一致.它们 ...

  8. SpringMVC系列（二）: SpringMVC各个注解的使用

    1.@RequestMapping 1.@RequestMapping除了能修饰方法,还能修饰类(1)修饰类:提供初步的请求映射信息,相对于web请求的根目录(2)修饰方法:提供进一步的细分映射信息相 ...

  9. Python——pyiso8601

    该模块不是Python内建的模块,为Python补充了 ISO 8601 解析——将常见的 ISO 8601 日期字符创转化为 Python 的 datetime 对象. 安装 $ pip insta ...

  10. Java虚拟机性能管理神器 - VisualVM（3） 插件安装与更新路径配置

    Java虚拟机性能管理神器 - VisualVM(3)  插件安装与更新路径配置 插件路径地址配置方法: VisualVM打开后,会发现功能比较单一,只有概述.监视.线程.抽样器.Profiler五个 ...