本文详细介绍了CSS3中的Flex布局，包括flex-grow、flex-shrink、flex-basis属性，以及如何实现水平垂直居中。同时，讨论了align-content、order和align-self的用法，并给出了实例演示。
1.Flex弹性盒子（flex-grow、flex-shrink、flex-basis）
flex-grow：属性规定在相同的容器中，项目相对于其余弹性项目的增长量。
就是否将剩余空间填满，默认值0，不填充。
flex-shrink: 属性固定在相同的容器中，项目相对于其余弹性项目的收缩量。
就是是否压缩，默认值1，被压缩，0，不被压缩
flex-basis:属性规定弹性项目的初始长度。优先级比width高。
设置宽度，有flex-basis的宽度将覆盖width设置的高度，排不下会被压缩。可以使用flex-shrink不被压缩
2.水平垂直居中
要想使用flex给子盒子在父级盒子里水平垂直居中
第一：display: flex;
第二：justify-content: center;
第三：align-items: center;
<style>
*{margin:0;padding:0;}
.box{
width: 600px;
height: 500px;
border:1px solid red;
display: flex;
/* 只能实现块元素的水平居中 不能实现垂直居中 */
margin:0 auto;
/* 主轴是水平方向 让子盒子在水平方向居中 */
justify-content: center;
/* 让子盒子在垂直交叉轴方向居中 */
align-items: center;
}
.item{
width: 300px;
height: 300px;
background: yellow;
}
</style>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
图示：
3.align-content
align-content 定义了多根轴线的对齐方式
属性值 说明
flex-start 与交叉轴的起点对齐
flex-end 与交叉轴的终点对齐
center 与交叉轴的中点对齐
space-between 与交叉轴两端对齐，轴线之间的间隔平均分布
space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch 轴线占满整个交叉轴 ★ 子元素不设置高度或者高度auto（默认值）
注释：之前我们使用align-item时是按照每个轴线换行的，使用这个后，就会出现多条轴线，使其换行时间隔不会大，是一个整体换行。
align是父级盒子里即使换行换到下个轴线，里面每段轴是整体；
justify是多个子盒子在一个轴线排列是两端对齐后对齐定义，每段轴的模块；
content是一整个是一体的，换行换到下个轴线也是一体的；,
item是每段轴的模块；
举例子：
<style>
*{
margin: 0;padding: 0;
}
.box{
margin: 0 auto;
border: 2px solid firebrick;
width: 888px;
height: 777px;
display: flex;
flex-wrap: wrap;
/* content是整体,item是每段轴的模块, align是每段轴的整体，justify是两端对齐 */
/* align-content: flex-start交叉轴起点对齐 */
/* align-content: flex-start; */
/* align-content: flex-end交叉轴重点对其 */
/* align-content: flex-end; */
/* 交叉轴居中 */
/* align-content: center; */
/* align-content: space-around 两端对齐中间子盒子的间隔是两端子盒子间隔的两倍 */
/* align-content: space-around; */
/* align-content: space-between 子盒子两端对齐中间 中间子盒子间隔相等*/
/* align-content: space-between; */
}
.item{
width: 200px;
height: 200px;
background: lightcyan;
font-size: 30px;
margin: 10px;
}
</style>
<body>
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
</div>
</body>
图示：
4.order
order 属性规定弹性项目相对于同一容器内其余弹性项目的顺序。（类似于我们学过定位的叠层一样）
order: 数值是负数就是排在前面，值越小越靠前
正值排在后面，值越小越靠前
5.align-self
align-self 属性指定弹性容器内所选项目的对齐方式。就是项目（子盒子）中允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
注意：在多根轴线（align-content）下设置无效
align-self: auto （默认）| flex-start | flex-end | center | stretch;
6.练习
素材：
<style>
*{margin:0;padding:0;}
body{height: 100vh;}
.box{
display: flex;
/* 给了固定定位 就脱离文档流了 就不能自动撑满一行了 */
position: fixed;
left:0;
bottom:0;
width: 100vw;
}
.box img{
display: block;
flex:1;
height: 55px;
}
</style>
<body>
<div class="box">
<img src="./images/icon-cart.png" alt="">
<img src="./images/icon-catergry.png" alt="">
<img src="./images/icon-find.png" alt="">
<img src="./images/icon-home-active.png" alt="">
<img src="./images/icon-me.png" alt="">
</div>
</body>
每个人都会自己的思路哈！
<style>
*{margin:0;padding:0;}
body{height: 100vh;}
.box{
display: flex;
/* 给了固定定位 就脱离文档流了 就不能自动撑满一行了 */
position: fixed;
left:0;
bottom:0;
width: 100vw;
}
.box img{
display: block;
flex:1;
height: 55px;
}
</style>
<body>
<div class="box">
<img src="./images/icon-cart.png" alt="">
<img src="./images/icon-catergry.png" alt="">
<img src="./images/icon-find.png" alt="">
<img src="./images/icon-home-active.png" alt="">
<img src="./images/icon-me.png" alt="">
图片路径自拟
</div>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
