flex换轴，布局，语法，移动端

最新推荐文章于 2023-11-29 22:05:53 发布

上帝喜欢糖

最新推荐文章于 2023-11-29 22:05:53 发布

阅读量970

点赞数 3

CC 4.0 BY-SA版权

文章标签： css html5 前端

本文链接：https://blog.csdn.net/qq_20623665/article/details/128385022

本文详细介绍了浏览器视口标签的使用，以及flex布局中的主轴和侧轴对齐方式，包括圣杯布局和方向设置。重点讲解了flex布局的各种排列选项如space-around、space-between和stretch，并展示了经典的双飞翼布局实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

物理分辨率：

硬件所支持的，屏幕出厂就设定无法修改逻

辑分辨率：

软件可以达到的，我们开发中写的是逻辑分辨率

视口（viewport）就是浏览器显示页面内容的屏幕区域。

<meta name="viewport" content="width=device-width, 
initial-scale=1.0, 
maximum-scale=1.0, user-scalable=0">

视口标签

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

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

maximum-scale=1.0 最大缩放倍数

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

flex布局

display: flex 开启弹性容器，需要给父和加，使子盒子变为弹性盒子

---------------------------------------------------------------------------------------------------

主轴对齐方式

flex-start

默认值,起点开始依次排列

----------------------------------------------------------------------------------------------------
flex-end

justify-content: flex-end;

终点开始依次排列

----------------------------------------------------------------------------------------------------------
center

justify-content: center;

沿主轴居中排列

--------------------------------------------------------------------------------------------------------------

space-around

justify-content: space-around;

弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧

-----------------------------------------------------------------------------------------------------------------------

space-between

justify-content: space-between;

弹性盒子沿主轴均匀排列，空白间距均分在相邻盒子之间

------------------------------------------------------------------------------------------------------
space-evenly

justify-content: space-evenly;

弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

--------------------------------------------------------------------------------------------------------

侧轴对齐方式

-------------------------------------

flex-start

起点开始依次排列

-----------------------------------------------------------------------------------

flex-end

终点开始依次排列

----------------------------------------------------------------------------------

center

沿侧轴居中排列

-------------------------------------------------------------------------------------------------------------------------

stretch

默认效果,弹性盒子沿着侧轴线被拉伸至铺满容器

------------------------------------------------------------------------------------------------------------------------------

经典圣杯布局（双飞翼）

左右盒子固定宽高，中间盒子设置flex:1

---------------------------------------------------------------------------------------------------------------------------

设置主轴方向

修改主轴方向属性: flex-direction

row

行, 水平(默认值)

column

列, 垂直

-------------------------------------------------------------------------------------------------

row-reverse

行, 从右向左

-------------------------------------------------------------------------------------------------------

column-reverse

列, 从下向上

---------------------------------------------------------------------------------------------------------------------

弹性盒子换行

flex-wrap: wrap;

换轴之后

相应的语法（效果和上面是一样的）

align-content: space-between;

align-content: space-around;

align-content: space-evenly;

align-content: center;