弹性布局

弹性布局相关属性
     flex-direction相关属性
     flex-wrap相关属性
     justify-content相关属性
     align-items相关属性
     align-content相关属性
     样例Demo

弹性布局相关属性

属性	说明
display	值为flex时，创建弹性布局容器
flex-direction	伸缩流方向
flex-wrap	伸缩流换行
flex-flow	伸缩流(包括方向与换行)，综合了flex direction和flex-wrap属性
justify-content	主轴对齐
align-items	侧轴对齐
align-content	堆栈伸缩行，只有在flex-wrap:wrap和wrap-reverse 设置下且伸缩项目存在多行时才生效
flex	用于设置或检索弹性模型对象的子元素如何分配空间，是flex-grow、flex-shrink和flex-basis属性的简写属性，即伸缩性。默认值是0 1. auto
order	设置或检索弹性模型对象的子元素出现的顺序。默认值是0
flex-grow	一个数字，规定项目将相对于其他灵活的项目进行扩展的量，即扩展比率
flex-shrink	一个数字，规定项目将相对于其他灵活的项目进行收缩的量，即收缩比率。
flex-basis	项目的长度。合法值“auto”"inherit"或一个后跟“%”‘ px”“ em"或任何其他长度单位的数字，即伸缩基准值

flex-direction相关属性

属性	说明
row	主轴为水平方向，排列顺序与页面的文档顺序相同
row-reverse	主轴为水平方向，排列顺序与页面的文档顺序相反
column	主轴为垂直方向，排列顺序为从上到下
column-reverse	主轴为垂直方向，排列顺序为从下到上

flex-wrap相关属性

属性	说明
nowrap (默认值)	值为flex时，创建弹性布局容器
wrap	伸缩流方向
wrap-reverse	伸缩流换行
column-reverse	伸缩流(包括方向与换行)，综合了flex direction和flex-wrap属性

justify-content相关属性

属性	说明
flex-start	默认值。项目位于容器的开头
flex- end	项目位于容器的结尾
center	项目位于容器的中心
space-between	项目位于各行之间留有空白的容器内
space-around	项目位于各行之前、之间、之后都留有空白的容器内

align-items相关属性

属性	说明
stretch	默认值。项目被拉伸以适应容器
center	项目位于容器的中心
flex-start	项目位于容器的开头
flex- end	项目位于容器的结尾
baseline	项目位于容器的基线上

align-content相关属性

属性	说明
stretch	默认值。项目被拉伸以适应容器
center	项目位于容器的中心
flex-start	项目位于容器的开头
flex-end	项目位于容器的结尾
space-between	项目位于各行之间留有空白的容器内space-around

样例Demo

效果图：

HTML5 实现：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1.0" /><title>弹性布局</title>   <style type="text/css">*{margin: 0;padding: 0;}.box{width: 50px;height: 50px;border: 1px solid blueviolet;text-align: center;line-height: 50px;}.flex-item1{background: red;order: 3;/*设置伸缩向的排序*/}.flex-item2{background: green;order: 1;/*设置伸缩向的排序*/}.flex-item3{background: blue;order: 2;/*设置伸缩向的排序*/}.flex-container1{display: flex;flex-direction: row;flex-wrap: wrap;/*主轴对齐*/justify-content: flex-start;}.flex-container2{display: flex;flex-direction: row;flex-wrap: wrap;/*主轴对齐*/justify-content: flex-end;}.flex-container3{display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-around;}.flex-container4{display: flex;flex-direction: column;flex-wrap: wrap;justify-content: space-around;}.flex-center1{/*伸缩向分配空间格式：flex：flex-grow;flex-fhrink;flex-grow*//*表示除了占据原先的宽度外，还要分配剩余宽度（包括扩展或收缩）*/flex: 1 1 auto;}.flex-center2{/*表示分配所有宽度（包括扩展或收缩）*/flex-basis: 0%;flex-shrink: 1;flex-grow: 1;}</style></head><body><h3>水平排列</h3><h5>flex:1 1 auto</h5><div class="flex-container1"><div class="flex-item1 box">1</div><div class="flex-item2 box">1</div><div class="flex-item3 box flex-center1">auto</div></div><h5>flex-basis: 0%;flex-shrink: 1;flex-grow: 1;</h5><div class="flex-container1"><div class="flex-item1 box flex-center2">1</div><div class="flex-item2 box flex-center2">1</div><div class="flex-item3 box flex-center2">auto</div></div><h5>justify-content: flex-start;</h5><div class="flex-container1"><div class="flex-item1 box">1</div><div class="flex-item2 box">1</div><div class="flex-item3 box">auto</div></div><h5>justify-content: flex-end;</h5><div class="flex-container2"><div class="flex-item1 box">1</div><div class="flex-item2 box">1</div><div class="flex-item3 box">auto</div></div><h5>justify-content: space-around;;</h5><div class="flex-container3"><div class="flex-item1 box">1</div><div class="flex-item2 box">1</div><div class="flex-item3 box">auto</div></div><h3>垂直排列</h3><div class="flex-container4"><div class="flex-item1 box">1</div><div class="flex-item2 box">1</div><div class="flex-item3 box flex-center1">auto</div></div></body>
</html>

