CSS3 Flex布局
Flex 用于使页面上的内容自适应屏幕
首先,在网页代码的头部,加入一行viewport元标签。
<meta name=”viewport” content=”width=device-width, initial-scale=1″ />
viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。
HTML 代码
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item order"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Container CSS 代码
1. flex
要使用flex必须在container上加上display:flex 和 display: -webkit-flex; /_ Safari _/
.container {
display: flex; /* or inline-flex */display: -webkit-flex; /_ Safari _/
}
2. flex-direction
.container {
-webkit-flex-direction:row | row-reverse | column | column-reverse;
flex-direction:row | row-reverse | column | column-reverse;
}
3. flex-wrap
.container{
-webkit-flex-wrap: nowrap | wrap | wrap-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
}
4. flex-flow
This property is a shorthand for setting the flex-direction and flex-wrap properties.
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
.container {
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap ;
}
5. justify-content
Value : flex-start | flex-end | center | space-between | space-around | space-evenly;
.container {
-webkit-justify-content: flex-start; /_ Safari _/
justify-content: flex-start;
}
6. align-items
Value : flex-start | flex-end | center | baseline | stretch;
.container {
-webkit-align-items: stretch; /_ Safari _/
align-items: stretch;
}
7. align-content
Value : flex-start | flex-end | center | space-between | space-around | stretch;
.container {
-webkit-align-content: stretch; /_ Safari _/
align-content: stretch;
}
Item CSS 代码
1. Order
默认值为0,数值越小,排列越靠前.
.item.order {
-webkit-order: 1; /_ Safari _/
order: 1;
}
2. flex-grow
属性定义项目的放大比例,默认为0
,即如果存在剩余空间,也不放大。
.item {
-webkit-flex-grow: 0; /_ Safari _/
flex-grow: 0;
}
3. flex-shrink
属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
.item {
flex-shrink: 1;
}
4. flex-basis
This property takes the same values as the width and height properties, and specifies the initial main size of the flex item, before free space is distributed according to the flex factors.
.item {
-webkit-flex-basis: auto; /_ Safari _/
flex-basis: auto;
}
5. flex
This property is the shorthand for the flex-grow
, flex-shrink
and flex-basis
properties. Among other values it also can be set to auto
(1 1 auto
) and none
(0 0 auto
).
Default value: 0 1 auto
.item {
-webkit-flex: 0 1 auto; /_ Safari _/
flex: 0 1 auto;
}
6. align-self
align-self
属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items
属性。默认值为auto
,表示继承父元素的align-items
属性,如果没有父元素,则等同于stretch
。
Value : auto | flex-start | flex-end | center | baseline | stretch;
.item {
-webkit-align-self: auto; /_ Safari _/
align-self: auto;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool)
CSS3 Flex布局的更多相关文章
- CSS3 Flex布局整理(三)-项目属性
一.Flex布局中 Flex Item属性控制,可以指定显示顺序.剩余空间的放大,缩小.交叉轴的排列 1.order:定义项目的排列顺序,数值越小,排列越靠前,默认为0.类似z-index 2.fle ...
- CSS3 Flex布局整理(二)-容器属性
一.Flex容器属性介绍 1.flex-flow :水平或垂直方向上的流动方式,包裹处理,其中包括了flex-direction属性和flex-wrap属性. 2.justify-content:定义 ...
- CSS3 Flex布局整理(一)
一.说明 1.在以往的布局方案中,都是基于盒装模型,依赖display属性+position属性+float属性等. 他对于那些特殊布局非常不方便,比如,垂直居中等. 并且不同浏览器的盒模型还有些差异 ...
- CSS3 Flex布局(伸缩布局盒模型)学习
CSS3 Flex布局(伸缩布局盒模型)学习 转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
- CSS3 Flex布局(项目)
一.order属性 order属性定义项目的排列顺序.数值越小,排列越靠前,默认为0. 二.flex-grow属性 flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大. ...
- CSS3 Flex布局(容器)
一.flex-direction属性 row(默认值):主轴为水平方向,起点在左端. row-reverse:主轴为水平方向,起点在右端. column:主轴为垂直方向,起点在上沿. column-r ...
- CSS3 Flex 布局教程
网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...
- css3 flex 布局
今天做一个小实战,需要让一个登录框始终保持水平和垂直居中,第一个想到的就是通过定位(要想让一个div居中,采用定位可以解决,示例), 然后开始接触flex布局,学完感觉真的好用,现把知识点记录一下,以 ...
- css3 flex布局结合transform生成一个3D骰子
预览地址: https://zhaohh.github.io/flex-dice/index.html 1 Flex 布局 首先聊聊Flex 布局,Flex 布局又称"弹性布局", ...
- css3 flex布局/grid布局
1.CSS3 Flexbox 布局完全指南(图解 Flexbox 布局详细教程) 2.CSS Grid 布局完全指南(图解 Grid 详细教程)
随机推荐
- [SNOI2017]炸弹
嘟嘟嘟 这题有一些别的瞎搞神奇做法,而且复杂度似乎更优,不过我为了练线段树,就乖乖的官方正解了. 做法就是线段树优化建图+强连通分量缩点+DAGdp. 如果一个炸弹\(i\)能引爆另一个炸弹\(j\) ...
- linux-高并发与负载均衡-lvs-DR模型试验
先配置3台虚拟机的网络 3台虚拟机克隆的方法:(....) etho,配置在同一个网段 DIP,RIP在一个网段 node01:作为lvs负载均衡服务器 node02:作为 Real Server n ...
- Flutter绘制波浪
以上动画是仿照 里面的物理动画还未仿写 代码见 https://github.com/dnoyeb/syk_flutter
- 'cordova' 不是内部或外部命令,也不是可运行的程序
问题: CMD 'cordova' 不是内部或外部命令,也不是可运行的程序: 解决:配置环境变量 1.找到npm的安装路径 :如C:\Users\AppData\Roaming\npm 2.环境 ...
- 【MySQL 读书笔记】普通索引和唯一索引应该怎么选择
通常我们在做这个选择的时候,考虑得最多的应该是如果我们需要让 Database MySQL 来帮助我们从数据库层面过滤掉对应字段的重复数据我们会选择唯一索引,如果没有前者的需求,一般都会使用普通索引. ...
- CS程序自动更新实现原理及代码(支持多版本多文件更新)
公司主要项目为CS端,经常遇到客户需求变更及bug处理,在没有引用自动更新之前每次更新程序,必须手动对每个客户端进行更新,这样导致技术支持工作量特别大,也给客户不好的印象,因此我需要一个自动更新程序! ...
- linux Java项目CPU内存占用高故障排查
linux Java项目CPU内存占用高故障排查 top -Hp 进程号 显示进程中每个线程信息,配合jstack定位java线程运行情况 # 线程详情 jstack 线程PID # 查看堆内存中的对 ...
- ECMA262,JavaScript引擎,浏览器
相关阅读:https://www.cnblogs.com/970119449blog/p/8080133.html 相关阅读:https://www.jb51.net/article/75888.ht ...
- [CIDR]calculate CIDR network capacity / 计算CIDR子网的网络容量
题目: 答案: 过程: 以B为例,192.168.9.140/27 /27 掩码是 8 8 8 111 00000 192.168.9.140是这个网段里的一个地址 140是 10001100 所以这 ...
- CF5E 【Bindian Signalizing】
题意 \(n\)座山组成一个环,相连的圆弧上其他山它们高那么这两座山能互相看到,求能看到的山的组数. 题解 设\(left[i]\)表示左边第一个比\(i\)高的位置,同理\(right[i]\)表示 ...