进击吧皮卡皮卡皮卡丘

V1

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

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

分类:

前端

标签:

CSS

作者介绍

进击吧皮卡皮卡皮卡丘
V1