流式布局

文章目录

  • 流式布局
  • 1. 什么是流式布局
  • 2. 固定布局和流式布局比较
  • 3.流式布局的缺点
  • 3.弹性布局
    • 3.1 弹性盒子属性——父容器属性
      • 1.flx-direction属性
      • 2.flex-wrap属性
      • 3.flex-flow属性
      • 4.align-items属性
      • 5.justify-content属性
    • 3.2 弹性盒子属性——子容器属性
      • 1.order属性
      • 2.flex-grow属性
      • 3.flex-shrink属性
      • 4.flex-basis属性

1. 什么是流式布局

​ 在PC端进行网页制作时，经常使用固定像素的网页布局，但这种布局方式对小屏幕的设备不友好。为了适应小屏幕的设备，在移动设备和跨平台（响应式)网页开发过程中，多数使用流式布局。

​ 流式布局是一种等比例缩放布局方式，在CSS代码中使用百分比来设置宽度，所以也称百分比自适应布局·流式布局实现方法是，将CSS固定像素宽度换算为百分比宽度，其换算公式如下。

换算公式：目标元素宽度/父盒子宽度=百分数宽度

案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>百分比布局</title><style>parent{width: 1000px;height: 1000px;background-color: thistle;}.child{width: 50%;     /*孩子子节点宽为1000px*50%; */height: 50%;     /*孩子子节点高为1000px*50%; */background-color: turquoise;}</style>
</head>
<body><div class="parent"><div class="child"></div></div>
</body>
</html>

2. 固定布局和流式布局比较

<body><div class="fix"</div>
</body>

​ 页面布局

.fix{width: 1000px;height: 1000px;background-color: thistle;
}

​ 固定布局

.fix{width: 1000px;height: 50%;background-color: thistle;
}

​ 流式布局

3.流式布局的缺点

