html页面布局之flex弹性盒子

最新推荐文章于 2025-06-21 13:12:31 发布

qq_38333670

最新推荐文章于 2025-06-21 13:12:31 发布

阅读量366

点赞数

CC 4.0 BY-SA版权

文章标签： it

本文链接：https://blog.youkuaiyun.com/qq_38333670/article/details/80577291

本文介绍了Flexbox布局的基本概念，包括其工作原理、容器与项目的定义，并通过实例展示了如何使用Flexbox实现元素的灵活布局。同时，文章探讨了Flexbox与传统布局方式的区别，以及它在不同浏览器中的兼容性。

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

一、背景介绍

Flexbox 布局(FLexible Box)意在提供一个更为有效的方式来进行布局、对齐和分配一个容器内元素之间的空间，即使他们的大小是未知的或者动态的。

flex布局的主要思想是，让容器能够改变它的子元素的宽度/高度（甚至顺序），从而更好地填充可用的空间（主要是为了适应所有种类的设备和屏幕大小）。

最重要的，flexbox 布局是可以改变方向的。与之相对的是传统布局（block是垂直方向的从上到下，inline是水平方向的从左到右）。虽然他们在页面上表现良好，但是他们缺乏弹性（字面意义上的缺乏弹性）来适应大型的或者复杂的应用（尤其是遇到方向的改变、调整大小、伸展、收缩等等这些情况时）。

二、知识剖析

采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross
start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

三、常见问题

元素的水平垂直居中

四、解决方案

1.传统方案

2.flex解决方案

五、编码实战

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="1.css">
</head>
<body>
<div class="box">

<span class="box2">&nbsp</span>
<span class="box2">&nbsp</span>
<span class="box2">&nbsp</span>
</div>
</body>

</html>

html{
font-size: 62.5%;
}
body{
margin: 0;
}
.box{
width: 100%;
height: 30rem;
background: rgb(190, 189, 189);
/* text-align: center;
line-height: 30rem; */
display:flex;
/* justify-content: center; */
align-items: center;
/* justify-content: flex-start; */
justify-content: flex-end;
/* justify-content: space-between; */
/* justify-content: space-around; */
/* align-items:flex-start; */
/* align-items: flex-end; */
}
.box1{
position: absolute;
background: orange;
padding: 5rem 5rem;
/* text-align: center; */
/* margin: auto 0 ; */
}
.box2{
position: absolute;·
margin: 0rem;
background: orange;
padding: 5rem 5rem;
}

六、拓展思考

flex布局在各浏览器下的兼容性

七、参考文献

参考一：
<a href="http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool">阮一峰</a>

参考二:
<a href="http://www.cnblogs.com/mk2016/p/5562994.html">兼容性</a>

八、更多讨论

https://www.jianshu.com/p/2dfa5bab1ef1

提问1：flex:1;是什么意思，有什么效果

回答：flex：1代表一个页面的宽度比例，在不不确定元素的宽度值的时候会用到。

提问2：flex有什么缺点

回答：浏览器支持不全是最大缺点

提问3：flex里面的元素可以使用绝对定位吗

回答：可以使用绝对定位

感谢大家观看！

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

获得更多IT技能，请移步官网点击链接直达：http://www.jnshu.com/login/1/17884272