CSS:弹性布局(display:flex)

道友请了~ 最近小道在修练主修功法《嘉蛙》之余,偶然从一名散修手中得到了一本《CSS秘籍》,刚好近期有自己做微信小程序的打算,这不是瞌睡了给递枕头么。欣喜若狂,翻开第一章,拜读之后受益匪浅。韩老魔说过:好记性不如烂笔头。(韩老魔:我没说过!)遂誊抄一份,分享给各位道友。

@
目录

弹性布局的设计理念是让容器能够根据空间的变化自动调整其子元素的大小和位置,从而在不同屏幕尺寸和设备上创建响应式和适应性强的界面。

Flex 布局的核心概念包括:

  1. 容器 (Flex Container): 当一个元素的 display 属性被设置为 flexinline-flex 时,这个元素就变成了一个 Flex 容器。这将改变其默认的布局行为,使其遵循 Flex 布局规则。
  2. 子项 (Flex Items): Flex 容器的所有直接子元素都自动成为 Flex 子项,它们将根据容器的 Flex 属性进行布局。
  3. 主轴 (Main Axis): 这是 Flex 容器中默认的方向,可以是水平或垂直,取决于 flex-direction 属性的值。Flex 子项沿主轴排列。
  4. 交叉轴 (Cross Axis): 这是与主轴垂直的方向。当 Flex 子项堆叠在主轴上时,交叉轴决定了子项的层叠顺序。

容器的属性

justify-content:控制主轴上的子项对齐方式

css 复制代码
.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

align-items:控制交叉轴上的子项对齐方式。

css 复制代码
.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

flex-direction:定义主轴的方向,即子元素的主要排列方向

  • row(默认值):主轴为水平方向,起点在左端。
  • row-reverse:主轴为水平方向,起点在右端。
  • column:主轴为垂直方向,起点在上沿。
  • column-reverse:主轴为垂直方向,起点在下沿。

flex-wrap:是否换行及换行的方向

css 复制代码
.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
  • nowrap(默认):不换行
  • wrap:换行,第一行在上方
  • wrap-reverse:换行,第一行在下方

align-content:多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用

css 复制代码
.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
  • flex-start:与交叉轴的起点对齐。
  • flex-end:与交叉轴的终点对齐。
  • center:与交叉轴的中点对齐。
  • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
  • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch(默认值):轴线占满整个交叉轴

flex-flow:flex-direction 和 flex-wrap 的简写形式

  • 这是 flex-directionflex-wrap 的简写形式,例如 flex-flow: row wrap;

通过组合使用这些属性,你可以创建出复杂而灵活的布局,适应不同的屏幕尺寸和内容需求。

相关推荐
青皮桔11 小时前
CSS实现百分比水柱图
前端·css
失落的多巴胺11 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
牧杉-惊蛰13 小时前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app
哎呦你好15 小时前
【CSS】Grid 布局基础知识及实例展示
开发语言·前端·css·css3
islandzzzz15 小时前
(第二篇)HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
晴殇i17 小时前
CSS 迎来重大升级:Chrome 137 支持 if () 条件函数,样式逻辑从此更灵活
前端·css·面试
Hilaku17 小时前
2025年,每个前端都应该了解的CSS选择器:`:has()`, `:is()`, `:where()`
前端·css
sunbyte18 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue
旷世奇才李先生18 小时前
CSS 安装使用教程
前端·css
遗憾随她而去.18 小时前
深入理解CSS中的BFC 与IFC , 布局的两大基础概念
前端·css