从零开始前端学习[39]:html5中的弹性布局二(移动端响应式实现各种布局，极其重要)

最新推荐文章于 2023-07-23 17:15:32 发布
最新推荐文章于 2023-07-23 17:15:32 发布
阅读量1k 收藏
点赞数 1
分类专栏： # 1.从零开始挑战前端 文章标签： 项目属性 align-self order flex-grow flex
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/qq_29924041/article/details/78241274
版权

html5中的弹性布局二(移动端响应式实现各种布局，极其重要)

  1. 项目属性

提示
博主：章飞_906285288
博客地址：http://blog.csdn.net/qq_29924041

之前在上一篇博客中介绍了弹性盒子属性，即容器属性的一些特点，特性特征,是添在容器元素上面进行添加的。那么在这里主要讲的就是容器里面的项目，项目属性，也就是需要在容器元素内部的项目元素中去进行设置的相关属性

项目属性

项目属性：给容器的属性，我们统一控制项目，项目属性，单独控制某个属性
项目属性主要有以下几个属性:

属性 属性含义 属性值
flex-grow 定义项目放大比例 默认为0 属性值为没有单位的数字
flex-shrink 定义项目缩小比例，默认为1 属性值为没有单位的数字
flex-basis flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（宽度） 浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto
flex属性 是flex-grew，flex-shrink，flex-basis的复合属性 建议优先使用这个属性，flex:0 1 auto;（默认）
align-self属性 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
order属性 负责排序使用的 值越大，越靠后，并且了还可以拉到负的值

下面就来开始逐个介绍项目属性

flex-grow分配剩余空间的大小

定义： 定义项目放大比例，默认为0（即如果存在剩余空间，也不放大。 ）

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有剩余空间的话）。

如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

第一种情况：没有加宽度,直接按照flex-grow按比例分配，没给则不分配
第二种情况：加了宽度 算法：实际宽度= 初始宽度+flex-grow比例

注意：对于弹性盒子分配不准的项都加上width: 0%;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
  <meta name="Author" content="作者是谁">       
  <meta name="Keywords" content="关键词">
  <meta name="Description" content="描述和简介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
    .main {width: 800px;margin:100px auto;box-shadow: 0 0 15px 0 deeppink;}
    .main div{width: 800px;height: 150px;box-shadow: 0 0 15px 0 greenyellow}
    h3{text-align: center}
    .flexx{display: flex} /*给容器一个display:flex属性*/
    .main ul li{width: 150px;height: 40px;font: bolder 20px/40px "";text-align: center;background: greenyellow;box-shadow: 0 0 10px 0 blue}
    /**
    如果想让项目元素平均分配的话，这个时候就需要将所有项目元素的初始值设置为0
    */
    .main .box1 .flexx li:nth-child(1){width: 0;flex-grow: 1}
    .main .box1 .flexx li:nth-child(2){width: 0;flex-grow: 1}
    .main .box1 .flexx li:nth-child(3){width:0;flex-grow: 2}
    .main .box1 .flexx li:nth-child(4){width:0;flex-grow: 1}

    /**
      给了宽度的时候，并且所有子项目的宽度和还有剩余空间的时候，先去按比例分配剩余空间，然后加上每个项目元素原来的宽度
      就是最终项目元素的宽度
    */

    .main .box2 .flexx li:nth-child(1){width: 150px;flex-grow: 1}
    .main .box2 .flexx li:nth-child(2){width: 150px;flex-grow: 1}
    .main .box2 .flexx li:nth-child(3){width:150px;flex-grow: 2}
    .main .box2 .flexx li:nth-child(4){width:150px;flex-grow: 1}
  </style>
</head>
<body>
  <div class="main">
    <div class="box1">
      <h3>flex-grow:不给宽度</h3>
      <ul class="flexx">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </div>
    <div class="box2">
      <h3>flex-grow:给宽度</h3>
      <ul class="flexx">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </div>
  </div>
</body>
</html>

显示效果如下所示:

这里写图片描述

flex-shrink定义项目缩小比例，默认为1

