html5延时布局,html5——伸缩布局

基本概念

1、主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向

2、侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的

3、方向：默认主轴从左向右，侧轴默认从上到下

4、主轴和侧轴并不是固定不变的，通过flex-direction可以互换

display: flex;//给父盒子加flex属性，父盒子将具有伸缩属性，子盒子默认平铺

效果特征

1、设置了伸缩属性，在没有设置宽度的情况下是100%

2、设置了伸缩属性，行内元素会转化成块级元素，可以设置宽高，独占一行

主轴方向

flex-direction: row;//水平方向(默认)

flex-direction: row-reverse;//水平翻转

flex-direction: column;//垂直方向

flex-direction: column-reverse;//垂直翻转

对齐方式

1、justify-content：设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。

justify-content: flex-start;//从主轴开始的方向对齐

justify-content: flex-end;//从主轴结束的方向对齐

justify-content: center;//居中对齐

justify-content: space-around;//父盒子中平分

justify-content: space-between;//两端对齐平分

2、align-items：设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。

align-items:flex-start;//从侧轴开始的方向对齐

align-items:flex-end;//从侧轴结束的方向对齐

align-items:center;//居中

align-items:baseline;//基线对齐，默认同flex-start

align-items:stretch;//拉伸

参考地址：地址

第 29 章 CSS3 弹性伸缩布局[下]

学习要点: 1.新版本 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案,这里做一个初步的了解. 一．新版本 新版本的 Flexbox 模型是 201 ...

第 29 章 CSS3 弹性伸缩布局[中]

学习要点: 1.混合过度版 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案,这里做一个初步的了解. 一．混合过渡版 混合版本的 Flexbox 模型 ...

第 29 章 CSS3 弹性伸缩布局[上]

学习要点: 1.布局简介 2.旧版本 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案,这里做一个初步的了解. 一．布局简介 CSS3 提供一种崭新的 ...

CSS3伸缩布局Flex学习笔记

如果需要使用伸缩布局首先得把display:flex;对于兼容还得加前缀display:-webkit-display:flex;等其他浏览器前缀,但我本机Chrome测试已经不需要加前缀了,其实这些 ...

html5 基本布局+新标签+新选择器 + 线性渐变

html5 基本布局+新标签

CSS3弹性伸缩布局(二)——flex布局

上一篇博客介绍了旧版本的box布局,而这篇博客将主要介绍最新版本的flex布局的基础知识. 新版本简介 新版本的Flexbox模型是2012年9 ...

CSS3弹性伸缩布局(一)——box布局

CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案----Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃 ...

flexbox弹性伸缩布局

CSS3 伸缩布局盒模型记

CSS3 伸缩布局盒模型 CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间.Flex容器使用Flex项目可以自动放大与收缩,用来填 ...

随机推荐

C#获取C++中修改过的float数组(指针)，dll

C++中 struct rankPoint{ float sim; }; ]){ ; i < ; i++) prank[i].sim = ; ; i < ; i++) prank[i].s ...

Linux中如何查看文件的最初创建时间

查看 一个文件的 最初创建时间: Linux中如何查看文件的最初创建时间  linux     目前Linux没有直接查看创建文件的命令,你只能通过文件是否被修改过来进行判断. //查看代码stat  ...

自动档车的P档和N档的区别

P档时,驻车齿轮在变速箱内被部分锁死,所以此时平地上不踩刹车,车辆有一定的驻车效果.N档就是空档,发动机与传动轴在变速器位置彻底分离,没有连接.因此P档适合停车和驻车,就是到地方了,要熄火时挂P档,拉 ...

夺命雷公狗---DEDECMS----16dedecms取出首页今日更新

我们这次就要来取出我们的电影和电视剧以及综艺节目: 我们首先在我们受页面的模版文件中获取电影和电视剧的标签: 我们发现这里有一大堆,我只留一个即可: 然后我们到后台更新下首页的模版,看下是否只有一个模 ...

ServletContext对象的应用

由于一个WEB应用中的所有Servlet共享同一个ServletContext对象,因此Servlet对象之间可以通过ServletContext对象来实现通讯.ServletContext对象通常也 ...

dataTable 实战总结

后台项目中经常会用到 dataTable 进行表格的智能绘制:总结一下项目中经常用到的 dataTable 设置 1.dataTable 属性设置: autoWidth: true, // 是否自动计 ...

&lbrack;LeetCode&amp&semi;Python&rsqb; Problem 458&period; Poor Pigs

There are 1000 buckets, one and only one of them contains poison, the rest are filled with water. Th ...

golang cache--go-cache

go-cache是一款类似于memached 的key/value 缓存软件.它比较适用于单机执行的应用程序. go-cache实质上就是拥有过期时间并且线程安全的map,可以被多个goroutine ...

Linux背背背(3)

目录 1.文件操作命令 2.文件夹操作命令 文件操作命令 创建 命令:touch 语法:#touch 文件的名字      文件名可以是一个完整的路径 如果后面的参数文件名指定了路径,则表示在指定的路 ...