Flex 布局 - 容器

本文涉及的产品
容器镜像服务 ACR,镜像仓库100个 不限时长
简介: 版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82862174 ...
版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82862174

Flex 是 Flexible Box 的缩写,就是弹性布局,可以为盒子模型提供更大的灵活性
任何一个容器都可以指定为 Flex 布局,其将会成为未来布局的首选方案

更多精彩

概念

  1. 采用 Flex 布局的元素称为 Flex 容器
  2. 容器下的所有子元素自动成为容器成员,成为 Flex 项目
  3. 将元素的 display: flex 即可指定 Flex 容器
  4. 容器默认存在两根轴,水平的主轴和垂直的交叉轴

属性

flex-direction 决定主轴的方向,即项目的排列方向

  • row [default] 主轴在水平方向,起点在左侧
  • row-reverse 主轴在水平方向,起点在右侧
  • column 主轴在垂直方向,起点在顶部
  • column-reverse 主轴在垂直方向,起点在底部

flex-wrap 当一条轴线上无法排列所有子项,规定换行规则

  • nowrap [default] 不换行
  • wrap 换行,第一行在上方
  • wrap-reverse 换行,第一行在下方

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

  • row wrap [default]

justify-content 定义项目在容器主轴上的对齐方式

  • flex-start [default] 左对齐
  • flex-end 右对齐
  • center 居中
  • space-between 两端对齐,每个项目之间的间距相等
  • space-around 每个项目两侧的间隔相等,即项目之间的间隔比项目与容器边框的间隔大一倍

align-items 定义项目在容器交叉轴上的对齐方式

  • stretch [default] 如何项目未设置高度,则每个项目默认占据整个容器高度
  • flex-start 顶部
  • flex-end 底部
  • center 居中
  • baseline 项目第一行文字的基线对齐

align-content 定义多条轴线的对齐方式,若容器只有一条轴线或容器没有多余空间,则不起作用

  • stretch [default] 项目占满整个交叉轴
  • flex-start 与交叉轴的顶部对齐
  • flex-end 与交叉轴的底部对齐
  • center 与交叉轴的中部对齐
  • space-between 与交叉轴的两端对齐,轴线之间的间隔平均分布
  • space-around 每条轴线两端的间隔相等,即轴线之间的间隔比轴线与边框的间隔要大一倍
目录
相关文章
|
3月前
|
设计模式 容器
13.HarmonyOS流式卡片列表实现指南:Flex多行布局详解
在现代移动应用开发中,流式卡片列表是一种常见且实用的UI设计模式。它能够自适应屏幕宽度,在有限空间内高效展示多个内容项。本教程将详细讲解如何使用HarmonyOS的ArkUI框架中的Flex组件实现一个灵活的流式卡片列表,重点关注多行布局与对齐策略的应用。
94 2
|
3月前
|
开发者 UED 容器
07.精通HarmonyOS Flex对齐:从基础到高级布局技巧(上)
在HarmonyOS Next的ArkUI框架中,Flex容器提供了强大而灵活的对齐系统,使开发者能够精确控制子元素在容器中的排列方式。掌握这些对齐技术,是构建专业级用户界面的关键。
117 0
|
3月前
|
UED 容器
5.HarmonyOS Next开发宝典:掌握Flex布局的艺术
Flex布局(弹性布局)是HarmonyOS Next中最强大的布局方式之一,它提供了一种更加高效、灵活的方式来对容器中的子元素进行排列、对齐和分配空间。无论是简单的居中显示,还是复杂的自适应界面,Flex布局都能轻松应对。
139 0
|
6月前
|
前端开发 API 开发者
harmonyOS基础- 快速弄懂HarmonyOS ArkTs基础组件、布局容器(前端视角篇)
本文由黑臂麒麟(6年前端经验)撰写,介绍ArkTS开发中的常用基础组件与布局组件。基础组件包括Text、Image、Button等,支持样式设置如字体颜色、大小和加粗等,并可通过Resource资源引用统一管理样式。布局组件涵盖Column、Row、List、Grid和Tabs等,支持灵活的主轴与交叉轴对齐方式、分割线设置及滚动事件监听。同时,Tabs组件可实现自定义样式与页签切换功能。内容结合代码示例,适合初学者快速上手ArkTS开发。参考华为开发者联盟官网基础课程。
460 75
harmonyOS基础- 快速弄懂HarmonyOS ArkTs基础组件、布局容器(前端视角篇)
|
3月前
|
UED 容器
10.HarmonyOS Next布局进阶:嵌套Flex容器与空间分配策略
在HarmonyOS Next的ArkUI框架中,Flex布局是构建用户界面的核心技术之一。通过嵌套使用Flex容器,我们可以创建复杂而灵活的界面结构,满足各种应用场景的需求。本教程将深入探讨如何在HarmonyOS Next中使用嵌套Flex容器实现复杂布局,以及如何合理分配和控制空间。
103 0
|
6月前
|
开发者 容器
鸿蒙开发:弹性布局Flex
在实际的开发中,需要掌握主轴与交叉轴的关系、换行规则及子元素属性,同时注意性能与兼容性问题,还有一点,Flex组件在渲染时存在二次布局过程,因此在对性能有严格要求的场景下建议使用Column、Row代替。
171 10
鸿蒙开发:弹性布局Flex
|
10月前
|
容器
Bootstrap5 Flex(弹性)布局4
排序:.order 类可设置弹性子元素的排序,范围从 .order-1 至 .order-12,数字越小优先级越高。外边距:.ms-auto 和 .me-auto 分别用于设置子元素的右侧和左侧外边距为 auto。包裹:.flex-nowrap(默认)、.flex-wrap 和 .flex-wrap-reverse 用于控制弹性容器中的子元素是否换行及换行方向。
|
10月前
Bootstrap5 Flex(弹性)布局2
介绍Flex布局的水平和垂直方向控制。`.flex-row`使子元素水平排列,默认左对齐;`.flex-row-reverse`则右对齐。`.flex-column`让子元素垂直排列;`.flex-column-reverse`则反向排列。示例展示了不同类的效果,通过改变类名实现布局调整。
|
9月前
|
容器
Bootstrap5 Flex(弹性)布局6
使用 `.align-self-*` 类可控制指定子元素的对齐方式,包括 `.align-self-start`, `.align-self-end`, `.align-self-center`, `.align-self-baseline`, 和 `.align-self-stretch`。示例代码展示了如何在一个弹性布局中应用这些类,以实现不同设备上的响应式设计。
Bootstrap5 Flex(弹性)布局5
使用 .align-content-* 控制多行子元素在垂直方向上的堆叠方式,如 .align-content-start、.align-content-center 等。对于单行子元素,使用 .align-items-* 控制对齐,例如 .align-items-start、.align-items-center 等。示例代码展示了不同对齐效果的应用。