定义： 定义项目缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不
缩小。负值对该属性无效。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
  <meta name="Author" content="作者是谁">       
  <meta name="Keywords" content="关键词">
  <meta name="Description" content="描述和简介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
    .main {width: 800px;margin:100px auto;box-shadow: 0 0 15px 0 deeppink;}
    .main div{width: 800px;height: 150px;box-shadow: 0 0 15px 0 greenyellow}
    h3{text-align: center}
    .flexx{display: flex} /*给容器一个display:flex属性*/
    .main ul li{width: 150px;height: 40px;font: bolder 20px/40px "";text-align: center;background: greenyellow;box-shadow: 0 0 10px 0 blue}
  /*当所有项目的元素的宽度和超过容器宽度的时候，即当空间不足，该项目将缩小，并且是等比例进行缩小的*/
    .main .box1 .flexx li:nth-child(1){width: 200px;flex-shrink: 0}/**如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不
缩小。负值对该属性无效*/
    .main .box1 .flexx li:nth-child(2){width: 200px;}
    .main .box1 .flexx li:nth-child(3){width:300px;}
    .main .box1 .flexx li:nth-child(4){width:400px;}


    /**
     计算：
     容器长度为800;
     超出的宽度为150px
     项目总共的加权和：150 +200 *2+300*3+400*4 = 2850;
     收缩值 = （项目的宽度*shrink/加权）* 超出值
          150 *1 /2850  * 150 = 7.89
          200 *2 /2850  * 150 = 21
          300 *3 /2850  * 150 = 47
          300 *4 /2850  * 150 = 63
     实际宽度 = 项目长度 - 收缩值;
          150 - 7.89 = 142
          200 - 21 = 179
          300 - 47 = 253
          300- 63 = 237
    */
    .main .box2 .flexx li:nth-child(1){width: 150px; flex-shrink: 1}
    .main .box2 .flexx li:nth-child(2){width: 200px;flex-shrink: 2}
    .main .box2 .flexx li:nth-child(3){width:300px;flex-shrink: 3}
    .main .box2 .flexx li:nth-child(4){width:300px;flex-shrink: 4}
  </style>
</head>
<body>
  <div class="main">
    <div class="box1">
      <h3>flex-shrink:默认为1</h3>
      <ul class="flexx">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </div>
    <div class="box2">
      <h3>flex-shrink:重新设置</h3>
      <ul class="flexx">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </div>
  </div>
</body>
</html>

这里写图片描述

具体的计算公式在项目中有所显示；

* flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（宽度）*

flex-basis: 通俗的说就是宽度，分配空间的时候要根据这一个值来进行计算，默认值auto（width属性或者内容撑开的宽度），也就是说，如果有这个属性，则按照这个属性分配，如果没有，按照width分配，width也没有，按内容撑开的宽度分配;

这个的使用很简单，给后面所有的宽高挨个赋值就行了
.box1 .flexx li:nth-child(1){ flex-basis: 100px; }
.box1 .flexx li:nth-child(2){ flex-basis: 50px; }
.box1 .flexx li:nth-child(3){ flex-basis: 150px; }
复合属性flex: flex-grow flex-shrink flex-basis;

建议优先使用这个属性，而不是单独写分离的属性，因为浏览器会推算相关的值。

当容器宽度改变时，会根据给定的比例进行伸缩

系统默认的：
flex：0 1 auto;（默认）

其实这个很好理解，首先去寻找flex-basis，然后计算出总长度，分配是放大还是进行收缩的。如果是收缩的，那么就选flex-shrink,如果是放大的，则就选择flex-grow属性值，
其主要特性相当于一个三目运算符的形式，在这里也不做过多的赘述

align-self允许单个项目由于其他项目不一样的对齐方式，可以副高align-item是属性

定义： align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

align-self: flex-start | flex-end | center | baseline | stretch; 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
  <meta name="Author" content="作者是谁">       
  <meta name="Keywords" content="关键词">
  <meta name="Description" content="描述和简介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
    .main {width: 800px;margin:100px auto;box-shadow: 0 0 15px 0 deeppink;}
    .main div{width: 800px;height: 200px;box-shadow: 0 0 15px 0 greenyellow}
    h3{text-align: center}
    .flexx{display: flex} /*给容器一个display:flex属性*/
    .main ul{height: 178px}
    .main ul li{width: 50px;height: 100px;font: bolder 20px/100px "";text-align: center;background: greenyellow;box-shadow: 0 0 10px 0 blue}
    .main .box1 .flexx li:nth-child(1){align-self: stretch}
    .main .box1 .flexx li:nth-child(2){align-self: flex-start}
    .main .box1 .flexx li:nth-child(4){align-self: center}
    .main .box1 .flexx li:nth-child(3){align-self: flex-end}
    /*如果要用baseline对齐，则这些项目都要有这个属性，是按照最大的字体的基线对齐*/
    .main .box1 .flexx li:nth-child(5){align-self: baseline;font-size: 20px}
    .main .box1 .flexx li:nth-child(6){align-self: baseline;font-size: 24px}
    .main .box1 .flexx li:nth-child(7){align-self: baseline;font-size: 34px}
  </style>
