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;

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

相关推荐
@大迁世界19 小时前
用 popover=“hint“ 打造友好的 HTML 提示:一招让界面更“懂人”
开发语言·前端·javascript·css·html
伍哥的传说19 小时前
Tailwind CSS v4 终极指南:体验 Rust 驱动的闪电般性能与现代化 CSS 工作流
前端·css·rust·tailwindcss·tailwind css v4·lightning css·utility-first
拜无忧20 小时前
前端,用SVG 模仿毛笔写字绘画,defs,filter
前端·css·svg
代码小学僧1 天前
🎉 在 Tailwind 中愉快的使用 Antd Design 色彩
前端·css·react.js
ssshooter1 天前
复习 CSS Flex 和 Grid 布局
前端·css·html
菲兹园长1 天前
CSS(展示效果)
前端·javascript·css
UNbuff_01 天前
HTML 中的 CSS 使用说明
css·html·tensorflow
很多石头1 天前
前端img与background-image渲染图片对H5页面性能的影响
前端·css
华仔啊1 天前
关于移动端100vh的坑和终极解决方案,看这一篇就够了!
前端·css
拜无忧2 天前
完美圆角,渐变边框,兼容chrome 60,两层背景的视觉差
前端·css