​ 流式布局是用于解决类似的设备不同分辨率之间的兼容，如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度﹑文字大小还是和原来一样(即，这些东西无法变得“流式”），显示非常不协调。

3.弹性布局

​ 可伸缩框属性(Flexible Box）是CSS3新添加的盒子模型属性，有人称之为伸缩盒模型或者是弹性盒子模型，它的出现打破了我们经常使用的浮动布局，实现垂直等高、水平均分、按比例划分等分布方式以及如何处理可用的空间。使该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。
​ 伸缩盒子由伸缩容器和伸缩子元素组成，通过设置元素的display属性为flex（块状元素）或者inline-flex（内联元素），便可以将一个盒子指定为伸缩盒子。每一个伸缩容器内都有两根轴:主轴和交叉轴，两轴之间成90度，需要注意水平的不一定就是主轴。每根轴都有起点和终点，伸缩盒子内能定义多个伸缩子元素，伸缩子元素沿着主轴排列。设为flex布局以后，子元素的float、clear和vertical-align属性将失效。 伸缩子元素也可通过设置display:flex指定成伸缩盒子，也就是伸缩盒子可以嵌套。

注意：并不是所有的浏览器都能支持伸缩盒子，IE11+、Firefox20.0+、Opera12.1十、Chrome21.0+以及Safari6.1+能支持。

3.1 弹性盒子属性——父容器属性

1.flx-direction属性

flex-direction指定了伸缩盒子中主轴的方向，也就是子元素的排列方式。

属性的语法规则如下：

flex-direction: row | row-reverse | column | column-reverse

参数说明：

row：横向从左往右排列，是默认的排列方式，也就是默认的主轴是水平方向。

row-reverse：与row相反的方向排列，从右往左排，最后一项在最前面。

column：从上往下垂直排列，此时主轴是垂直方向。

column-reverse：与column相反，从下往上排，最后一项排在最上面。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>伸缩盒子flex-direction的设置</title><style>.flexbox{width:200px;height: 200px;border:1px solid black;display:flex; /*通过display:flex设置父div盒为伸缩盒子*/}.flexbox>div{ /*.flexbox>div使用直接后代选择器*/width:50px;height:50px;line-height:50px;border:1px solid black;text-align:center;}</style></head><body><div class="flexbox"><div>1</div><div>2</div><div>3</div></div>    </body>
</html>

运行后如下：

​ 分别给.flexbox设置flex-direction : row-reverse

flex-direction :column

flex-direction :

2.flex-wrap属性

flex-wrap属性设置伸缩盒子的子元素超出父容器时是否换行。

属性的语法规则如下：

flex-wrap: nowrap | wrap | wrap-reverse

参数说明：

nowrap：子元素不换行，是默认值。

wrap：子元素可以换行。

wrap-reverse：子元素可以换行，第一行在最下方。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>伸缩盒子flex-direction的设置</title><style>.flexbox{width:200px;height: 200px;border:1px solid black;display:flex; /*通过display:flex设置父div盒为伸缩盒子*/flex-wrap:nowrap; /*子元素不换行，是默认值*/}.flexbox>div{ /*.flexbox>div使用直接后代选择器*/width:100px;height:50px;line-height:50px;border:1px solid black;text-align:center;}</style></head><body><div class="flexbox"><div>1</div><div>2</div><div>3</div></div>    </body>
</html>

运行结果如下图所示：

三个子盒子均分了父容器的200px，每个子容器的宽度为66.67px。

3.flex-flow属性

flex-flow属性是align-items属性设置伸缩盒子中子元素在交叉轴方向上的对齐方式。

属性的语法规则如下：

align-items : stretch | center | flex-start |flex-end | baseline

参数说明：

stretch：如果交叉轴为垂直方向，子元素未设置高度或者是高度为auto，那么，子元素将被拉伸以适应容器，是默认值。

center：子元素位于容器交叉轴方向的正中央，如果交叉轴为垂直方向，那么该属性就是设置子元素位于容器垂直中央。

flex-start：子元素位于容器交叉轴的开始位置，如果交叉轴为垂直方向，则位于最上方，如果交叉轴为水平方向，则位于最左侧。

flex-end：子元素位于容器交叉轴的结束位置，如果交叉轴为垂直方向，则位于最下方，如果交叉轴为水平方向，则位于最右侧。

baseline：子元素位于容器的基线上。flex-direction属性和flex-wrap属性的简写形式，例如：flex-flow:row wrap，相当于子元素主轴方向为水平方向，里面的子元素可以换行。该属性的默认值为row nowrap。

4.align-items属性

align-items属性设置伸缩盒子中子元素在交叉轴方向上的对齐方式。

属性的语法规则如下：

align-items : stretch | center | flex-start |flex-end | baseline

参数说明：

stretch：如果交叉轴为垂直方向，子元素未设置高度或者是高度为auto，那么，子元素将被拉伸以适应容器，是默认值。

center：子元素位于容器交叉轴方向的正中央，如果交叉轴为垂直方向，那么该属性就是设置子元素位于容器垂直中央。

flex-start：子元素位于容器交叉轴的开始位置，如果交叉轴为垂直方向，则位于最上方，如果交叉轴为水平方向，则位于最左侧。

flex-end：子元素位于容器交叉轴的结束位置，如果交叉轴为垂直方向，则位于最下方，如果交叉轴为水平方向，则位于最右侧。

baseline：子元素位于容器的基线上。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>伸缩盒子flex-direction的设置</title><style>.flexbox{width:200px;height: 200px;border:1px solid black;display:flex; /*通过display:flex设置父div盒为伸缩盒子*/align-items:stretch       /*设置子元素交叉轴对齐方式*/}.flexbox>div{   /*.flexbox>div使用直接后代选择器*//*  width:50px;  */  /*去除子元素的高度和宽度*//* height:50px;  */line-height:50px;border:1px solid black;text-align:center;}</style></head><body><div class="flexbox"><div>1</div><div>2</div><div>3</div></div>    </body>
</html>

运行结果如下：

​ 上图中可看到三个子元素在交叉轴方向，也就是垂直方向的高度都被拉伸了。这里如果不去掉高度和行高，那么元素的高度就不会被拉伸。同理，如果交叉轴是水平方向，那么，不去掉width:50，子元素也不会被水平拉伸。

​ 同理，在代码区给.flexbox样式分别添加align-items:center;align-items:flex-start;align-items: flex-end;其它内容保持不变，运行结果如下图所示：

​ baseline会使子元素位于容器的基线上，在代码区给.flexbox样式添加align-items:baseline;，同时使用.flexbox>div:last-child{ line-height: 80px; }设置最后一个子元素的行高为80像素。运行结果如下图所示：

上图中能明显看到三个子元素的文字基线是对齐的

5.justify-content属性

justify-content属性设置伸缩盒子中子元素在主轴方向上的对齐方式。

属性的语法规则如下：

justify-content : flex-start | flex-end| center | space-between | space-around

参数说明：

flex-start：子元素在主轴方向的开始位置往结束方向填充，为justify-content属性的默认值。

flex-end：子元素在主轴方向的结束位置往开始方向填充。

center：子元素在主轴方向的中间位置。

space-between：子元素平均分布在主轴上。如果剩余空间为负或者只有一个子元素，则该值等同于flex-start。否则，第1个子元素的外边距和主轴的开始边线对齐，而最后1个子元素的外边距和主轴的结束边线对齐，然后剩余的子元素分布在主轴上，相邻子元素的间隔相等。

space-around：子元素平均分布在主轴上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个子元素，则该值等同于center。否则，子元素沿主轴分布，且彼此间隔相等（比如是20px），同时首尾两边和伸缩容器之间留有一半的间隔（1/2*20px=10px）。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>伸缩盒子flex-direction的设置</title><style>.flexbox{width:200px;height: 200px;border:1px solid black;display:flex; /*通过display:flex设置父div盒为伸缩盒子*/}.flexbox>div{ /*.flexbox>div使用直接后代选择器*/width:50px;height:50px;line-height:50px;border:1px solid black;text-align:center;justify-content:flex-end;  /*子元素在主轴方向的结束位置往开始方向填充*/}</style></head><body><div class="flexbox"><div>1</div><div>2</div><div>3</div></div>    </body>
</html>

运行结果如下：

​ 在案例代码区分别给.flexbox样式添加justify-content: flex-end;、justify-content:center;、justify-content: space-between、justify-content: space-around;，其它内容保持不变，运行结果如下图所示:

3.2 弹性盒子属性——子容器属性

1.order属性

order属性用整数值来定义伸缩容器子元素的排列顺序，默认是0，可以为负值，数值越小越排在前面。

案例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>伸缩盒子order的设置</title><style>.flexbox{width:200px;height: 200px;border:1px solid black;display:flex;}.flexbox>div{width:50px;height:50px;line-height:50px;border:1px solid black;text-align:center;}.flexbox>div:nth-child(1){order:3;}.flexbox>div:nth-child(2){order:1;}.flexbox>div:nth-child(3){order:2;}</style></head><body><div class="flexbox"><div>1</div><div>2</div><div>3</div></div>    </body>
</html>

​ 代码区中通过.flexbox>div:nth-child(1)给第一个div设置order为3，nth-child(2)给第二个div设置order为1，nth-child(3)给第三个div设置order为2。代码运行效果如下图所示:

2.flex-grow属性

​ flex-grow属性设置伸缩盒子中子元素的扩展比率，该值是不带单位的整数，默认为0。以主轴为水平轴为例，当父容器的宽度大于子容器所有宽度之和时，父元素会有剩余空间，当所有伸缩子元素都设置为0时，表示都不向父容器索取剩余空间。以案例为例，所有的子元素都没有设置flex-grow，能看到上图中依然有剩余空间。当给第一个伸缩子元素添加样式flex-grow:1;，而其它子元素不申请剩余空间时，就能看到所有的剩余空间都被第一个收缩子元素占据。

​ 如果给第一个伸缩子元素添加样式flex-grow:1;，第二个伸缩子元素添加样式flex-grow:2;，那么，剩余空间就会被第一个元素和第二个元素进行划分，第一个元素的宽度为本身原有的50像素再加上剩余的空间1/3，第二个元素的宽度为本身原有的50像素再加上剩余的空间2/3。

3.flex-shrink属性

​ flex-shrink属性用于设置伸缩盒子中子元素的收缩比率，该值是不带单位的整数，默认为1。以主轴为水平轴为例，当父容器的宽度小于子元素所有宽度之和时，所有的子元素都需要按照定义的收缩比率收缩起来，以适应父容器的宽度。

​ 以案例为例，给所有的子元素设置width:100px;，那么此时三个子元素的宽度和会超出伸缩盒子的宽度，如果此时给第一个div设置收缩比为1，第二个div设置收缩比为2，第三个div设置收缩比为1，其它代码保持不变。效果如下图所示：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>伸缩盒子order的设置</title><style>.flexbox{width:200px;height: 200px;border:1px solid black;display:flex;}.flexbox>div{width:100px;height:50px;line-height:50px;border:1px solid black;text-align:center;}.flexbox>div:nth-child(1){order:3;flex-shrink: 1;}.flexbox>div:nth-child(2){order:1;flex-shrink: 2;}.flexbox>div:nth-child(3){order:2;flex-shrink: 1;}</style></head><body><div class="flexbox"><div>1</div><div>2</div><div>3</div></div>    </body>
</html>

​ 三个伸缩子元素的宽度之和为240像素，加上各自的1像素边框线，总宽度为246像素，而父伸缩盒子的宽度为200像素，超出了46像素，所以三个伸缩子元素均要压缩宽度，具体压缩的比例根据flex-shrink属性值的占比而定。第一个flex-shrink为1，而三个伸缩子元素的总flex-shrink为4，那么第一个需要被压缩的宽度为461/4，也就是11.5，那么该元素的总宽度便为80-11.5+2=70.5。同理，第二个伸缩子元素需要被压缩的宽度为462/4。

4.flex-basis属性

​ flex-basis属性用于设置伸缩盒子伸缩基准值，该值是一个长度单位或者一个百分比。以主轴为水平轴为例，当同时设置了width和flex-basis属性时，width属性无效。

案例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>伸缩盒子order的设置</title><style>.flexbox{width:200px;height: 200px;border:1px solid black;display:flex;}.flexbox>div{width:100px; /*子元素宽度总和大于父元素*/height:50px;line-height:50px;border:1px solid black;text-align:center;}.flexbox>div:nth-child(1){order:3;flex-basis: 50px;}.flexbox>div:nth-child(2){order:1;flex-basis: 50px;}.flexbox>div:nth-child(3){order:2;flex-basis: 50px;}</style></head><body><div class="flexbox"><div>1</div><div>2</div><div>3</div></div>    </body>
</html>

运行结果如图：

从上图可看到，width属性并没有生效，三个伸缩子元素生效元素为flex-basis。

移动布局——流式布局相关推荐

  1. 移动web开发--移动端常见布局+流式布局和flex布局+携程网首页案例

    浏览器私有前缀 为了兼容老版本 私有前缀 -moz- : fixfox 浏览器私有属性 -ms- : ie浏览器私有属性 -webkit- : safari.chrome私有属性 -o- : Oper ...

  2. 前端开发_HTML5_布局-流式布局

    流式布局 1.引入 上一次课中我们讲解了表格布局,但是我们也可以看出表格布局存在着很大的局限性,那就是当页面的内容比较多的时候我们发现是无法使用表格布局实现的,那么接下来我们学习一个比较重要的布局方式 ...

  3. 移动式布局(流式布局)

    文章目录 标准视口标签 二倍图 物理像素&物理像素比 多倍图 背景缩放 background-size 移动端开发选择 CSS初始化 normalize.css CSS3盒子模型 box-si ...

  4. html5流式布局,流式布局是什么?流式布局详细介绍

    在PC端进行网页制作时,经常使用固定像素并且内容居中的网页布局,为了适应小屏幕的设备,在移动设备和跨平台(响应式)网页开发过程中,多数使用流式布局,下面我们就对流式布局进行详细介绍. 流式布局是一种等 ...

  5. Java | 布局界面之FlowLayout布局(流式布局)

    Java的布局中最为简单的便是FlowLayout流式布局 组件按照设置对齐方式从左向右排列,一行排满到下一行继续排列 详细代码请去https://blog.csdn.net/lovemy_baby/ ...

  6. android自适应流式布局,流式布局(完整版)

    1.首先创建一个自定义View类: public class CustomView extends ViewGroup { private int mleftMargin=20; private in ...

  7. 01移动端布局基础之流式布局

    技术交流QQ群:1027579432,欢迎你的加入! 1.移动端基础 浏览器现状 PC端常见浏览器:360浏览器.谷歌浏览器.火狐浏览器.QQ浏览器.百度浏览器.搜狗浏览器.IE浏览器等. 移动端常见 ...

  8. 微信小程序电商实战-商品列表流式布局

    微信小程序电商实战-商品列表流式布局 流式布局概念 流式布局也叫百分比布局 把元素的宽,高,margin,padding不再用固定数值,改用百分比, 这样元素的宽,高,margin,padding会根 ...

  9. 《响应式web设计》读书笔记（三）拥抱流式布局

    一.什么是流式布局 流式布局已经不是什么新概念了.为了文章的完整性,还是提一提吧.很久很久以前,当大部分人的屏幕分辨率还是1024*768的时候,网页设计师一般都按照960px或是980px的固定宽度 ...

最新文章

  1. python输出所有组合数_生成两个列表的所有组合，并在python中一一输出
  2. Spring Boot项目利用MyBatis Generator进行数据层代码自动生成
  3. SAP系统中的银行主数据FI12
  4. 动态规划-时间规整算法
  5. 乾云服务器虚拟化,乾云服务器虚拟化系统
  6. 为什么说spark不稳定
  7. 随记一个C的毫秒级群PING
  8. 云+X案例展 | 民生类： “中企通信 × TutorABC”共创全球数字教育科技新里程
  9. 微服务升级_SpringCloud Alibaba工作笔记0014---Nacos简介和下载_10万微服务实例在线管理
  10. C++11 处理时间和日期的处理，以及chrono库介绍
  11. UVA11752 The Super Powers【超级幂+暴力+数论】
  12. 【avx2】VitrualBox 安装centos7 支持avx2
  13. AXD 查看register笔记
  14. K核苷酸频率（KNF，k-nucleotide frequencies）或K-mer频率
  15. 一点接入全网互通，企业上云就用它！
  16. 阴阳师服务器维护6,《阴阳师》手游6月10日维护更新公告
  17. 大厂高频面试题之Java内存区域分布
  18. linux配置文件如何排序,Linux系统中sort排序命令的使用教程
  19. 基于51单片机的多功能电子万年历设计（LCD12864+DS1302+DS18B20)
  20. 远程超大功率森林防火喊话与应急广播系统方案

热门文章

  1. 基于autojs pro的接码登录界面，演示了组件事件的挂接
  2. date( 1day ) php,PHP_使用PHP的日期与时间函数技巧，PHP的日期时间函数date() 1，年- - phpStudy...
  3. react+redux实战——redux到底是个啥子？
  4. python的内存管理_Python深入06 Python的内存管理
  5. 数据库设计的六个阶段详解
  6. JAVA stream流对集合进行替换修改
  7. java jni dll路径_Java中Jni调用DLL文件试验
  8. 2021及历届国科大高级OS思考题汇总
  9. Microsoft Office 2016出现Excel文件打不开解决方法
  10. Asset Catalog Compiler Warning Group