Web Flex布局解析

憨憨三胖
106 阅读4分钟

二倍图：

图片以分辨率的形式展现在我们眼中。写代码的逻辑分辨率为375px（编写代码的分辨率都为375px左右）,美工给我们剪辑的一般都是750px

Snipaste_2022-08-07_16-12-05.png

所以我们在编辑代码的时候需要把美工给我们的代码（像素）分辨率缩小一半来符合逻辑分辨率

Snipaste_2022-08-07_16-12-30.png

后期我们写的逻辑分辨率有专人给我们转变为主流手机常用的分辨率（即常在手机上看到的图片）

Snipaste_2022-08-07_16-12-39.png

display;flex （相当于浮动的意思）

目标：能够使用flex布局模型的灵活、快捷的开发网页

flex布局/弹性布局

是一种浏览器提倡的布局模型

布局网页更简单、灵活

避免浮动脱标的问题

作用

父元素添加display:flex子元素可以自动的挤压或者拉伸

组成部分：

弹性容器、弹性盒子、主轴、侧轴、交叉轴

视口标签：

目标;使用meta标签设置视口适配不同设备宽度的网页

目标：网页宽度和设备宽度（分倍率）相同

解决办法：添加视口标签

语法：

Snipaste_2022-08-07_16-36-32.png

viewport：视口

width=device-width：视口宽度 = 设备宽度

initial-scale=1.0：初始页面缩放倍数

maximum-scale=1.0 最大缩放倍数

user-scalable=0 不允许用户缩放页面（移动端） 或者为 no 如果为 yes 则允许用户缩放

京东移动端写法如下：

justify-content:space-between: 让页面更加布局更加的充分、饱满排序起来

主轴对齐方式

属性值作用
flex-start默认值, 起点开始依次排列
flex-end终点开始依次排列
center沿主轴居中排列
space-around弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-between弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间
space-evenly弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等

重点记住标红的。如果非要问我那个常用，我只能说是 space-between

justify-content: space-between;

显示效果：两侧没缝隙

Snipaste_2022-08-21_18-18-19.png

justify-content: space-around;

效果如下： 记住2倍

Snipaste_2022-08-21_18-18-40.png

justify-content: space-evenly;

效果如下： 记住空隙一样大

Snipaste_2022-08-21_18-18-49.png

 justify-content: center;

效果如下： 经常用于让一个盒子水平居中

Snipaste_2022-08-21_18-18-58.png

记忆：

  1. 两侧没缝隙是 between
  2. 缝隙一样大是 evenly
  3. 2倍缝隙是 around

小技巧：

见到这个效果，最简单的做法就是： 给大盒一个 左右的padding， 然后在加 justify-content: space-between

侧轴对齐方式

属性值作用
flex-start起点开始依次排列
flex-end终点开始依次排列
center沿侧轴居中排列
stretch默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器

重点记住center ，可以让元素垂直居中。

align-items: center;

我们可以通过flex让一个子盒子水平和垂直居中。

Snipaste_2022-08-21_18-19-08.png

.father {
    width: 500px;
    height: 500px;
    background-color: pink;
    /* 设置为flex布局 */
    display: flex;
    /* 主轴水平居中 */
    justify-content: center;
    /* 侧轴垂直居中 */
    align-items: center;
}
​
.son {
    width: 200px;
    height: 200px;
    background-color: purple;
}

伸缩比

把父盒子分为若干份数，每个子盒子各占几份。

flex:1; 一定给子盒子加

分配父级剩余的空间

语法：

flex: 1;

比如有一个父盒子里面有三个子盒子，每个子盒子写 flex：1； 此时每个子盒子各占三分之一。

.father {
    display: flex;
    height: 300px;
    background-color: pink;
}
​
.father div {
    /* 每个孩子各占1份 */
    flex: 1;
    /* 默认子盒子和父亲一样高 */
    background: purple;
}

html 结构

<div class="father">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

显示效果：

Snipaste_2022-08-21_18-19-19.png

  1. 一定要给子盒子添加。
  2. 子盒子默认高度会和父盒子一样高。（前提是不给高度）

圣杯布局

所谓的圣杯布局就是左右两边大小固定不变，中间宽度自适应。

一般这种布局方式适用于各种移动端顶部搜索部分，这是最常见的，如京东手机版主页面顶部搜索

Snipaste_2022-08-21_18-22-38.png

核心思路：

  • 两侧盒子写固定大小
  • 中间盒子 flex: 1; 占满剩余空间
.top {
    display: flex;
    justify-content: c;
}
​
.top div:first-child {
    width: 50px;
    height: 50px;
    background-color: red;
}
​
.top div:last-child {
    width: 50px;
    height: 50px;
    background-color: red;
}
​
.top div:nth-child(2) {
    flex: 1;
    height: 50px;
    background-color: pink;
}

注意：中间flex: 1; 和 width 有冲突。 优先执行 flex：1；

小结

  1. 在flex眼中，标签不再分类。

    • 简单说就是没有块级元素，行内元素和行内块元素
    • 任何一个元素都可以直接给宽度和高度一行显示

  2. Flex不存在脱标的情况：也就是基本淘汰了浮动，更不用清除浮动

  3. 当然存在兼容性问题，如果不考虑兼容性可以大量使用，如果是移动端则不用考虑直接flex

    caniuse.com/ 可以查看兼容性

移动端css初始化推荐使用normaliza.css/

官方网址;necolas.github.io/normalize.c…

iconfont字体图标放在第一个防止文件覆盖掉字体图标大小

avatar
文章
阅读
粉丝