移动端页面布局中的流动布局（百分比布局）和弹性布局

2022-11-21 184

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 移动端页面布局中的流动布局（百分比布局）和弹性布局

移动端页面布局

一、流式布局(百分比布局)

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

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

没有流式布局

<html lang="en">
<head>
    <style>
        body > * {
          width: 980px;height: auto;margin: 0 auto;margin-top: 10px;
          border: 1px solid #000;padding: 5px;
        }
        header {height: 50px;}
        section {height: 300px;}
        footer {height: 30px;}
        section > * {height: 100%;border: 1px solid #000;float: left;}
        aside {width: 250px;}
        article {width: 700px;margin-left: 10px;}
      </style>  
</head>
<body>
    <header>header</header>
    <nav>nav</nav>
    <section>
      <aside>aside</aside>
      <article>article</article>
    </section>
    <footer>footer</footer>
  </body>
</html>

流式布局

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body > * {
          /*   自由设置 ，最先是980px*/
          width: 95%; height: auto; margin: 0 auto; margin-top: 10px;
          border: 1px solid #000; padding: 5px;
        }
        header { height: 50px; }
        section { height: 300px; }
        footer { height: 30px; }
        section > * { height: 100%; border: 1px solid #000; float: left; }
           /*目标元素宽度 / 父盒子宽度 = 百分数宽度*/
          /*   250/980=25%  */
        aside { width: 25%; }
          /*目标元素宽度 / 父盒子宽度 = 百分数宽度*/
          /*   700/980=70%  */
        article { width: 70%; margin-left: 1%; }
      </style>    
</head>
<body>
    <header>header</header>
    <nav>nav</nav>
    <section>
      <aside>aside</aside>
      <article>article</article>
    </section>
    <footer>footer</footer>
  </body>
</html>

二、弹性盒布局

使用弹性盒布局(Flexible Box)可以轻松地创建响应式网页布局，为盒状(块)模型增加了灵活性。弹性盒改进了块模型，既不使用浮动，也不会合并弹性盒容器与其内容之间的外边距。它是一种非常灵活的布局方法，就像几个小盒子放在一个大盒子里一样，相对独立，容易设置。

1.弹性盒布局常用属性(display) 属性

默认值为inline，这意味着此元素会被显示为一个内联元素，在元素前后没有换行符；
如果设置display的值为flex，则表示用于指定弹性盒的容器；
如果设置display的值为none，则表示此元素不会被显示。

例如

<html lang="en">
<head>
    <style>
        .box {
            display: flex;
            border: 1px solid #999;
            height: 60px;
            padding: 4px;
            background: #ddd;
        }
        .box>div {
            margin: 2px;
            padding: 2px;
            border: 1px solid #999;
            background: #fff;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="a">A</div>
        <div class="b">B</div>
        <div class="c">C</div>
    </div>
</body>
</html>

2.弹性盒布局常用属性(flex-flow)

当使用flex-flow时，其值是flex-direction的值和flex-wrap的值的组合。例如，将flex-direction设为row，将flex-wrap设为nowrap等价于flex-flow：row nowrap

3.弹性盒布局常用属性(flex-direction)

flex-direction用于调整主轴的方向，可以调整为横向或者纵向。默认情况下是横向，此时横轴为主轴，纵轴为侧轴；如果改为纵向，则纵轴为主轴，横轴为侧轴，取值如表所示。

4.弹性盒布局常用属性(flex-wrap)

flex-wrap用于让弹性盒元素在必要的时候拆行(超出的自动换行)

5.弹性盒布局常用属性(justify-content)

justify-content属性能够设置子元素在主轴方向的排列方式

6.弹性盒布局常用属性(align-items)

align-items属性用于定义子元素在侧轴上的对齐方式，其取值如表所示。

7.弹性盒布局常用属性(order)

order属性用于设置子元素出现的排列顺序。数值越小，排列将会越靠前，默认为0。

.a { order: 2; }
.b { order: 3; }
.c { order: 1; }

8.弹性盒布局常用属性(flex)

flex属性是flex-grow(扩展比率)、flex-shrink(收缩比率)和flex-basis(宽度，像素值)的简写形式，能够设置子元素的伸缩性。

.a {  
  flex-grow: 1;  /* 也可以写成 flex: 1; */
}

9.弹性盒布局常用属性(align-self)

align-self属性取值有auto、flex-start、flex-end、center、baseline、stretch，每个值的意义与align-items属性的取值类似。需要注意的是，在使用弹性盒布局时，以下属性不起作用。

多列布局中的column-*属性对弹性子元素无效。
float和clear对弹性子元素无效。使用float会导致display属性计算为block。
vertical-align属性对弹性子元素的对齐无效。