接着上文css3弹性盒模型flex快速入门与上手1继续，上文还剩下两个父容器的属性align-items和align-content.

一、align-content:多行的副轴对齐方式

含义 多行的副轴对齐方式
可选值 stretch | flex-start | center | flex-end | space-between | space-around
默认值 stretch

属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

即：此属性只在flex容器中有多行flex元素时才有作用.

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>flex布局 - by ghostwu</title>

     <style>

         #box {

             display: flex;

             flex-direction: row;

             flex-wrap: wrap;

             align-content: flex-start;

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

             /* align-content: center; */

             /* align-content: stretch; */

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

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

             height: 400px;

             background: #ccc;

         }

         #box div {

             width: 100px;

             height: 100px;

             background: #09f;

             margin: 10px;

         }

     </style>

 </head>

 <body>

     <div id="box">

         <div>1</div>

         <div>2</div>

         <div>3</div>

         <div>4</div>

         <div>5</div>

         <div>6</div>

         <div>7</div>

         <div>8</div>

         <div>9</div>

         <div>10</div>

         <div>11</div>

         <div>12</div>

         <div>13</div>

         <div>14</div>

     </div>

 </body>

 </html>
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;

flex-direction: row;
flex-wrap: wrap;
align-content: flex-end;

flex-direction: row;
flex-wrap: wrap;
align-content: center;

flex-direction: row;
flex-wrap: wrap;
align-content: stretch;
设置了align-content为stretch时，把容器的子元素height变成auto,不要设置固定的高度，才能看见拉伸效果
#box div {
width: 100px;
height: auto;
background: #09f;
margin: 10px;
}

flex-direction: row;
flex-wrap: wrap;
align-content: space-between;

flex-direction: row;
flex-wrap: wrap;
align-content: space-around;

flex-direction: column;
flex-wrap: wrap;
align-content: space-around;

把flex-direction变成column方向.

小结：这个属性一定要有多行flex元素，否则看不到效果， 即配合flex-wrap: wrap;让flex元素换行 才能看见效果

align-items：单行的副轴对齐方式

含义 单行的副轴对齐方式
可选值 flex-start | flex-end | center | stretch | baseline
默认值 stretch 
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>flex布局 - by ghostwu</title>

     <style>

         #box {

             display: flex;

             /* flex-direction: column; */

             flex-direction: row;

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

             align-items: flex-end;

             /* align-items: center; */

             /* align-items: baseline; */

             height:400px;

             background:#ccc;

         }

         #box div {

             width: 100px;

             height: 100px;

             background: #09f;

             margin: 10px;

             box-sizing: border-box;

         }

     </style>

 </head>

 <body>

     <div id="box">

         <div>1</div>

         <div>2</div>

         <div>3</div>

         <div>4</div>

         <div>5</div>

         <div>6</div>

         <div>7</div>

         <div>8</div>

         <div>9</div>

     </div>

 </body>

 </html>
flex-direction: row;
align-items: flex-end;

flex-direction: row;
align-items: flex-start;

flex-direction: row;
align-items: center;

flex-direction: row;
align-items: baseline;
baseline:对齐第一个flex元素文本的基线
#box div:nth-of-type(1) {
padding-top:50px;
}

flex-direction: row;
align-items: stretch;
把所有的flex元素高度设置为auto，或者去掉 才能看见拉伸(stretch)效果:
#box div {
width: 100px;
height: auto;
background: #09f;
margin: 10px;
box-sizing: border-box;
}

