接着上文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. 基于 HTML5 Canvas 的 3D 压力器反序列化

    在实际应用中,我觉得能够通过操作 JSON 文件来操作 3D 上的场景变化是非常方便的一件事,尤其是在做编辑器进行拖拽图元并且在图元上产生的一系列变化的时候,都能将数据很直观地反应给我们,这边我们简单 ...

  2. Linux上跑两个版本的php,5.4.45和5.3.24

    首先,装的实在艰难,所以容我吐槽两句: PHP好个P,两个小版本都不兼容,把这个php5.3.24放在5.4.45环境下都跑不了.对于我这种用多了向下兼容的java的人来说,简直无法想象! 网上有装俩 ...

  3. 剑指Offer_12_矩阵中的路径(参考问题:马踏棋盘)

    题目描述  请设计一个函数,用来判断在一个矩阵中是否存在一条包含某字符串所有字符的路径.路径可以从矩阵中的任意一个格子开始,每一步可以在矩阵中向左,向右,向上,向下移动一个格子.如果一条路径经过了矩阵 ...

  4. Winform开发中如何将数据库字段绑定到ComboBox控件

    最近开始自己动手写一个财务分析软件,由于自己也是刚学.Net不久,所以自己写的的时候遇到了很多问题,希望通过博客把一些印象深刻的问题记录下来. Winform开发中如何将数据库字段绑定到ComboBo ...

  5. 关于前端框架BootStrap和JQueryUI（以及相应的优秀模板）

    近期两个月因为须要升级公司产品的界面.所以不得不去学习了下原本并不熟悉的前端框架. 这里也是推荐两款BootStrap和JQueryUI. bootstrap使用起始非常easy,首先.须要得到所须要 ...

  6. 解析XML文件之使用SAM解析器

    XML是一种常见的传输数据方式,所以在开发中,我们会遇到对XML文件进行解析的时候,本篇主要介绍使用SAM解析器,对XML文件进行解析. SAX解析器的长处是显而易见的.那就是SAX并不须要将全部的文 ...

  7. 一段文字中的几个keyword显示高亮

    将一段文字中的几个keyword显示高亮 演示样例:将"我的愿望是当个绿巨人,所以我想让我的皮(derma)肤是绿色"中的"皮肤"显示绿色. <span ...

  8. tools: idea 2017 激活

    1.下载并安装ideaIU (https://www.jetbrains.com/idea/download/#section=windows ,下载Ultimate版)2.下载 JetbrainsC ...

  9. Anaconda+用conda创建python虚拟环境

    Anaconda+用conda创建python虚拟环境 Anaconda与conda区别 conda可以理解为一个工具,也是一个可执行命令,其核心功能是包管理与环境管理.包管理与pip的使用类似,环境 ...

  10. AI 系列 总目录

    AI 系列 答应了园区大牛 张善友 要写AI 的系列博客,所以开始了AI 系列之旅. 一.四大平台系列(百度AI.阿里ET.腾讯.讯飞) 1.百度篇 (1) 百度OCR文字识别-身份证识别 (2) 基 ...