Flex布局和主要属性用法详解(一)

简介: Flex布局和主要属性用法详解

前言

flex布局是继标准流布局浮动布局定位布局后的第四种布局方式。这种方式可以非常优雅的实现子元素居中或均匀分布,甚至可以随着窗口缩放自动适应。flex布局在浏览器中存在一定的兼容性(具体参考:Flex兼容性)。但是在小程序中,是完全兼容flex布局的,并且微信官方也是推荐使用flex布局的。下面就来详细的讲下flex布局。

一个小例子

看以下代码:

<view class='outter'>
  <view class='inner'>1</view>
  <view class='inner'>2</view>
</view>
.outter{
  display: flex;
  justify-content: space-between;
  width: 300px;
  height: 200px;
  background: pink;
}
.outter .inner{
  background: gray;
  width: 100px;
  height: 100px;
}

最后的效果图:

基本概念:

  1. 弹性容器:包含着弹性项目的父元素。通过设置 display 属性的值为 flex 或 inline-flex 来定义弹性容器。
  2. 弹性项目(Flex item):弹性容器的每个子元素都称为弹性项目。弹性容器直接包含的文本将被包覆成匿名弹性项目。也可以称为子容器。
  3. 轴(Axis):每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(cross axis)。
  4. 方向(Direction):可以通过flex-direction来确定主轴和侧轴的方向。

设置在主轴上的排列方式

默认情况下,主轴的方向是从左到右。在主轴方向上,可以通过justify-content属性来设置他们的排列方式。排列方式有以下几种:

  • flex-start:项目靠近父盒子的左侧。默认采用的就是这种排列方式。示例图如下:
  • flex-end:项目靠近父盒子的右侧。
  • center:所有项目会挨在一起在父盒子的中间位置。
  • space-around:项目沿主轴均匀分布,位于首尾两端的子容器到父容器的距离是子容器间距的一半。

  • space-between:项目沿主轴均匀分布,位于首尾两端的子容器与父容器紧紧挨着。
  • space-evenly:项目在主轴上均匀分布,首尾两端的自容器到父容器的距离跟自容器间的间距是一样的

设置在侧轴上的排列方式

默认情况下,侧轴的方向是从上到下。在侧轴方向上,可以通过align-items属性来设置他们的排列方式。排列方式有以下几种:

  • flex-start:起始端对齐。默认就是这种对齐方式。

  • flex-end:末尾段对齐。

  • center:中间对齐。

  • stretch:如果项目没有设置高度。那么子容器沿交叉轴方向的尺寸拉伸至与父容器一致。比如我们将.inner的高度属性去掉,代码如下:
.outter .inner{
 background: gray;
 width: 100px;
 /* height: 100px; */
 border: 1px solid #ccc;
}
  • 效果图为:

  • baseline:基线对齐,这里的 baseline 默认是指首行文字,所有子容器向基线对齐,交叉轴起点到元素基线距离最大的子容器将会与交叉轴起始端相切以确定基线。比如我们把代码改成如下:
<view class='outter'>
 <view class='inner'>
   <view style='margin-top:10px;background:#eee;'>hello</view>
 </view>
 <view class='inner'>2</view>
</view>

然后css文件为:

.outter{
 display: flex;
 align-items: baseline;
 width: 300px;
 height: 200px;
 background: pink;
}
.outter .inner{...}

那么效果图为:

更换主轴和侧轴方向

主轴默认的方向是从左到右,侧轴的方向默认是从上到下,当然也可以进行修改。可以通过flex-direction进行修改。可以修改的参数为以下:

  • row:默认属性。从左到右。

  • row-reverse:从右到左。

  • column:从上到下。

  • column-reverse:从下到上。

换行

默认情况下,元素个数如果超过一定数量,那么在一行当中就排列不下。此时flex默认的处理方式是压缩元素,使其能在一行中排列下来。比如以下代码:

<view class='outter'>
  <view class='inner'>1</view>
  <view class='inner'>2</view>
  <view class='inner'>3</view>
  <view class='inner'>4</view>
</view>
.outter{
  display: flex;
  width: 300px;
  height: 200px;
  background: pink;
}
.outter .inner{
  background: gray;
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
}

那么会把这四个元素挤压在一行中。即使给元素设置了宽度也没有用的。效果图如下:

可以通过flex-wrap来改变排列的方式。可以设置的属性如下:

  1. nowrap:不换行。默认的。


  2. wrap:换行。

  3. wrap-reverse:换行,但是第一行会在下面。



