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

news2025/10/31 19:44:25

目录

前言

一个小例子

基本概念：

设置在主轴上的排列方式

设置在侧轴上的排列方式

更换主轴和侧轴方向

换行

align-content属性

元素（子容器）的相关属性

flex-basis

flex-grow

flex-shrink属性

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：换行，但是第一行会在下面。
     

align-content属性

在排列中，如果有多行，那么这个属性是设置多行之间的排列方式。可以通过align-content属性来确定排列的方式。可以设置以下值。

  1. flex-start：从上往下排列。示例代码如下：

    .outter{
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 300px;
  height: 300px;
  background: pink;
}

  2. flex-end：末尾段对齐。效果图如下：
     

  3. center：中点对齐。效果图如下：

  4. space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。效果图如下：

  5. space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。效果图如下：

  6. stretch：默认方式，如果没有给元素设置高度，那么会占满整个交叉轴。

    .outter .inner{
background: gray;
width: 100px;
/* height: 100px; */
border: 1px solid #ccc;
box-sizing: border-box;
}

    效果图如下：

元素（子容器）的相关属性

flex-basis

定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间。

.item {
    flex-basis: <length> | auto;
}

默认值：auto，即项目本来的大小, 这时候 item 的宽高取决于 width 或 height 的值。

当主轴为水平方向的时候，当设置了 flex-basis，项目的宽度设置值会失效，flex-basis 需要跟 flex-grow 和 flex-shrink 配合使用才能发挥效果。

当 flex-basis 值为 0 时，是把该项目视为零尺寸的，故即使声明该尺寸为 140px，也并没有什么用。
当 flex-basis 值为 auto 时，则跟根据尺寸的设定值(假如为 100px)，则这 100px 不会纳入剩余空间。

flex-grow

设置元素是否需要扩大的比例。默认值为0，即如果存在剩余空间，也不放大。比如有以下代码：

<view class='outter'>
  <view class='inner inner1'>1</view>
  <view class='inner inner2'>2</view>
</view>

css代码为：

.outter{
  display: flex;
  width: 300px;
  height: 300px;
  flex-wrap: wrap;
  background: pink;
}

