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

移动端页面布局

一、流式布局（百分比布局）

概念：流式布局是一种等比例缩放布局方式，在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用于调整主轴的方向，可以调整为横向或者纵向。默认情况下是横向，此时横轴为主轴，纵轴为侧轴；如果改为纵向，则纵轴为主轴，横轴为侧轴，取值如表所示。

取值 描述
row 弹性盒子元素按横轴方向顺序排列（默认值）
row-reverse 弹性盒子元素按横轴方向逆序排列
column 弹性盒子元素按纵轴方向顺序排列
column-reverse 弹性盒子元素按纵轴方向逆序排列

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

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

取值 描述
nowrap 容器为单行，该情况下flex子项可能会溢出容器。该值是默认属性值，不换行
wrap 容器为多行，flex子项溢出的部分会被放置到新行（换行），第一行显示在上方
wrap-reverse 反转wrap排列（换行），第一行显示在下方

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

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

取值 描述
flex-start 弹性盒子元素将向行起始位置对齐（默认值）
flex-end 弹性盒子元素将向行结束位置对齐
center 弹性盒子元素将向行中间位置对齐
space-between 弹性盒子元素会平均分布在行里，第一个元素的边界与行的起始位置边界对齐，最后一个元素的边界与行结束位置的边界对齐
space-around 弹性盒子元素会平均分布在行里，两端保留子元素与子元素之间间距大小的一半

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

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

取值 描述
flex-start 弹性盒子元素向垂直于轴的方向上的起始位置对齐
flex-end 弹性盒子元素向垂直于轴的方向上的结束位置对齐
center 弹性盒子元素向垂直于轴的方向上的中间位置对齐
baseline 如果弹性盒子元素的行内轴（页面中文字的排列方向）与侧轴方向一致，则该值与flex-start等效。其他情况下，该值将与基线对齐
stretch 默认值。如果指定侧轴大小的属性值为auto，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照min/max-width/height属性的限制

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属性的取值类似。需要注意的是，在使用弹性盒布局时，以下属性不起作用。

  1. 多列布局中的column-*属性对弹性子元素无效。
  2. float和clear对弹性子元素无效。使用float会导致display属性计算为block。
  3. vertical-align属性对弹性子元素的对齐无效。
posted @ 2022-04-15 10:41  永恒之月TEL  阅读(134)  评论(0)  编辑  收藏  举报