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

简介: 移动端页面布局中的流动布局(百分比布局)和弹性布局

移动端页面布局


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

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

image.png


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

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

image.png


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

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

image.png


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

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

image.png


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属性对弹性子元素的对齐无效。
目录
打赏
0
0
0
0
1
分享
相关文章
antv/g6之图布局及切换布局
antv/g6之图布局及切换布局
982 0
uniapp移动端悬浮按钮(吸附边缘)
uniapp移动端悬浮按钮(吸附边缘)
363 0
css布局-弹性布局学习笔记
这篇文章是关于CSS弹性布局的学习笔记,详细介绍了flex容器和元素的相关属性,包括flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content以及order、flex-grow、flex-shrink、flex-basis、flex和align-self等,解释了这些属性在弹性盒子布局中的作用和用法。
掌握弹性盒子布局(Flex):打造灵活的网页布局
掌握弹性盒子布局(Flex):打造灵活的网页布局
如何实现一个两栏布局,右侧自适应?三栏布局中间自适应?
要实现一个两栏布局,右侧自适应的效果,可以使用 CSS 的 Flexbox 或 Grid 布局来实现。以下是使用 Flexbox 实现的示例:
83 1
|
8月前
布局
​ 可选值: ​ visible. 默认值 子元素会从父元素中溢出,在父元素外部的位置显示 ​ hidden 溢出的内容将会被裁剪不会显示 (一剪没) ​ scroll 滚 ,生成两个滚动条,通过滚动条来查看完整的内容 ​ auto 根据我们需要生成滚动条 ​ overflow-x:单独处理水平的 ​ overflow-y: 单独处理垂直的
响应式设计布局要不要了解一下?
响应式设计布局要不要了解一下?
49 0
AI助理

阿里云 AI 助理已上线!

快来体验一下吧。