<!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. openvpn之安装篇

    之前整过openvpn,现把一些过程记录下来,方便以后查阅. #!/bin/bash cd /usr/local/srcyum install pam-devel.x86_64 -ywget http ...

  2. 【jquery】fancybox 是一款优秀的 jquery 弹出层展示插件

    今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox.它除了能够展示图片之外,还可以展示 flash.iframe 内容.html 文本以及 ajax 调用,我们可以通过 css ...

  3. 记一次MyEclipse闪退的解决方法

    http://www.th7.cn/Program/java/201408/262487.shtml ———————————————————————————————————————————————— ...

  4. java 正则表达式 验证字符串 只包含汉字英文数字

    String content = “testContent”; String regex="^[a-zA-Z0-9\u4E00-\u9FA5]+$"; Pattern patter ...

  5. 关于Unity中水和雾的使用

    水 自己来做水和雾还是有点麻烦的,不过没关系,Unity帮我们做好了很多可以用的. 1.Unity自己实现了水的特效,帮助我们解决游戏中水的问题 2.Unity的水集成在了Environment的环境 ...

  6. Spring Boot 启用Gzip压缩

    有两点需要注意 1.需要在application.properties里启用压缩,并设置压缩支持的格式(默认支持text/html等,但不支持application/json) server.comp ...

  7. 对C语言中指针的入门理解

    通过一个例子引出对指针的概念理解 1,例子 #include<stdio.h> int main(void) { ; //小张的身高 ; //小李的身高 ; //小王的身高 int *xi ...

  8. e606. Determining Which Component or Window Has the Focus

    // null is returned if none of the components in this application has the focus Component compFocusO ...

  9. Apache ZooKeeper

    https://zookeeper.apache.org/ https://zh.wikipedia.org/wiki/Apache_ZooKeeper Apache ZooKeeper是Apache ...

  10. [深入理解Android卷一全文-第三章]深入理解init

    因为<深入理解Android 卷一>和<深入理解Android卷二>不再出版,而知识的传播不应该因为纸质媒介的问题而中断,所以我将在CSDN博客中全文转发这两本书的全部内容. ...