相关实践学习
深入解析Docker容器化技术
Docker是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化,容器是完全使用沙箱机制,相互之间不会有任何接口。Docker是世界领先的软件容器平台。开发人员利用Docker可以消除协作编码时“在我的机器上可正常工作”的问题。运维人员利用Docker可以在隔离容器中并行运行和管理应用,获得更好的计算密度。企业利用Docker可以构建敏捷的软件交付管道,以更快的速度、更高的安全性和可靠的信誉为Linux和Windows Server应用发布新功能。 在本套课程中,我们将全面的讲解Docker技术栈,从环境安装到容器、镜像操作以及生产环境如何部署开发的微服务应用。本课程由黑马程序员提供。 &nbsp; &nbsp; 相关的阿里云产品:容器服务 ACK 容器服务 Kubernetes 版(简称 ACK)提供高性能可伸缩的容器应用管理能力,支持企业级容器化应用的全生命周期管理。整合阿里云虚拟化、存储、网络和安全能力,打造云端最佳容器化应用运行环境。 了解产品详情: https://www.aliyun.com/product/kubernetes
目录
相关文章
|
13天前
|
前端开发 算法 Java
(CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
(CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
54 1
|
13天前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
Flex 布局 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 一、Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
139 0
|
4月前
|
设计模式 容器
13.HarmonyOS流式卡片列表实现指南:Flex多行布局详解
在现代移动应用开发中,流式卡片列表是一种常见且实用的UI设计模式。它能够自适应屏幕宽度,在有限空间内高效展示多个内容项。本教程将详细讲解如何使用HarmonyOS的ArkUI框架中的Flex组件实现一个灵活的流式卡片列表,重点关注多行布局与对齐策略的应用。
116 2
|
4月前
|
开发者 UED 容器
07.精通HarmonyOS Flex对齐:从基础到高级布局技巧(上)
在HarmonyOS Next的ArkUI框架中,Flex容器提供了强大而灵活的对齐系统,使开发者能够精确控制子元素在容器中的排列方式。掌握这些对齐技术,是构建专业级用户界面的关键。
138 0
|
4月前
|
UED 容器
5.HarmonyOS Next开发宝典:掌握Flex布局的艺术
Flex布局(弹性布局)是HarmonyOS Next中最强大的布局方式之一,它提供了一种更加高效、灵活的方式来对容器中的子元素进行排列、对齐和分配空间。无论是简单的居中显示,还是复杂的自适应界面,Flex布局都能轻松应对。
156 0
|
4月前
|
UED 容器
10.HarmonyOS Next布局进阶:嵌套Flex容器与空间分配策略
在HarmonyOS Next的ArkUI框架中,Flex布局是构建用户界面的核心技术之一。通过嵌套使用Flex容器,我们可以创建复杂而灵活的界面结构,满足各种应用场景的需求。本教程将深入探讨如何在HarmonyOS Next中使用嵌套Flex容器实现复杂布局,以及如何合理分配和控制空间。
124 0
|
7月前
|
开发者 容器
鸿蒙开发:弹性布局Flex
在实际的开发中,需要掌握主轴与交叉轴的关系、换行规则及子元素属性,同时注意性能与兼容性问题,还有一点,Flex组件在渲染时存在二次布局过程,因此在对性能有严格要求的场景下建议使用Column、Row代替。
200 10
鸿蒙开发:弹性布局Flex
|
11月前
|
容器
Bootstrap5 Flex(弹性)布局4
排序:.order 类可设置弹性子元素的排序,范围从 .order-1 至 .order-12,数字越小优先级越高。外边距:.ms-auto 和 .me-auto 分别用于设置子元素的右侧和左侧外边距为 auto。包裹:.flex-nowrap(默认)、.flex-wrap 和 .flex-wrap-reverse 用于控制弹性容器中的子元素是否换行及换行方向。
|
10月前
|
容器
Bootstrap5 Flex(弹性)布局6
使用 `.align-self-*` 类可控制指定子元素的对齐方式,包括 `.align-self-start`, `.align-self-end`, `.align-self-center`, `.align-self-baseline`, 和 `.align-self-stretch`。示例代码展示了如何在一个弹性布局中应用这些类,以实现不同设备上的响应式设计。
|
10月前
Bootstrap5 Flex(弹性)布局5
使用 .align-content-* 控制多行子元素在垂直方向上的堆叠方式,如 .align-content-start、.align-content-center 等。对于单行子元素,使用 .align-items-* 控制对齐,例如 .align-items-start、.align-items-center 等。示例代码展示了不同对齐效果的应用。

热门文章

最新文章