前言

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相关文档

学习笔记，码字不易，有错误或不足留在评论区🙏，要是各位宝子觉得不错的话，点个赞再走哦😊~