flex布局(弹性布局)
来源:互联网 发布:网络情歌对唱2016 编辑:程序博客网 时间:2024/06/05 16:53
一、使用方法
注:设置flex布局后,子元素的float、clear、vertical-align属性将失效
.box{ display:flex;}.box{ display:inline-flex;}//webkit内核的浏览器 .box{ display:-webkit-flex; display:flex;}
兼容性:IE9及以下不支持,主流浏览器都支持。兼容性处理
display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
二、基本概念(flex容器——flex container)
主轴(main axis)
主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end,
单个项目占据的主轴空间叫做main size
侧轴(cross axis)
交叉轴的开始位置叫做cross start,结束位置叫做cross end。项目默认沿主轴排列,
占据的交叉轴空间叫做cross size。
三、外部容器的属性
flex-direction 主轴的方向
.box{
flex-direction:row | row-reverse | column | column-reverse;
//row(默认值)主轴,从左到右
//column 从上到下
}flex-wrap 主轴的换行方式
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
//nowrap 默认,不换行
//wrap 正常换行,第一行在上
//wrap-reverse 换行,第一行在下
}flex-flow 主轴的方向 || 换行方式 (连写)
.box{
flex-flow:row || wrap;
}justify-content 主轴的对齐方式
.box{
justify-content:flex-start | flex-end | center | space-between | space-around;
//flex-start:从左对齐
//flex-end:从右对齐
//center:中间对齐
//space-between:两端对齐,盒子之间相同的间隔。
//space-around: 盒子两侧的间隔都相等,上面的没有两边
}align-items 侧轴上的对齐方式
.box{
align-items: flex-start | flex-end | center | baseline | stretch;
//flex-start: 顶端对齐
//flex-end: 底端对齐
//center: 中间对齐
//baseline: 盒子第一行文字的基线对齐
//stretch: (默认值) 如果项目没用设置高度或设置auto,将占满整个盒子的高度
}align-content 多跟轴线的对齐方式
.box{
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
//flex-start与侧轴的起点对齐
//flex-end与侧轴的重点对齐
//center与侧轴的中点对齐
//space-between在侧轴上两端对齐
//space-around:每根轴线两侧的间隔都相等,轴线到边框是间隔的一半
//stretch:(默认值)轴线占满整个侧轴
}
四、内部盒子的属性
order 内部盒子的排列顺序,默认为0,从小到大,从上到下排列
.item{
order:数值;
}flex-grow内部盒子的放大比例,默认为0,就是放不大。
.item{
flex-grow:数值
}flex-shrink 内部盒子的缩小比例,默认为1,如果空间不够就会将盒子缩小
.item{
flex-shrink:数值
}flex-basis计算主轴是否有多少多余空间,默认auto,盒子本来的项目大小
.item{
flex-basis:数值+px | auto;
}flex是flex-grow,flex-shrink和flex-basis的简写,后面两个可选
.itme{
flex: 1 1 auto;
}
该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。align-self允许单个盒子和其他盒子不一样的对齐方式。可以覆盖align-item的属性,默认auto,表示继承align-items属性
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
注:参考自阮一峰大神的博客http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
- flex布局(弹性布局)
- flex布局(弹性布局)
- Flex弹性伸缩布局
- display:flex弹性布局
- flex弹性盒布局
- CSS3 弹性布局Flex
- flex弹性布局
- Flex弹性盒布局
- flex弹性盒子布局
- flex 弹性布局
- flex弹性布局图解
- flex弹性布局
- Flex弹性布局
- flex弹性布局
- flex弹性布局
- Flex 弹性布局
- CSS3 flex弹性布局
- 0507 Flex弹性布局
- ionic -使用内置指令基本环境搭建angular
- Android Studio 解析XML的三种方法
- 亲测有效:Mac 系统Mobile Security Framework安装 并分析ipa文件(一)
- Typedef 在C/C++中常用方法
- 在fedora24上安装googlepinyin
- flex布局(弹性布局)
- VC++文件比较器(一)
- 贪心算法基础之最小生成树prim算法 51nod prim模板
- SVG中的viewBox和preserveAspectRatio用法
- 编写函数 void count(char a[],char w[][10],int n,int b[]).功能是:统计w指向的数组中的n个单词在a指向的字符串中各自出现的次数(将非字符字符看作单词分割
- 警告: Exception encountered during context initialization
- 【unity实用技能】unity在游戏中更换角色的shader,比如加个流光
- 13.链表的合并
- 如何安装Oracle Instant Client