<!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. git操作：在CentOS7上面搭建GitLab服务器

    在这篇文章中将要讲解如何在CentOS7上面搭建本地的GitLab服务器. 一.安装并配置必要的依赖关系 首先要在CentOS系统上面安装所需的依赖:ssh.防火墙.postfix(用于邮件通知).w ...

  2. C#7.0新语法

    一.out输出参数 在以前使用out输出参数的时候,必须先定义变量,然后才能使用,例如: 先定义一个方法,方法参数是out类型的输出参数: private void DoNoting(out int ...

  3. linux 安装 vsftpd服务

    yum install vsftpd 修改配置文件 vim /etc/vsftpd/ftpusers vim /etc/vsftpd/user_list 简单起见,注释掉两个配置文件中的所有用户.

  4. WebUpload formdata 上传参数

    https://www.cnblogs.com/wisdo/p/6159761.html webUploader 是款很好用的优秀的开源上传组件,由百度公司开发,详细的介绍可参见webUploader ...

  5. LibGDX skins

    https://github.com/czyzby/gdx-skins ———————————————————————————————————————————— LibGDX comes with a ...

  6. poj 1723 中位数

    最近在看一些中位数的东西,然后顺便也看了些题目.poj 1723不仅要求到水平位置的最短距离和,还要求水平都相邻的排成一排的最短距离和,即士兵都站成一列. 到y轴的距离好办,按y轴坐标排序,求中位数, ...

  7. 卡片式ViewPager，一屏展示多个pager item，设置高度不一致的tabBar

    ViewPager的基本用法不必多说,这都很简单,我们可以在ViewPager中加载一个ImageView,也可以加载一个Fragment,这都是目前非常常见的用法.那么我今天说的是ViewPager ...

  8. C++ 定时器任务类实现

    #ifndef __TIMERTASK_H_ #define __TIMERTASK_H_ /* 定时器任务基类 */ #include "asr_taskinterface.h" ...

  9. QT:QObject 简单介绍

    QObject 是所有Qt对象的基类. QObject 是Qt模块的核心.它的最主要特征是关于对象间无缝通信的机制:信号与槽.使用connect()建立信号到槽的连接,使用disconnect()销毁 ...

  10. python递归评论tree形图代码

    首先我有必要记录下来这段代码,因为我遇到了这个问题, 然后没有解决 后来, 前段说我找到一段代码给我看看, 我并没有在意, 然后她实现了, 她实现了,她真的实现了, 我... 为了感谢她,我陪她玩了一 ...