提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
- 前言
- 一、父元素
- 二、容器属性
- 3、自适应布局
- 总结
前言
以下内容为弹性盒布局的学习
一、父元素
//父元素
.father{
display：flex
}
二、容器属性
2.1 flex-dirction: 主轴方向
2.1.1 横向排列(默认）
.son{
flex-dirction:row
}
2.1.2 纵向排列
.son{
flex-dirction:colum
}
2.1.3 横向（从右向左）
.son{
flex-dirction:row-reverse
}
2.1.4 纵向（从下向上）
.son{
flex-dirction:colum-reverse
}
2.2 flex-wrap ：换行
2.2.1 不换行（默认）
ul {
display: none;
display: flex;
}
li {
list-style: none;
height: 100px;
width: 100px;
background-color: pink;
}
2.2.2 换行
ul {
display: none;
display: flex;
/* 换行 */
flex-wrap: wrap;
}
li {
list-style: none;
height: 100px;
width: 100px;
background-color: pink;
}
2.3 flex-flow 主轴方向和换行的结合
ul {
display: none;
display: flex;
/* 主轴方向与换行的结合 */
flex-flow: row wrap;
}
li {
list-style: none;
height: 100px;
width: 100px;
background-color: pink;
}
2.4 justify-content: 主轴水平对齐方式
2.4.1 start ：从头到尾
ul {
display: flex;
/* 主轴对齐方式 */
/* start: 从左向右（默认横向为主轴） */
justify-content: start;
}
li {
list-style: none;
height: 100px;
width: 100px;
background-color: pink;
}
2.4.2 end：从尾到头
ul {
display: flex;
/* 主轴对齐方式 */
/* end: 从尾到头（默认横向为主轴） */
justify-content: end;
}
li {
list-style: none;
height: 100px;
width: 100px;
background-color: pink;
}
2.4.3 space-between ：间接相等
ul {
display: flex;
/* 主轴对齐方式 */
/* space-between: 间接相等（默认横向为主轴） */
justify-content: space-between;
}
li {
list-style: none;
height: 100px;
width: 100px;
background-color: pink;
}
2.4.4 center：居中
ul {
display: flex;
/* 主轴对齐方式 */
/* center: 居中（默认横向为主轴） */
justify-content: center;
}
li {
list-style: none;
height: 100px;
width: 100px;
background-color: pink;
}
2.4.5 space-around： 空间环绕
ul {
display: flex;
/* 主轴对齐方式 */
/* space-around: 空间环绕（默认横向为主轴） */
justify-content: space-around;
}
li {
list-style: none;
height: 100px;
width: 100px;
background-color: pink;
}
2.5 align-items主轴垂直对齐方式
2.5.1 center 垂直居中
ul {
width: 100%;
height: 300px;
background-color: aliceblue;
display: flex;
/* justify-content主轴水平对齐方式 */
/* space-around: 空间环绕（默认横向为主轴） */
justify-content: space-around;
/* align-items主轴垂直对齐方式 */
/* center:垂直居中 */
align-items: center;
}
li {
list-style: none;
height: 100px;
width: 100px;
background-color: pink;
}
2.5.2 flex-start：从头到尾
ul {
width: 100%;
height: 300px;
background-color: aliceblue;
display: flex;
flex-wrap: wrap;
/* justify-content主轴水平对齐方式 */
/* space-around: 空间环绕（默认横向为主轴） */
justify-content: space-around;
/* align-items主轴垂直对齐方式 */
/* flex-start:从上到下 */
align-items: flex-start;
}
li {
list-style: none;
height: 100px;
width: 100px;
background-color: pink;
}
2.5.4 flex-end:从尾到头
ul {
width: 100%;
height: 300px;
background-color: aliceblue;
display: flex;
flex-wrap: wrap;
/* justify-content主轴水平对齐方式 */
/* space-around: 空间环绕（默认横向为主轴） */
justify-content: space-around;
/* align-items主轴垂直对齐方式 */
/* flex-start:从尾到头 */
align-items: flex-end;
}
li {
list-style: none;
height: 100px;
width: 100px;
background-color: pink;
}
2.6 flex-grow 子元素放大的比例，默认为0，也就是不放大
ul {
list-style: none;
width: 100%;
height: 300px;
background-color: aliceblue;
display: flex;
}
ul li {
list-style: none;
margin: 10px;
/* 所占份数为1 */
flex-grow: 1;
background-color: pink;
}
ul li.one {
/* 所占份数放大3倍 */
flex-grow: 3
}
2.7 flex-basis : 定义了在分配多余空间之前，项目占据的主轴空间（main size）。类似于width
2.8 flex：flex : flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<script type="text/javascript">
</script>
<style>
* {
margin: 0;
padding: 0
}
header {
height: 50px;
line-height: 50px;
border-bottom: 1px solid #ccc;
background-color: lightpink;
}
.box {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column
}
section {
flex: 1;
}
footer {
height: 50px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<header>
<a href="search.html"> 头部</a>
</header>
<section>中级</section>
<footer>底部</footer>
</div>
</body>
</html>
3、自适应布局
3.1 ui设计图宽度：750px
3.2 前端调试项目宽度：375px
3.3 引入文件flexble.js：动态改变html的font-size
3.4 字体图标
3.4.1 网址：阿里字体图标库
3.4.1.1加入购物车》下载到本地
3.5 rem+flex
总结
以上就是今天关于弹性盒布局的内容。
转载：https://blog.csdn.net/qq_35112578/article/details/127487123
查看评论