接着上文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. Jsoup（一）Jsoup详解（官方）

    一.Jsoup概述 1.1.简介     jsoup 是一款Java 的HTML解析器,可直接解析某个URL地址.HTML文本内容.它提供了一套非常省力的API, 可通过DOM,CSS以及类似于jQu ...

  2. 《图解Spark：核心技术与案例实战》作者经验谈

    1,看您有维护博客,还利用业余时间著书,在技术输出.自我提升以及本职工作的时间利用上您有没有什么心得和大家分享?(也可以包含一些您写书的小故事.)回答:在工作之余能够写博客.著书主要对技术的坚持和热爱 ...

  3. java线程池的创建使用

    利用java的多线程编程可以大大的提高系统的并发运行效率,线程越多并发执行的任务就越多,但是并不意味着效率会一直提高,相反会得到适得其反的效果. java中的多线程编程一共有三种方法: 继承Threa ...

  4. RobotFramework自动化测试框架-移动手机自动化测试Element Attribute Should Match关键字的使用

    Element Attribute Should Match 关键字用来判断元素的属性值是否和预期值匹配,该关键字接收四个参数[ locator | attr_name | match_pattern ...

  5. Map Task内部实现分析

    上篇我刚刚学习完.Spilt的过程,还算比較简单的了,接下来学习的就是Map操作的过程了,Map和Reduce一样.是整个MapReduce的重要内容,所以.这一篇,我会好好的讲讲里面的内部实现过程. ...

  6. PHP去除unicode续：json_encode之后，仅仅有文字，数字不见了的解决方法

    接前文.http://blog.csdn.net/yanzi1225627/article/details/44985487 这么处理了一段时间.确实没发现问题.但近期发现了一个bug.比方输入&qu ...

  7. TCP/IP具体解释--UDP数据报中的IP分片

    1.UDP首部 2.UDP分片 在第二章,讲链路层是,提到过以太网.刨除数据帧帧头.最多传输的长度为1500.也就是说,假设一个ip数据报,长度大于1500,则须要分片. 分片方法: 在ip头中3位标 ...

  8. UVA 11324 The Largest Clique(强连通分量+缩点DAG的DP)

    题意:给定一个有向图,求出一个最大的结点集,这个节点集中的随意两个点之间至少一个能到达还有一个点. 思路:假设一个点在这个节点集中,那么它所在的强连通分量中的点一定所有在这个节点集中,反之亦然, 求出 ...

  9. selenium+python安装配置

    一.安装步骤 1.python安装 2.selenium安装     2.1. 方法一:在Windows命令行(cmd)输入pip install selenium即可自动安装selenium,安装完 ...

  10. Android DVM

    1.DVM(Dalvik Virtual Machine)概述 是Google公司自己设计用于Android平台的Java虚拟机 支持已经转化为.dex(及Dalvik Excutable)格式的Ja ...