提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
前言
提示：这里可以添加本文要记录的大概内容：
本篇博客主要是对flex–伸缩布局的一些记录。
提示：以下是本篇文章正文内容，下面案例可供参考
一、flex
在进行网页布局的时候，我们会遇到这样的情况，两边是固定的，但中间却可以自由伸缩，但不会挤压两边的布局，现在用flex布局就可以很容易的实现。
效果展示：
<style>
div {
width: 100%;
height: 44px;
max-width: 640px;
min-width: 320px;
display: flex;
}
div span {
text-align: center;
line-height: 44px;
color: #fff;
}
div span:nth-child(1),
div span:nth-child(3) {
width: 100px;
background-color: pink;
}
div span:nth-child(2) {
flex: 1;
background-color: blue;
}
</style>
</head>
<body>
<div>
<span>左侧</span>
<span>中间</span>
<span>右侧</span>
</div>
</body>
二、属性
1.1 主轴的方向
语法：flex-direction: ;
默认的主轴是x轴行 row, 具体取决于flex-direction属性的设置
属性值：row，column，row-reverse x轴的反方向排列。
1.2 主轴上的子元素排列方式
语法：justify-content：；
设置主轴上的子元素排列方式。
justify-content: center; /* 居中排列 */
justify-content: start; /* Pack items from the start */
justify-content: end; /* Pack items from the end */
justify-content: flex-start; /* 从行首起始位置开始排列 */
justify-content: flex-end; /* 从行尾位置开始排列 */
justify-content: left; /* Pack items from the left */
justify-content: right; /* Pack items from the right */
justify-content: space-between; /* 均匀排列每个元素
首个元素放置于起点，末尾元素放置于终点 */
justify-content: space-around; /* 均匀排列每个元素
每个元素周围分配相同的空间 */
justify-content: space-evenly; /* 均匀排列每个元素
每个元素之间的间隔相等 */
justify-content: stretch; /* 均匀排列每个元素
'auto'-sized 的元素会被拉伸以适应容器的大小 */
1.3 换行
语法：flex-wrap: ;
指定 flex 元素单行显示还是多行显示 。如果允许换行，这个属性允许你控制行的堆叠方向。
flex-wrap: nowrap; /* Default value */
flex-wrap: wrap;
flex-wrap: wrap-reverse;
1.4 侧轴上的子元素排列方式
语法：align-items: ; 设置侧轴上的子元素排列方式
align-items: center; /* Pack items around the center */
align-items: start; /* Pack items from the start */
align-items: end; /* Pack items from the end */
align-items: flex-start; /* Pack flex items from the start */
align-items: flex-end; /* Pack flex items from the end */
align-items: self-start;
align-items: self-end;
1.5 侧轴上的子元素的排列方式（多行）
语法：align-content: ; 设置侧轴上的子元素的排列方式（多行）
/*align-content不采用左右值 */
align-content: center; /* 将项目放置在中点 */
align-content: start; /* 最先放置项目 */
align-content: end; /* 最后放置项目 */
align-content: flex-start; /* 从起始点开始放置flex元素 */
align-content: flex-end; /* 从终止点开始放置flex元素 */
/* 分布式对齐 */
align-content: space-between; /* 均匀分布项目
第一项与起始点齐平，
最后一项与终止点齐平 */
align-content: space-around; /* 均匀分布项目
项目在两端有一半大小的空间*/
align-content: space-evenly; /* 均匀分布项目
项目周围有相等的空间 */
align-content: stretch; /* 均匀分布项目
拉伸‘自动’-大小的项目以充满容器 */
1.6 简写
语法：flex-flow: column wrap;
1.7总体属性效果展示：
<style>
div {
/* 给父元素添加flex布局 */
display: flex;
width: 600px;
height: 500px;
background-color: pink;
/* 默认的主轴是x轴 行 row 具体取决于属性的设置 */
/* flex-direction: row; */
/* 把主轴变为y轴 */
/* flex-direction: column; */
/* 从右到左 */
/* flex-direction: row-reverse; */
/* 我们可以把主轴设置为y轴，那么x轴就是侧轴 */
/* flex-direction: column; */
/* justify-content：设置主轴上的子元素排列方式 */
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* 让子元素居中对齐 */
justify-content: center;
/* 平分剩余空间 */
/* justify-content: space-around; */
/* 先两边贴边，再分配剩余空间 */
/* justify-content: space-between; */
/* 默认情况下，项目(子元素)都排在一条线（又称”轴线”）上
如果装不开，会缩小子元素
*/
/* 换行 */
/* flex-wrap: wrap; */
/* align-items 设置侧轴上的子元素排列方式 */
/* 即水平居中，又垂直居中 */
/* align-items: center; */
/* 拉伸，但子元素不带高度 */
/* align-items: stretch; */
/* align-content 设置侧轴上的子元素的排列方式（多行）
出现 换行 的情况
*/
/* 因为有换行的情况出现 */
align-content: center;
/* 简写 */
flex-flow: column wrap;
}
div span {
width: 150px;
height: 100px;
color: #fff;
background-color: purple;
margin: 30px;
}
</style>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
</body>
总结
提示：这里对文章进行总结：
这是对flex布局的一点总结，后面继续补充。
788
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
