css3弹性盒模型flex快速入门与上手(align-content与align-items)

时间：2022-09-17 13:22:17

接着上文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;

css3弹性盒模型flex快速入门与上手(align-content与align-items)

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

css3弹性盒模型flex快速入门与上手(align-content与align-items)

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

css3弹性盒模型flex快速入门与上手(align-content与align-items)

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

css3弹性盒模型flex快速入门与上手(align-content与align-items)

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

css3弹性盒模型flex快速入门与上手(align-content与align-items)

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

css3弹性盒模型flex快速入门与上手(align-content与align-items)

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

把flex-direction变成column方向.

css3弹性盒模型flex快速入门与上手(align-content与align-items)

小结：这个属性一定要有多行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;

css3弹性盒模型flex快速入门与上手(align-content与align-items)

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

css3弹性盒模型flex快速入门与上手(align-content与align-items)

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

css3弹性盒模型flex快速入门与上手(align-content与align-items)

flex-direction: row;
align-items: baseline;
baseline:对齐第一个flex元素文本的基线
#box div:nth-of-type(1) {
padding-top:50px;
}
css3弹性盒模型flex快速入门与上手(align-content与align-items)
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)

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

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

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

  2. CSS3弹性盒模型flex box快速入门 2016&period;03&period;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之弹性盒模型&lpar;Flex Box&rpar;

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

随机推荐

  1. Can&&num;39&semi;t use Subversion command line client&colon;svn

    在Intellij IDEA里checkout东西时出先这个错误提示:Can't use Subversion command line client:svn Subversion command l ...

  2. xtrabackup&lowbar;binlog&lowbar;pos&lowbar;innodb 和 xtrabackup&lowbar;binlog&lowbar;info

    用过 xtrabackup 工具的 innobackupex 脚本备份数据的人可能会注意到,–apply-log 处理过的备份数据里有两个文件说明该备份数据对应的 binlog 的文件名和位置.但有时 ...

  3. 【转发】NPAPI开发详解，Windows版

    NPAPI开发详解,Windows版 9 jiaofeng601, +479 9人支持,来自Meteor.猪爪.hanyuxinting更多 .是非黑白 .Yuan Xulei.hyolin.Andy ...

  4. printf的格式控制的完整格式

    printf的格式控制的完整格式:%  -  0  m.n  l或h  格式字符下面对组成格式说明的各项加以说明:①%:表示格式说明的起始符号,不可缺少.②-:有-表示左对齐输出,如省略表示右对齐输出 ...

  5. 使用greenDao出现Property &&num;39&semi;status&&num;39&semi; is not part of &ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&period;NewCommentDao&commat;717de9a

    应为版本号的原因造成的,升级Schema版本号即可

  6. 在Debian Wheezy 7&period;3&period;0上编译安装3&period;12&period;14内核

    最近需要对Linux的一个内核模块进行调整实验,故决定先在虚拟机中完成编译调试工作,最后再在真实的系统上进行测试.为了防止遗忘,把过程记录于此. 1. 准备系统环境 首先从官网下载最新版的Virtua ...

  7. NOIWC2018游记

    NOIWC2018游记 接着PKUWC就是NOIWC了.感觉时间很紧呀,但越是紧张呢,就越让人心里觉得充实. 能够去NOIWC,应该是一次非常充实的体验吧. 这一篇游记是接着上一篇写的,时间点上完全都 ...

  8. Flask 测试

    测试是每个应用系统发布前必须经历的步骤,自动化测试对测试效率的提高也是毋庸置疑的.对于Flask应用来说,当然可以使用Web自动化测试工具,比如Selenium等来测.Flask官方推荐的自动化测试方 ...

  9. &lt&semi;发条游戏设计&gt&semi;粗翻——第一部分 理论（一）

    段落1 游戏 游戏设计定义 相对而言,游戏设计是一个新的学科,专业的作曲家.画家.作家.建筑师已经至少存在了500多年,然而游戏设计师只在最近50年才被特分出来单作一类.然而这个类别仅仅在最近20-2 ...

  10. OpenGL 获取当前屏幕坐标的三维坐标（gluUnProject使用例子 Qt）

    之前使用VS+glut实现了gluUnProject使用例子,用于渲染管道的逆过程,将屏幕坐标转换为opengl三维坐标,本文将尝试使用QT来实现. 代码如下:  main.cpp  12345678 ...

相关文章