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;

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

相关推荐
1024小神1 小时前
vscode/cursor编辑器中vue3文件里面的css不能注释解决办法
css·vscode·编辑器
晓风伴月3 小时前
Css:如何解决绝对定位子元素内容被父级元素overflow:hidden属性剪裁
前端·css·overflow裁剪
lb29175 小时前
CSS 3D变换,transform:translateZ()
前端·css·3d
萧寂1735 小时前
html实现手势密码
前端·css·html
qq. 280403398413 小时前
CSS层叠顺序
前端·css
再学一点就睡14 小时前
浏览器页面渲染机制深度解析:从构建 DOM 到 transform 高效渲染的底层逻辑
前端·css
qziovv15 小时前
CSS 父类元素的伪类 选择器
css
工藤孤独1 天前
网页字体终极指南:从选择到优化加载体验
前端·css
Liudef061 天前
deepseek v3 0324实现工作流编辑器
前端·css·编辑器·deepseek
love黄甜心1 天前
CSS3:深度解析与实战应用
前端·css·css3