CSS---使用flex布局做响应式页面,flex布局中主要属性值
2017-04-12 23:12
525 查看
传统的布局方法都是基于盒模型实现的,通过display,position,float属性设置到达目的。但是,垂直居中的布局就会有一点麻烦了…用flex作响应式布局,就会轻松的多
flex布局相关属性(父元素)
1.display:
2.flex-direction:
3.flex-wrap
4.flex-flow
5.justify-content
6.align-items
7.align-content
flex布局相关属性(子元素)
1.flex-grow
2.flex-shrink
3.flex-basis
4.flex
5.order
6.align-self
DEMO:
html结构部分
css样式部分:
flex布局相关属性(父元素)
1.display:
display:flex;表示当前盒子为flex布局
2.flex-direction:
row(默认值):主轴为水平方向,起点在左端。 row-reverse:主轴为水平方向,起点在右端。 column:主轴为垂直方向,起点在上沿。 column-reverse:主轴为垂直方向,起点在下沿。
3.flex-wrap
nowrap(默认):当一条轴线排不下,不换行; wrap(默认):当一条轴线排不下,换行,第一行在上方; wrap-reverse(默认):当一条轴线排不下,换行,第一行在下方;
4.flex-flow
//flex-direction与flex-wrap属性的简写,默认值为row nowrap flex-flow:'flex-direction' 'flex-wrap'
5.justify-content
flex-start //默认值,主轴上从左至右(从上至下)方向排序 flex-end //主轴上从右至左(从下至上)方向排序 center //子元素全部居中排序 space-between //子元素两端对齐,项目之间的间隔都相等。 space-around //每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
6.align-items
flex-start//交叉轴的起点对齐 flex-end//交叉轴的终点对齐 center//交叉轴的中间对齐 baseline//首行文字的基线对齐 stretch//默认值,如果项目未设置高度或设为auto,将占满整个容器的高度。
7.align-content
flex-start:与交叉轴的起点对齐。 flex-end:与交叉轴的终点对齐。 center:与交叉轴的中点对齐。 space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。 space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。 stretch(默认值):轴线占满整个交叉轴。
flex布局相关属性(子元素)
1.flex-grow
//lex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大 flex-grow: num //num值默认为0,可以为0以上的数字,可以 为小数或整数,若所有子元素的flex-grow值相同,则等比例占比空间
2.flex-shrink
//flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。 flex-shrink: num//num值默认为1,可以为0以上数字,若所有的子元素flex-shrink值相同,则等比例缩小,为0时不缩小
3.flex-basis
flex-basis: <length> | auto; /* default auto */ //flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。 //它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。
4.flex
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] //flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。 //该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。 //建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
5.order
order:num //默认为0,可以为负数 //表示项目的排列顺序,数值越小,排序越前
6.align-self
align-self: auto | flex-start | flex-end | center | baseline | stretch; //align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。 //该属性可能取6个值,除了auto,其他都与align-items属性完全一致。
DEMO:
html结构部分
<body> <header class="header"> <div>左边</div> <div>中间</div> <div>中间</div> <div>右边</div> </header> <header class="headerPer"> <div>左边</div> <div>中间</div> <div>中间</div> <div>右边</div> </header> </body>
css样式部分:
/*flex方法*/ .header { display: flex; /*设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。*/ flex-direction: row; background-color: #c5c5c5; width: 100%; } .header div { text-align: center; flex: 1; } /*百分比方法*/ .headerPer{ background-color: #c5c5c5; width: 100%; float: left; } .headerPer div{ float: left; width: 25%; text-align: center; }
相关文章推荐
- CSS 使用Flex布局让元素保持在页面底部
- 使用html+css仿搜狐网址页面布局
- 使用Div和CSS来排版页面布局
- 在对小程序开发时我们会进行页面的布局。这里我们简单的介绍下flex布局的使用
- 使用CSS的float和clear属性完成页面布局
- 基于flex弹性布局实现“头尾固定,中间滚动”的页面(纯CSS实现)
- 基于flex弹性布局实现“头尾固定,中间滚动”的页面(纯CSS实现)
- CSS进阶系列一(flex布局基础知识——介绍、规范、主要思想、专业术语)
- DIV+CSS页面布局中注意的问题以及常用的CSS使用方法
- 如何使用CSS栅格布局创建一个简单页面布局
- 快速使用CSS Grid布局,实现响应式设计
- 使用div+css进行页面布局
- 定位浏览器页面内部错误(主要是css)问题,请使用HttpWatch
- 使用CSS的position属性控制页面布局的入门教程
- DIV+CSS页面布局中注意的问题以及常用的CSS使用方法
- CSS的margin属性在页面布局中的使用攻略
- css---flex布局中,如何响应式 得水平垂直居中?flex子元素左右 上下居中
- 移动网页 ----仿淘宝使用flex布局实现页面 固定顶部和底部
- 使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局,CSS3+SASS完美版)
- 使用CSS格式化页面布局示例(附图)