</head>
<body>
  <div class="main">
    <div class="box1">
      <h3>align-self</h3>
      <ul class="flexx">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
      </ul>
    </div>

  </div>
</body>
</html>

注意要给设置了flex属性的容器一个高度，否则会是内容撑开高度，那么这样的话，就不会有效果,在上述的时候给了ul设置了一个178px的高度

显示如下:

这里写图片描述

order属性，也就是排序属性。

order排序 值越大，越靠后，并且了还可以拉到负的值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
  <meta name="Author" content="作者是谁">       
  <meta name="Keywords" content="关键词">
  <meta name="Description" content="描述和简介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
    .main {width: 800px;margin:100px auto;box-shadow: 0 0 15px 0 deeppink;}
    .main div{width: 800px;height: 200px;box-shadow: 0 0 15px 0 greenyellow}
    h3{text-align: center}
    .flexx{display: flex} /*给容器一个display:flex属性*/
    .main ul{height: 178px}
    .main ul li{width: 50px;height: 100px;font: bolder 20px/100px "";text-align: center;background: greenyellow;box-shadow: 0 0 10px 0 blue}
    .main .box2 .flexx li:nth-child(1){order:1 }
    .main .box2 .flexx li:nth-child(2){order: 2}
    .main .box2 .flexx li:nth-child(3){order: -3}
    .main .box2 .flexx li:nth-child(4){order: -4}
    .main .box2 .flexx li:nth-child(5){order: 5}
    .main .box2 .flexx li:nth-child(6){order: 7}
    .main .box2 .flexx li:nth-child(7){order: 8}


  </style>
</head>
<body>
  <div class="main">
    <div class="box1">
      <h3>排序前</h3>
      <ul class="flexx">
        <li>1</li>
        <li>2</li>
        <li>-3</li>
        <li>-4</li>
        <li>5</li>
        <li>7</li>
        <li>8</li>
      </ul>
    </div>
    <div class="box2">
      <h3>排序后</h3>
      <ul class="flexx">
        <li>1</li>
        <li>2</li>
        <li>-3</li>
        <li>-4</li>
        <li>5</li>
        <li>7</li>
        <li>8</li>
      </ul>
    </div>
  </div>
</body>
</html>

显示效果如下所示：

这里写图片描述

