
进击吧皮卡皮卡皮卡丘
2022/09/26阅读:50主题:凝夜紫
丽丽子和你一起学flex

前言
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相关文档
学习笔记,码字不易,有错误或不足留在评论区🙏,要是各位宝子觉得不错的话,点个赞再走哦😊~

作者介绍
