移动布局——流式布局

屿苍～

已于 2022-11-21 16:51:33 修改

阅读量9.1k

点赞数 9

文章标签： css3 css html

于 2022-02-11 15:06:06 首次发布

本文链接：https://blog.csdn.net/m0_52197531/article/details/122865878

版权

流式布局

文章目录

流式布局
1. 什么是流式布局
2. 固定布局和流式布局比较
3.流式布局的缺点
3.弹性布局

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指定成伸缩盒子，也就是伸缩盒子可以嵌套。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MDlWar5i-1644485817350)(E:\Typora\图片\QQ截图20210927110526.png)]$

注意：并不是所有的浏览器都能支持伸缩盒子，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>

运行后如下：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VIcEak3p-1644485817351)(E:\Typora\图片\1.png)]$

分别给.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>

运行结果如下图所示：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rghmKKaH-1644485817353)(E:\Typora\图片\3.png)]$

三个子盒子均分了父容器的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>

运行结果如下：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1dnEH0lA-1644485817354)(E:\Typora\图片\4.png)]$

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

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gd2Od4Nu-1644485817354)(E:\Typora\图片\5.png)]$

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>

运行结果如下：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cP5hP0lK-1644485817356)(E:\Typora\图片\7.png)]$

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-84AlwL3F-1644485817357)(E:\Typora\图片\8.png)]$

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。代码运行效果如下图所示:

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mhmbC6wT-1644485817358)(E:\Typora\图片\9.png)]$

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>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uM4EGlxA-1644485817359)(E:\Typora\图片\11.png)]$

三个伸缩子元素的宽度之和为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>

运行结果如图：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mxrHx8gl-1644485817360)(E:\Typora\图片\12.png)]$

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

屿苍～

关注

9
点赞
踩
56

收藏

觉得还不错? 一键收藏
2
评论
移动布局——流式布局

流式布局文章目录流式布局1.1 什么是流式布局1.2 固定布局和流式布局比较1.3流式布局的缺点2.1弹性布局2.1.1 弹性盒子属性——父容器属性1.flx-direction属性2.flex-wrap属性3.flex-flow属性4.align-items属性5.justify-content属性2.1.2 弹性盒子属性——子容器属性1.order属性2.flex-grow属性3.flex-shrink属性4.flex-basis属性1.1 什么是流式布局在PC端进行网页制作时，
复制链接

扫一扫