HTML5 弹性布局相关推荐

html中前台布局特点,HTML5弹性布局有什么优点
HTML5弹性布局是用来为盒状模型提供最大的灵活性,优点在于其容易上手,根据flex规则很容易达到某个布局效果.任何一个容器都可以指定为Flex弹性布局. 本教程操作环境:windows7系统.CSS ...
html5 弹性布局
html5 弹性布局一.移动开发常用技巧 Viewport基本知识设置布局Viewport的各种信息 1.width=device-width: 设置Viewport视口宽度等于设备宽度 2.in ...
html弹性重叠,关于html5弹性布局(2)
在前面的一篇文章中,我很简单介绍了弹性布局的概念,这里我将介绍弹性布局的实例化.理解弹性布局,并不是那么简单,因为弹性布局的基础和思想,和我们传统的盒装模式不同,所以必须要深入接受这种弹性布局的思路. ...
从零开始前端学习[38]:html5中的弹性布局一(移动端响应式实现各种布局，极其重要)
html5中的弹性布局(移动端及其重要) 弹性盒子模型是什么? 容器属性提示博主:章飞_906285288 博课地址:http://blog.csdn.net/qq_29924041 弹性盒子模型 ...
HTML5 响应式网页设计之页面美化（三.弹性布局）
1.弹性布局弹性布局是由弹性布局的容器和弹性布局的伸缩项目两部分组成任何一个容器都可以指定为 Flex 布局. 注意,设为 Flex 布局以后,子元素的float.clear和vertical-a ...
HTML5基础知识，3D动画效果实现，定位，弹性布局以及CSS样式的设定,响应式，移动端
前端 HTML 超文本标记语言(超越文本) 网页 <html> 主体 <body> 头部 <head> 网页标题 <title> 段落 <p> ...
移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)
移动端web现状: 移动端常见浏览器:UC浏览器,QQ浏览器,Opera浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器及杂牌浏览器.移动端常见的浏览器都是基于webk ...
html响应式弹性布局,CSS3响应式布局之弹性盒子
CSS3弹性盒模型可以轻松的创建自适应浏览器流动窗口的布局或自适应字体大小的布局.同时该盒子决定了一个盒子在其他盒子的分布方式,及如何处理可用的空间. 自己写了一个弹性盒子的demo: 主要HTML代 ...
CSS3 弹性布局/伸缩布局 flex
CSS3 之弹性布局 flex 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. ...
打造无懈可击的Web设计——流动布局和弹性布局
防弹衣并不能100%保证不受伤害,但穿了总是比不穿好.这样的规则同样适用于Web设计.通过增加网页的灵活性,以及采用必要的步骤来保证它在尽可能多的场景中都具备可读性,我们就给自己的作品赋予了一些与众不 ...

HTML5 弹性布局

弹性布局

弹性布局相关属性

flex-direction相关属性

flex-wrap相关属性

justify-content相关属性

align-items相关属性

align-content相关属性

样例Demo

HTML5 弹性布局相关推荐

最新文章

热门文章