前端学习之CSS---弹性盒与rem布局

最新推荐文章于 2025-03-12 17:48:57 发布

Jonahr

最新推荐文章于 2025-03-12 17:48:57 发布

阅读量419

点赞数

分类专栏：前端学习文章标签： css 前端学习

本文链接：https://blog.youkuaiyun.com/weixin_45258154/article/details/125241127

版权

前端学习专栏收录该内容

10 篇文章

订阅专栏

本文详细探讨了前端开发中的两种重要布局技术——弹性盒和rem布局。弹性盒提供灵活的容器布局，包括主轴方向调整、对齐方式、折行处理等；rem布局则在移动端适配中发挥关键作用，通过相对单位实现响应式设计。

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

弹性盒与rem布局

弹性盒特别适合移动端布局

一、弹性盒 `display : flex`

影响：

子元素默认横向排列（div等块级元素也会横向排列）
行内元素，变成块级元素（span等行内元素会变成块级元素，可以设置宽高）
只有一个元素的时候，margin-auto自动居中

1、改变主轴方向：flex-direction

flex-direction: row; //默认
row				从左到右的横向排列
row-reverse		从右到左的横向排列（反转）
column			从上至下的垂直排列
column-reverse	从下至上的垂直排列（反转）

2、主轴侧轴对齐方式：justify-content、align-items

主轴对齐--- justify-content: flex-start; //默认
flex-start		靠近起始端
flex-end		靠近末端
center			居中
space-between	两端对齐
space-around	距离环绕（相当于每个子元素加一个左右的margin，最左侧和最右侧的间隔会小一点）
space-evenly	间隔相等（均分一行的长度使得所有间隔相等）


侧轴对齐--- align-items: flex-start; //默认
flex-start		靠近起始端
flex-end		靠近末端
center			居中

3、折行与行间距：flex-wrap、align-content

子元素内容过多时折行处理，默认是不折行
flex-wrap: wrap;


折行后行间距--- align-content:flex-start; 
flex-start		向起始端紧贴
flex-end		向末端紧贴
center			居中紧贴
space-around	距离环绕
space-between	两端对齐

4、项目对齐与顺序：align-self、order

采用flex布局的元素，称为flex容器，他的所有子元素自动成为容器成员，称为flex项目
align-self: flex-start; //默认
flex-end
center
baseline	项目的第一行文字的基线对齐
stretch		在项目不设高度的时候通过stretch可以拉伸充满剩余高度


order:0; //默认
order可以取正负两种值，编号小的优先显示，同级别编号按代码顺序显示

5、划分空间：flex : 1

flex划分的是主轴方向上的长度

<style>
    // 1和3为固定宽度，2独占中间的剩余空间
    div{
        width:100px;
        height:100px;
        border:1px solid red
    }
    .div2{
        flex:1;
    }

    // 1和3各占25%，2独占中间的50%
    .div1,.div3{
        flex:1;
    }
    .div2{
        flex:2;
    }
</style>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</body>

二、rem布局

1、`px`，`em`，`rem`是什么

px：50px 像素单位
em：10em 相对单位，相对于父元素的字体大小。 div width：10em
rem：10rem 相对单位，相对于根元素（html）的字体大小。 div width：10rem

2、为什么要使用rem布局

移动端开发的时候因为每个设备分辨率不同，屏幕大小也不同，需要适应性的大小，不能把布局写死，使用rem可以轻松解决移动端开发的问题。通过设置元素最小值或最大值，也可以实现响应式布局。

3、rem布局准备工作

<style>
    *{
        margin:0;
        padding:0;
    }
    ul{
        list-style:none;
    }
    html{
        font-size:16px;
    }
</style>
<script>
    // 获取终端设备屏幕大小，并赋值给font-size
	document.documentElement.style.fontSize = document.documentElement.clientWidth/750*16px + 'px';
    // fontSize = 当前设备的css布局宽度/物理分辨率(设计稿的宽度)*基准font-size
    // JS代码中，带横杠的属性要用驼峰表示  font-size ===> fontSize
</script>

/* 
实际开发中可以使用插件 px to rem 来计算rem值
*/

4、vh与vw

vh ===> view height
100vh === 视口的高度
vw ===> view width
100vw === 视口的宽度

html{
    font-size:5vw;
}

此方法需要提前将单位进行转换
例如：设计稿上的最大宽度为320px，即100vw = 320px
原本html的字体大小为16px，即可算出font-size:5vw时可达到相同效果
之后切换别的设备，也会按比例正常展示布局

vw 与 100%的关系
没有滚动条时vw == 100%
出现滚动条时 vw计算滚动条的宽度 100%计算除了滚动条剩余的空间
即vw的宽度 > 100%的宽度