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

news/2024/5/19 17:35:39 标签: 项目属性, align-self, order, flex-grow, flex

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

  1. 项目属性

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

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

项目属性">项目属性

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

属性 属性含义 属性值
flex-grow>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>flex-grow分配剩余空间的大小">flex-grow>flex-grow分配剩余空间的大小

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

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

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

第一种情况：没有加宽度,直接按照flex-grow>flex-grow按比例分配，没给则不分配
第二种情况：加了宽度 算法：实际宽度= 初始宽度+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>flex-grow: 1}
    .main .box1 .flexx li:nth-child(2){width: 0;flex-grow>flex-grow: 1}
    .main .box1 .flexx li:nth-child(3){width:0;flex-grow>flex-grow: 2}
    .main .box1 .flexx li:nth-child(4){width:0;flex-grow>flex-grow: 1}

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

    .main .box2 .flexx li:nth-child(1){width: 150px;flex-grow>flex-grow: 1}
    .main .box2 .flexx li:nth-child(2){width: 150px;flex-grow>flex-grow: 1}
    .main .box2 .flexx li:nth-child(3){width:150px;flex-grow>flex-grow: 2}
    .main .box2 .flexx li:nth-child(4){width:150px;flex-grow>flex-grow: 1}
  </style>
</head>
<body>
  <div class="main">
    <div class="box1">
      <h3>flex-grow>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>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">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属性定义了在分配多余空间之前，项目占据的主轴空间（宽度）*

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-grow-flex-shrink-flex-basis">复合属性flex: flex-grow>flex-grow flex-shrink flex-basis;

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

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

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

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

align-self允许单个项目由于其他项目不一样的对齐方式可以副高align-item是属性">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属性，也就是排序属性。

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>

显示效果如下所示：

这里写图片描述


http://www.niftyadmin.cn/n/783499.html

相关文章

从零开始前端学习[40]:css3中的resize，user-select属性，多列布局特性，怪异盒子模型，倒影

从零开始前端学习[40]:css3中的resize，user-select属性，多列布局特性，怪异盒子模型，倒影

css3中的resize&#xff0c;user-select属性&#xff0c;多列布局特性&#xff0c;怪异盒子模型&#xff0c;倒影 resizeuser-select多列布局columns&#xff0c;column-gap&#xff0c;column-rule怪异盒子模型box-sizing倒影-webkit-box-reflect 提示 博主&#xff1a;章飞…
阅读更多...
从零开始前端学习[41]:html5中新增加的一些智能表单

从零开始前端学习[41]:html5中新增加的一些智能表单

html5中新增加的一些智能表单 input type类型email&#xff0c;tel&#xff0c;url&#xff0c;range&#xff0c;search&#xff0c;number&#xff0c;color&#xff0c;dateinput的一些属性placeholder&#xff0c;required&#xff0c;list 提示&#xff1a; 博主&#x…
阅读更多...
从零开始前端学习[42]:关于浮动元素在窗口缩小情况下，布局下沉的深思

从零开始前端学习[42]:关于浮动元素在窗口缩小情况下，布局下沉的深思

关于浮动元素在窗口缩小情况下&#xff0c;布局下沉的深思 本博客主要总结下浮动元素下沉 提示 博主&#xff1a;章飞_906285288 博客地址:http://blog.csdn.net/qq_29924041 关于浮动元素在窗口缩小情况下&#xff0c;布局下沉的深思 我们在做前端项目的时候&#xff0c;浮…
阅读更多...
从零开始前端学习[43]:初识javaScript，前端的行为层

从零开始前端学习[43]:初识javaScript，前端的行为层

初识javaScript&#xff0c;前端的行为层 javaScript是什么&#xff1f;javaScript是用来做什么的?javaScript的几种引用形式 提示 博主&#xff1a;章飞_906285288 博客地址:http://blog.csdn.net/qq_29924041 javaScript是什么&#xff1f;&#xff1f; 简而言之&#x…
阅读更多...
从零开始前端学习[44]:工欲善其事必先利其器，了解下js的调试console下的函数，与alert弹出框

从零开始前端学习[44]:工欲善其事必先利其器，了解下js的调试console下的函数，与alert弹出框

工欲善其事必先利其器&#xff0c;了解下js的调试console下的函数&#xff0c;与alert弹出框 consolealertjs代码相关的注意事项 提示&#xff1a; 博主&#xff1a;章飞_906285288 博客地址:http://blog.csdn.net/qq_29924041 console下的函数的使用 console对象提供对浏览…
阅读更多...
从零开始前端学习[45]:js中的所谓的事件类型，鼠标事件，表单事件，键盘事件以及系统事件

从零开始前端学习[45]:js中的所谓的事件类型，鼠标事件，表单事件，键盘事件以及系统事件

js中的所谓的事件类型 鼠标事件表单事件键盘事件系统事件 提示&#xff1a; 博主&#xff1a;章飞_906285288 博客地址:http://blog.csdn.net/qq_29924041 鼠标事件 可以想象一下&#xff0c; 我们平时在使用鼠标的时候都是有哪些操作的&#xff0c;单击&#xff1f;双击&a…
阅读更多...
从零开始前端学习[46]:在标签中添加内容，关于innerHTML和innerText的一点解析

从零开始前端学习[46]:在标签中添加内容，关于innerHTML和innerText的一点解析

从零开始前端学习[46]:在标签中添加内容&#xff0c;关于innerHTML和innerText的一点解析 innerHTMLinnerText 提示 博主&#xff1a;章飞_906285288 博客地址&#xff1a;http://blog.csdn.net/qq_29924041 其实在前面的简单的js的使用过程中&#xff0c;已经使用了innerHT…
阅读更多...
python1到100,是否有内置的Python函数可以生成0到1之间的100个数字？

python1到100,是否有内置的Python函数可以生成0到1之间的100个数字？

I am looking for something like range, but one that will allow me to specify the start and the end value, along with how many numbers I need in the collection which I want to use in a similar fashion range is used in for loops.解决方案No, there is no built…
阅读更多...
最新文章

Copyright @ 2022~2023