css3弹性盒模型flex快速入门与上手(align-content与align-items)的更多相关文章

  1. css3弹性盒模型flex快速入门与上手1

    一.什么是flex? flex是css3中引入的一种布局方式,可以非常灵活高效控制元素的排列与对齐方式,大多人称之为弹性布局. 二.怎么使用flex? 任何一个容器都可以指定为flex布局 #box ...

  2. CSS3弹性盒模型flex box快速入门 2016.03.16

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  3. CSS3弹性盒模型，Flex布局教程

    布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型 ...

  4. CSS3弹性盒模型flexbox布局基础版

    原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...

  5. CSS3弹性盒模型布局模块介绍

    来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-in ...

  6. 弹性盒模型 flex box

    弹性盒子模型 布局方案 传统的布局方案大多采用div+css+float+position+display来实现,但是随着css3中弹性盒子模型的推出,在前端布局方案中就又多出了一项彪悍的选项. 而因 ...

  7. css和css3弹性盒模型实现元素宽度（高度）自适应

    一.css实现左侧宽度固定右侧宽度自适应 1.定位 <!DOCTYPE html> <html lang="en"> <head> <me ...

  8. css3基础教程：CSS3弹性盒模型

    今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力. ...

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

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

随机推荐

  1. 10.0.0.55_12-16训练赛部分writeup

    0x1 - MISC MISC100 一张帅行的照片 目测是图片隐写,但是binwalk并没有出来,应该是对文件头进行了修改 010editor查看一下,发现在jpg文件尾之后还有大量的数据 而且在灰 ...

  2. PHP递归解决兔子问题，面试必备

    接到面试通知辗转反侧,一直在默念明天改如何介绍自己的项目经验等.早早的起床,洗漱,把自己的总结的问题自问自答了一些.匆匆吃了早饭,挤进让人面目狰狞的地铁,此时什么都不顾,只盼着赶紧下地铁.终于提前半小 ...

  3. AB串

    题目: 给定n个A和2n个B.用这些字符拼成一个字符串.要求这个串的全部前缀和后缀B的个数始终不少于A. (一个字符串的前缀是仅仅从开头到某个位置为止的子串,后缀是仅仅从某个位置到结尾的子串). 输入 ...

  4. jQuery 插件 Magnify 开发简介（仿 Windows 照片查看器）

    前言 因为一些特殊的业务需求,经过一个多月的蛰伏及思考,我开发了这款 jQuery 图片查看器插件 Magnify,它实现了 Windows 照片查看器的所有功能,比如模态窗的拖拽.调整大小.最大化, ...

  5. VMWare 虚拟化 Ubuntu 64 （16.04）-- docker 无法链接 pull 镜像 ？(solved)

    背景 根据项目的需要,虚拟化一个Ubuntu OS 来玩 docker,虚拟机选择的是WMWare (VMware-player-14.0.0-6661328); Ubuntu的镜像来自于官网(ubu ...

  6. Ajax 请求后打开新窗口被拦截的解决方案

    公司业务上有个场景,需请求后台获取支付链接地址,再打开地址引导用户购买.这样的场景在其他企业应该也很场景.但是遇到个很常见的问题,Ajax后直接用window.open(url),会被浏览器作为广告拦 ...

  7. 使用javaMail和velocity来发送模板邮件

    之前在ssh项目中有用过javaMail和velocity来发送邮件,实现的效果如下所示. 这类邮件主要用于公司的推广宣传,比如商城的促销等场景. 今天打算将邮件模块也集成到ssm项目,也算是对之前做 ...

  8. SSM学习（三）--集成spring mvc

    spirng mvc是一个mvc框架,与struts2类似,都是基于Servlet封装而成的框架,所以要了解spring mvc或者struts2比需先了解Servlet,本篇我们先把spring m ...

  9. attr设置checked，disabled等属性失效的问题，jquery的attr和prop的区别

    最近做项目遇到一个问题,radio设置了默认checked值,attr("checked",true)切换checked值失效 最后发现是jquery1.6版本之后,attr和pr ...

  10. 把项目放到码云上，通过git 进行项目管理

    1.在码云上新建一个项目 把使用 Readme文件初始化这个项目这个勾选去掉  项目生成后会看到 码云的git 简易的命令行入门教程: Git 全局设置: git config --global us ...