.outter .inner{
  background: gray;
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.outter .inner1{
  flex-grow: 2;
}

.outter .inner2{
  flex-grow: 1;
}

效果图为：

 因为两个元素分别占了2份，1份，所以第一个元素是占据了整个容器宽度的2/3，第二个元素占据了整个容器宽度的1/3。
另外，如果设置flex-grow为0，那么他的宽度将会保持为设置的宽度，如果宽度没有设置，那么将根据他的子元素来保留宽度。假如代码为：


  1
  2

css代码为：

.outter .inner1{
  flex-grow: 0;
}

.outter .inner2{
  flex-grow: 1;
}

效果图为：


如果把inner1的width删掉，那么效果图为：

flex-shrink属性

定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。比如有以下代码：


  1
  2
  3
  4

css的代码如下：

.outter{
  display: flex;
  width: 300px;
  height: 300px;
  background: pink;
}

.outter .inner{
  background: gray;
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.outter .inner2{
  flex-shrink: 0;
}

效果图为：

因为给inner2设置了flex-shrink为0，所以即使在空间不够的情况下，他也不会被压缩。

flex属性

flex属性是flex-grow flex-shrink flex-basis三个属性的简写。假设以上三个属性同样取默认值，则 flex的默认值是0 1 auto。

关于flex的取值，有以下几种方式：

  1. auto：等价于1 1 auto。也就是允许增长，允许缩小，宽度为自动。

  2. none：等价于0 0 auto。也就是不允许增长，不允许缩小，宽度为自动。

  3. 非负数字：这个数字表示的是flex-grow的值，flex-shrink为1，表示允许缩小，flex-basis为0%。可以认为他就是把剩余的空间进行填充。比如以下代码是等价的：

      .item {flex: 1;}
  .item {
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 0%;
  }

  4. 0：对应的三个值分别为0 1 0%。比如以下代码是等价的：

    .item {flex: 0;}
.item {
   flex-grow: 0;
   flex-shrink: 1;
   flex-basis: 0%;
}

  5. 长度或者百分比：则这个值视为flex-basis的值，而flex-grow为1，flex-shrink为1。比如以下代码是等价的：

    .item-1 {flex: 0%;}
.item-1 {
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: 0%;
}

.item-2 {flex: 24px;}
.item-2 {
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: 24px;
}

  6. 两个非负数字：分别视为flex-grow和flex-shrink的值，flex-basis取0%，如下是等同的：

    .item {flex: 2 3;}
.item {
   flex-grow: 2;
   flex-shrink: 3;
   flex-basis: 0%;
}

  7. 一个非负数字和一个长度或百分比：则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1，如下是等同的：

    .item {flex: 11 32px;}
.item {
   flex-grow: 11;
   flex-shrink: 1;
   flex-basis: 32px;
}

更多关于flex布局请参考：

  1. CSS 弹性盒子布局 - CSS（层叠样式表） | MDN
  2. 30 分钟学会 Flex 布局 - 知乎

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/185365.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

JDBC-Statement

JDBC-Statement

1.Statement执行静态sql语句&#xff08;“字符串”&#xff09; 返回结果 2.&#xff01;实际工作一般用PreparedStatement来进行sql语句的执行&#xff0c;因为sql注入的风险 3and4.SQl注入就是Statement没有检查我们输入sql语句&#xff0c;一些别有用心的可能写一些危害数据…
阅读更多...
智能手表主控芯片盘点，智能手表GUI，智能手表市场

智能手表主控芯片盘点，智能手表GUI，智能手表市场

聚焦&#xff1a;无线连接芯片&#xff0c;市场&#xff0c;技术 祝大家新年快乐&#xff0c;开工大吉&#xff01;趁寒假简单梳理了下智能手表应用&#xff0c;做个分享&#xff0c;不对的地方欢迎交流指正&#xff1b; 01 市场容量&#xff0c;分类及拓扑 2个数据供参考 一个…
阅读更多...
C++ dll、lib 的定义以及引用，

C++ dll、lib 的定义以及引用，

最近在研究socket&#xff0c;发现socket程序要依赖ws2_32.dll,涉及到动态链接库&#xff0c;有点懵&#xff0c;上网恶补了一下链接库的知识&#xff0c;最后总结出这么一篇文章 链接库分为两种&#xff1a;动态链接库(dll) 和静态链接库(lib) 动态链接库 &#xff1a; 动态链…
阅读更多...
【C++】C++11语法解析

【C++】C++11语法解析

&#x1f308;欢迎来到C专栏~~C11 (꒪ꇴ꒪(꒪ꇴ꒪ )&#x1f423;,我是Scort目前状态&#xff1a;大三非科班啃C中&#x1f30d;博客主页&#xff1a;张小姐的猫~江湖背景快上车&#x1f698;&#xff0c;握好方向盘跟我有一起打天下嘞&#xff01;送给自己的一句鸡汤&#x1f…
阅读更多...
大数据分析案例-基于多元线性回归算法构建用户信用评分模型

大数据分析案例-基于多元线性回归算法构建用户信用评分模型

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…
阅读更多...
ue4c++日记9（指定区域生成角色）

ue4c++日记9（指定区域生成角色）

目录 创建C类 头文件 代码文件 结果 创建C类 头文件 // Fill out your copyright notice in the Description page of Project Settings.#pragma once#include "CoreMinimal.h" #include "GameFramework/Actor.h" #include "ASPawnVolum.generated…
阅读更多...
vSphere with Tanzu概念介绍

vSphere with Tanzu概念介绍

vSphere with Tanzu是在vSphere7.0及之后出现的新功能&#xff0c;它可以在虚拟化层创建一个Kubernetes 控制平面&#xff0c;并将vSphere 集群资源转化为Kubernetes集群资源&#xff0c;这样可以直接在ESXI主机上运行Kubernetes工作负载&#xff0c;创建Kubernetes集群并部署容…
阅读更多...
测试环境频繁Full GC问题的解决思路

测试环境频繁Full GC问题的解决思路

背景 上游调用方&#xff0c;反馈当前welink-front服务不可用&#xff1b; 临时解决办法 手动重启welink-front服务&#xff0c;重启之后观测到业务日志正常刷&#xff0c;说明该问题暂时得到了解决&#xff1b; 但没过多久&#xff0c;上游调用方的同学又找来了&#xff0…
阅读更多...
C++ 继承

C++ 继承

一. 概念 继承(inheritance)机制是面向对象程序设计使代码可以复用的最重要的手段&#xff0c;它允许程序员在保持原有类特性的基础上进行扩展&#xff0c;增加功能&#xff0c;这样产生新的类&#xff0c;称派生类。继承呈现了面向对程序设计的层次结构&#xff0c;体现了由…
阅读更多...
IDEA开发 常用代码规范插件 常用辅助类插件

IDEA开发 常用代码规范插件 常用辅助类插件

规范类 阿里巴巴规范 Alibaba Java Coding Guidelines 插件地址 阿里官方出的开源的代码规范插件 GitHub地址 配合阿里出的规范手册《码出高效 Java开发手册》食用效果更佳 不用购买哈&#xff01;GitHub上开源的 码出高效&#xff1a;Java开发手册下载 静态代码检查 Sonar…
阅读更多...
数学建模学习笔记（14）聚类模型

数学建模学习笔记（14）聚类模型

聚类模型K均值聚类算法和K均值聚类算法系统聚类算法&#xff08;层次聚类&#xff09;DBSCAN聚类算法聚类问题概述&#xff1a;把样本划分为由相似的对象组成的多个类的过程。 K均值聚类算法和K均值聚类算法 K均值聚类算法流程&#xff1a; 指定需要划分的簇的个数K。随机选…
阅读更多...
【Redis | 黑马点评】商户查询缓存

【Redis | 黑马点评】商户查询缓存

文章目录什么是缓存&#xff1f;添加商户缓存缓存更新策略主动更新策略实现商铺查询的缓存与数据库双写一致缓存穿透问题的解决思路编码解决商品查询的缓存穿透问题缓存雪崩问题及解决思路缓存击穿问题及解决思路基于互斥锁的方式解决缓存击穿问题基于逻辑过期的方式解决缓存击…
阅读更多...
初始网络编程

初始网络编程

专栏简介: JavaEE从入门到进阶 题目来源: leetcode,牛客,剑指offer. 创作目标: 记录学习JavaEE学习历程 希望在提升自己的同时,帮助他人,,与大家一起共同进步,互相成长. 学历代表过去,能力代表现在,学习能力代表未来! 目录 1.网络发展史 1.1 独立模式 1.2 网络互联 1.3 局…
阅读更多...
一文全解决 数据库连接报错Communications link failure，create connection SQLException

一文全解决 数据库连接报错Communications link failure，create connection SQLException

具体报错如下&#xff1a; 解决思路&#xff1a; 当时看到数据库报错Communications link failure我就想到应该是数据库连接不上的问题&#xff0c;具体想了以下几种情况 1.数据库未连接 1.1过期了&#xff0c;mysql里有一个wait_timeout的值需要大于数据库连接池的最大超时时…
阅读更多...
新来测试用一手Postman实现UI自动化测试拿下了大厂面试官

新来测试用一手Postman实现UI自动化测试拿下了大厂面试官

看到这篇文章的标题&#xff0c;是不是有小伙伴会感到惊讶呢&#xff1f; Postman不是做接口测试的吗&#xff1f;为什么还能做UI自动化测试呢&#xff1f; 其实&#xff0c;只要你了解Selenium的运行原理&#xff0c;就可以理解为什么Postman也能实现UI自动化测试了。 Sele…
阅读更多...
Lua 错误处理

Lua 错误处理

Lua 错误处理 参考至菜鸟教程。 程序运行中错误处理是必要的&#xff0c;在我们进行文件操作&#xff0c;数据转移及web service 调用过程中都会出现不可预期的错误。如果不注重错误信息的处理&#xff0c;就会造成信息泄露&#xff0c;程序无法运行等情况。 任何程序语言中&am…
阅读更多...
Linux 权限变更操作失误，执行了 chmod -Rf 777 / 如何急救

Linux 权限变更操作失误，执行了 chmod -Rf 777 / 如何急救

昨天手贱&#xff0c;执行命令的时候输错了&#xff0c;结果输入了以下命令&#xff1a; chmod -Rf 777 /可想而知&#xff0c;得到的回报惊人哈哈&#xff0c;我现在之所以还笑的出来&#xff0c;是因为折腾了半天已经修复了这个问题了。 先来复盘一下问题解决的过程吧 错误…
阅读更多...
华为交换机、路由器设备怎样配置console登录密码

华为交换机、路由器设备怎样配置console登录密码

华为交换机路由器设备怎样配置console密码 在对路由器交换机等网络进行管理中&#xff0c;为了安全起见经常需要为设备配置登录密码&#xff0c;尤其是使用串口线直连设备时。 console线路密码认证有两种方式&#xff1a;1&#xff0c;只配置password&#xff08;密码&#x…
阅读更多...
iTOP-RK3568开发板学习笔记（1）编译+烧录系统

iTOP-RK3568开发板学习笔记（1）编译+烧录系统

迅为 RK3568 开发板学习笔记 文章目录准备开发环境复制 Linux SDK编译 Buildroot烧录固件准备开发环境 将 ITOP-RK3568 资料包中的虚拟机开发环境解压到自己的电脑上&#xff0c; 扩展虚拟机系统的硬盘大小&#xff0c;越大越好&#xff08; SDK 太大了&#xff0c;后面有提及…
阅读更多...
【C++】特殊类设计

【C++】特殊类设计

​&#x1f320; 作者&#xff1a;阿亮joy. &#x1f386;专栏&#xff1a;《吃透西嘎嘎》 &#x1f387; 座右铭&#xff1a;每个优秀的人都有一段沉默的时光&#xff0c;那段时光是付出了很多努力却得不到结果的日子&#xff0c;我们把它叫做扎根 目录&#x1f449;设计一个…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023