^_^ 小小码nong
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flex 平铺布局_最详细完整的flex弹性布局
weixin_39965881的博客
12-19 2114
初了解在学习弹性布局之前首先就要明白其概念flex 就是flexible box的缩写，意为弹性布局，用来为盒装模型提供最大的灵活性任何一个容器都可以指定为flex布局.box{display: flex;}行内元素当然也可以使用flex布局.box{display: inline-flex;}Webkit 内核的浏览器，必须加上-webkit前缀。.box{display: -webkit-fl...
弹性布局（flex)
最新发布
meigancai_的博客
08-07 2102
一、弹性布局简介弹性布局，也称为Flex布局（Flexbox），是一种用于设计Web页面布局的CSS技术。它的目标是在不同屏幕尺寸和设备上创建灵活的、自适应的布局，使开发者能够更轻松地控制元素在容器内的排列和分布。Flex布局的核心思想是通过指定容器（flex container）和其内部的子元素（flex it基本概念：① 容器： 需要添加弹性布局的父元素；② 项目： 弹性布局容器中的每一个子元素，称为项目；基本方向：① 主轴： 在弹性布局中，我们会通过属性规定水平/垂直方向为主轴；
弹性布局
qq_34267076的博客
05-05 6912
弹性布局 1.什么是弹性布局 flex(弹性盒，伸缩盒) 弹性布局是css中又一种布局手段，它主要代替浮动来完成页面的布局。 flex可以使元素具有弹性，让元素可以跟着页面大小的改变而改变 2.怎么实现弹性布局 弹性容器:要使用弹性盒，必须先将一个元素设置为弹性容器 我们通过display来设置弹性容器 display:flex 来设计为块级弹性容器 display:inline-flex 设计为行内的弹性容器 弹性容器的属性: 主轴:弹性元素的排列方向成为主轴 侧轴:与主轴垂直方向的称为侧轴
【CSS】浅谈flex弹性布局
m0_46537958的博客
09-28 445
flex 设置两端对其 .div-new-dialog-footer{ display: flex; flex-flow: row nowrap; justify-content: space-between; } .left-div{ display:inline } .right-div{ display:inline }
H85_html手机网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-01
开发者可以通过查看和编辑这些文件，了解并学习如何实现响应式布局、交互效果和优化性能。同时，也可以根据自己的需求进行个性化修改，打造出独具特色的手机网站。 总结来说，"H85_html手机网站_网页源码移动端前端...
H160_html手机网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-01
"H160_html手机网站_网页源码移动端前端_H5模板_自适应响应式源码.zip" 指的是一个压缩文件，包含了用于构建手机网站的HTML源码，这个源码是专为移动端设计的前端模板，采用了HTML5技术，并具有自适应和响应式布局的...
H101_html手机网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-01
【标签】"前端模板"表明这是一个用于快速搭建网页结构的预设代码框架，开发者可以在此基础上进行定制，减少从零开始编写代码的工作量。"手机网站"强调了该模板的目标平台是移动设备，而"响应式"和"html5模板"则强调...
H90_html手机网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-01
前端模板是预先设计和编码的网页结构，开发者可以依据这些模板快速创建网页，减少从零开始的工作量。H90模板作为一个前端模板，可能包含了CSS（层叠样式表）和JavaScript文件，用于控制样式和交互性，也可能包含图片...
H73_html手机网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-01
"H73_html手机网站_网页源码移动端前端_H5模板_自适应响应式源码.zip" 文件提供了一套完整的移动端前端开发资源，包含HTML5模板和自适应响应式设计，旨在帮助开发者快速构建适用于各种设备的高品质网站。让我们一起...
弹性布局（Flex布局）整理
lumot的博客
09-08 623
一、 弹性布局 　　一个好的网站都有让用户看上去很舒服的布局，一个网站的布局也会或多或少影响到它的浏览量，看完阮大神的博客，就想把弹性布局整理一下。 　　在平时的我们常用的布局类型有以下几种： 　　...
前端必知：21.弹性布局的认识及使用
qq_52799985的博客
07-23 950
弹性布局（Flexbox）是一种用于创建灵活的、自适应的网页布局的CSS模块。它提供了一种在容器和其中的元素之间建立弹性关系的方式，使得元素能够自动调整其大小、顺序和对齐方式，以适应不同的屏幕尺寸和设备。
响应式布局与弹性布局基础篇
weixin_34252686的博客
08-13 2274
响应式布局与弹性布局 一.响应式布局 1.响应式布局的概念 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，...
弹性布局的理解
L_ZMZ的博客
05-15 1944
弹性布局
flex简写属性介绍
qq_40147756的博客
06-19 1400
flex用于设置：弹性元素如何，以适应其弹性容器中可用的空间。由以上3个属性组成。
流式布局、响应式布局、弹性布局等概念和区别
weixin_39580806的博客
10-16 5082
静态布局（Static Layout） 即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端。 2、设计方法： 　　PC：居中布局，所...
flex布局
weixin_44852765的博客
04-08 365
-flex-direction：设置主轴的方向 row (默认值)从左到右 row-reverse 从右到左 column 从上到下 column-reverse 从下到上 - justify-content：设置主轴上的子元素排列方式 flex-start 从头部开始 flex-end 从尾部开始 center 居中显示 space-around 平分剩余空间 space-...
CSS移动端之flex布局（弹性布局）
m0_61547956的博客
04-10 1446
1、原理 通过给父元素设置display：flex,来达到控制子盒子的位置和排列。 采用了Flex布局的元素叫做flex容器，他的所有子元素叫做Flex项目，采用了flex布局float、clear、vertical-align属性失效。 采用了flex布局的元素不用管他是行内元素还是块级元素。 2、flex布局VS传统布局 传统布局： 兼容性好 布局繁琐 局限性 不能在移动端很好的布局 flex弹性布局： 操作方便 布局极为简单 移动端广泛 PC端浏览器支持情况较差 3、flex布局的相
响应式布局实战：HTML5实现跨屏友好设计（下）
在本篇文章中，我们将深入探讨HTML5的响应式布局技术，这是在现代网页设计中至关重要的一部分，旨在确保网站在不同设备和屏幕尺寸上都能提供一致且优化的用户体验。响应式布局并非全新的发明，而是通过整合现有资源...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值