手机端CSS笔记（精简）

最新推荐文章于 2025-03-26 16:02:47 发布

小匣

最新推荐文章于 2025-03-26 16:02:47 发布

阅读量638

点赞数 1

分类专栏：前端文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/weixin_46160720/article/details/123954943

版权

前端专栏收录该内容

7 篇文章

订阅专栏

本文深入探讨了CSS布局中的视口宽度、二倍图、百分比布局和Flex弹性布局。百分比布局实现了宽度自适应，而Flex布局则解决了元素脱标问题，提供了更精确的布局控制。通过调整主轴对齐和交叉轴对齐属性，如justify-content和align-items，可以实现各种灵活的布局效果。Flex布局在响应式设计和复杂结构化布局中表现优异。

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

视口

在这里插入图片描述
宽度等于设备宽度

二倍图

百分比布局（流式布局）

宽度自适应

flex弹性布局

作用

解决脱标
根据页面缩放
基于Flex精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
Flex布局非常适合结构化布局
在这里插入图片描述

构成

在这里插入图片描述

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

添加这个属性的盒子叫弹性容器
子级叫弹性盒子在这里插入图片描述
默认主轴在水平方向，所以其盒子也是按照水平方式排列

主轴对齐

调节主轴或侧轴的对齐方式来设置盒子之间的间距。

属性：justify-content

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

center
在这里插入图片描述
space-around
间距出现在子级与子级之间

space-between
所有间距相等

space-evenly
每个盒子都加间距，所有子级与子级之间的间距大一些
整个盒子两边小
在这里插入图片描述

交叉轴对齐

align-items

属性值	作用
flex-start	默认值，起点开始依次排列
flex-end	终点开始依次排列
`center`	`沿交叉轴居中对齐`
`stretch`	`默认值，弹性盒子沿着主轴线被拉伸至铺满容器`