前言
hello，大家好，我是丽丽子，今天发现了一款有趣的网页小游戏，可以检测大家对于flex布局是否掌握，在挑战它之前不妨和丽丽子开启探索flex之旅吧😁
链接附上，请放心食用👍
(Flexbox Froggy - A game for learning CSS flexbox)
我们都知道布局的传统解决方案是基于盒状模型，依赖 display 属性 + position属性 + float属性,但是它对于一些特殊布局非常不方便。于是W3C 提出了一种新的方案——Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，几乎所有的浏览器都支持 Flex 布局。
开启Flex布局之后你要知道👣
1、在flex眼中，标签不再分类，任何元素都可以直接设置宽高
2、flex布局没有脱标的问题
3、flex布局可以让行内元素设置的宽高生效
4、父元素设置为 flex布局时，子元素(未设置宽高的情况下)宽度由内容撑开，高度变为 100%
给父元素添加display:flex;开启flex布局
其中父盒子叫做flex container弹性容器，子盒子叫做flex items弹性盒子
常见的属性
给父元素设置主轴对齐方式（默认为x轴）
修改主轴对方式的属性是justify-content
| 属性值 | 呈现样式 |
|---|---|
| flex-start | 默认值，起点(左/上)开始依次排列 |
| flex-end | 设置为终点(右/下)开始排列 |
| center | 主轴居中 |
| space-around | 沿主轴均匀排列，空白间距均分在两侧 |
| space-between | 沿主轴均匀排列，空白间距均分在相邻盒子之间 |
| space-evenly | 沿主轴均匀排列，弹性盒子与弹性容器之间间距相等 |
👆 后三个属性值丽丽子有秘诀哦：
- 两侧没缝隙是 space-between
- 缝隙一样大是 space-evenly
- 两倍缝隙是 space-around
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
justify-content: center;
侧轴对齐方式（默认y轴）
修改侧轴对方式的属性是align-items
| 属性值 | 呈现样式 |
|---|---|
| flex-start | 起点(左/上)开始依次排列 |
| flex-end | 设置为终点(右/下)开始排列 |
| center | 主轴居中 |
| stretch | 默认效果，弹性盒子沿着侧轴被拉伸至铺满容器 |
-
align-items：添加给弹性容器-父盒子
-
align-self:则是控制某个弹性盒子的侧轴对齐方式(添加到弹性盒子上-子盒子)
align-items:center（垂直居中）
align-items:flex-start顶部对齐
align-items:flex-end底部对齐
align-items:stretch 拉伸（默认方式，前提是弹性盒子没高度）
align-self:center垂直居中
align-self:flex-end底部对齐
align-self:stretch拉伸（没高度的情况下生效）
伸缩比flex:1,2,3...
- flex：数值(只能是整数)
- 给子盒子添加这个属性
- 表示只占用父盒子的剩余尺寸
- 如果同时设置flex：1和width，则会优先执行flex：1
- 不会自动换行
使用flex实现嵌套盒子水平垂直居中👣
.father {
width: 500px;
height: 500px;
background-color: pink;
/* 设置为flex布局 */
display: flex;
/* 主轴水平居中 */
justify-content: center;
/* 侧轴垂直居中 */
align-items: center;
}
.son {
width: 200px;
height: 200px;
background-color: purple;
}
更改主轴对齐方式
修改主轴方向的属性是flex-direction
主轴默认方向是水平方向(x轴)，侧轴默认方向是垂直方向(y轴方向)
| 属性值 | 呈现样式 |
|---|---|
| row | 行，水平方向(默认值) |
| column | 列，垂直方向 |
| row-reverse | 行，从左往右排列 |
| column-reverse | 列，从下往上排列 |
flex-direction:row-reverse
flex-direction:column-reverse
弹性盒子换行显示
flex-wrap实现弹性盒子换行显示（给父盒子添加）
| 属性值 | 呈现样式 |
|---|---|
| nowrap | 所有元素一行显示 |
| wrap | 元素自动换成多行 |
| wrap-reverse | 元素自动换成逆序的多行 |
⚠️flex-direction和flex-wrap可以缩写成flex-flow，其两个属性值之间用空格隔开
侧轴对齐（多行）
设置多行侧轴对齐方式的属性是align-content
| 属性值 | 呈现样式 |
|---|---|
| flex-start | 多行都集中在顶部 |
| flex-end | 多行都集中在底部 |
| center | 多行居中 |
| space-around | 每行周围保持相等距离 |
| space-between | 行与行之间保持相等距离 |
| stretch | 每行都被拉伸填满容器 |
👍align-content决定行之间的间隔，align-items决定元素整体在容器的什么位置
留在最后
这篇文章就写到这了👣，想要了解更多请移步MDN相关文档
学习笔记，码字不易，有错误或不足请留在评论区🙏，要是各位宝子觉得不错的话，点个赞再走哦😊~
