移动端页面布局中的流动布局（百分比布局）和弹性布局
移动端页面布局
一、流式布局（百分比布局）
概念：流式布局是一种等比例缩放布局方式，在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属性的取值类似。需要注意的是，在使用弹性盒布局时，以下属性不起作用。
- 多列布局中的column-*属性对弹性子元素无效。
- float和clear对弹性子元素无效。使用float会导致display属性计算为block。
- vertical-align属性对弹性子元素的对齐无效。
本文来自博客园，作者：永恒之月TEL，转载请注明原文链接：https://www.cnblogs.com/akc4/p/16147980.html
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步