flex讲解

随着前端技术的不断发展和更新，flex布局成为前端布局的主流。但是仍然有很多前端新手搞不懂flex到底怎么用！！！今天我们就来好好讲讲flex布局

老规矩先上定义

什么是flex布局

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

Flex 是 Flexible Box 的缩写，意为"弹性布局",Flex是CSS3新增的一种布局方式，它可以让容器的子元素在任何设备上都能够以相同的方式排列、对齐和分配空间，从而实现响应式布局。用来为盒状模型提供最大的灵活性。指定容器 display: flex 即可。 简单的分为容器属性和元素属性。

flex布局的优点

  • 灵活性强：Flex布局可以根据不同的场景进行灵活的排列和对齐，如垂直居中、水平分布、两端对齐、固定宽度等。
  • 布局自适应：Flex布局可以根据容器大小和子元素数量自适应布局，无需手动调整样式，减少代码复杂度。
  • 兼容性好:Flex布局可以实现响应式布局，使得页面在不同设备上都可以以一致的方式进行排列和布局。
  • 可读性好：Flex布局的代码结构清晰，易于阅读和维护，使得开发效率得到提高。
  • 与传统布局兼容：Flex布局可以与传统的布局方式相结合，形成更加灵活的布局方案。
  • 简单易学：Flex布局的概念和属性相对简单，易于掌握和理解，即使是初学者也可以快速上手。

flex前置概念

容器（Flex Container）

容器是一个包含Flex子元素的父元素，通过设置display属性为flex或inline-flex，可以将其定义为一个Flex容器。容器内的子元素将按照Flex布局的规则进行排列和布局。

轴（Axis）

Flex布局主要涉及两个轴，即主轴和交叉轴。主轴是Flex容器的主要方向，子元素会沿着这个方向排列；交叉轴则与主轴垂直。

子元素（Flex Item）

子元素是Flex容器中的直接子元素，它们根据容器的排列方式进行排列和布局。

主轴对齐方式（Main Axis Alignment）

主轴对齐方式指的是子元素沿着主轴方向的对齐方式，常见的主轴对齐方式有：flex-start（起点对齐）、flex-end（终点对齐）、center（居中对齐）、space-between（两端对齐，子元素之间平均分配空间）、space-around（子元素两侧都留有空白，子元素之间也平均分配空间）等。

交叉轴对齐方式（Cross Axis Alignment）

交叉轴对齐方式指的是子元素沿着交叉轴方向的对齐方式，常见的交叉轴对齐方式有：stretch（拉伸对齐，子元素在交叉轴方向上拉伸到与容器相同的高度或宽度）、flex-start（起点对齐）、flex-end（终点对齐）、center（居中对齐）等。

flex属性

flex属性是Flex布局中的一个关键属性，用于设置子元素的伸缩性和空间占用比例。它包含了三个子属性：flex-grow（指定子元素在剩余空间中的占比）、flex-shrink（指定子元素在空间不足时的缩放比例）、flex-basis（指定子元素的基准大小）。flex属性可以同时设置这三个子属性的值，也可以只设置其中的一个或两个。

image.png

在 flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)，这是默认的设置，当然你也可以通过修改使垂直方向变为主轴，水平方向变为交叉轴，主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end。交叉轴的开始位置叫做cross start，结束位置叫做cross end。
在容器中的每个单元块被称之为 flex item，项目默认沿主轴排列，每个项目占据的主轴空间为 (main size), 占据的交叉轴的空间为 (cross size)。

注意：
这里需要强调，不能先入为主认为宽度就是 main size，高度就是 cross size，这个还要取决于你主轴的方向，如果你垂直方向是主轴，那么项目的高度就是 main size。

首先，实现 flex 布局需要先指定一个容器，任何一个容器都可以被指定为 flex 布局，这样容器内部的元素就可以使用 flex 来进行布局。

.div {display: flex | inline-flex;       //可以有两种写法
}

如果你使用块元素如 div，你就可以使用 flex，而如果你使用行内元素，你可以使用 inline-flex。

需要注意的是：当时设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效

flex的属性

flex-direction：

决定主轴的方向（即我们设置了disp:flex后div的子 item 元素的排列方法）

.div {flex-direction: row(默认) | row-reverse | column | column-reverse;
}
  • row（默认值）：主轴为水平方向，起点在左端。
  • row-reverse：主轴为水平方向，起点在右端。
  • column：主轴为垂直方向，起点在上沿。
  • column-reverse：主轴为垂直方向，起点在下沿。

image.png

flex-wrap

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

.div {flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap（默认）：不换行

image.png

wrap：换行，第一行在上方。

image.png

wrap-reverse：换行，第一行在下方

image.png

flex-flow

flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.div {flex-flow: <flex-direction> <flex-wrap>;
}

justify-content

水平主轴对齐方式

.div {justify-content: flex-start | flex-end | center | space-between | space-around;
}
  • flex-start（默认值）：左对齐
  • flex-end：右对齐
  • center： 居中
  • space-between：两端对齐，项目之间的间隔都相等。
  • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

image.png

align-items

定义竖直轴线方向的对齐方式

.div {align-items: flex-start | flex-end | center | baseline | stretch;
}
  • flex-start 从上到下。
  • flex-end：从下到上。
  • center：垂直居中。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

image.png

align-content

属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.div {align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
  • flex-start：从上到下。
  • flex-end：从下到上。
  • center：垂直居中。
  • space-between：两端对齐，轴线之间的间隔平均分布。
  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch（默认值）：轴线占满整个交叉轴。

image.png

order

属性定义项目的排列顺序，根据order的值来排序，顺序越小，排列越靠前，默认为 0

.item {order: <integer（整数）>;
}

image.png

flex-grow

属性定义项目的放大比例，默认为0 ，即使存在空间，也不会放大

.item {flex-grow: <number>; /* default 0 */
}

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
image.png

flex-shrink

属性定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果 定义个 item 的 flow-shrink 为 0，则为不缩小

.item {flex-shrink: <number>; /* default 1 */
}

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小
注意: 负值对该属性无效。
image.png

flex-basis

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间

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

flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

写法一：

.item {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

写法二：


/* 当我们只填写一个值时，无单位数字，会默认为flex-grow属性值 */
flex: 2;/* 当我们只填写一个值， 带单位数字，会默认为flex-basis属性值 */
flex: 10em;
flex: 30px;
flex: min-content;/* 当我们填写两个值时第一个不带单位数字第二个带单位数字：会默认为flex-grow | flex-basis属性值 */
flex: 1 30px;/* 当我们填写两个值时第一个带单位数字第二个不带单位数字：会默认为flex-grow | flex-shrink属性值 */
flex: 2 2;/* 当我们填写三个值时：会默认为flex-grow | flex-shrink | flex-basis 属性值*/
flex: 2 2 10%;/*全局属性值 */
flex: inherit;
flex: initial;
flex: unset;

align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

image.png

align-items

默认属 性为 auto，表示继承父元素的 align-items 比如说，用 flex 实现圣杯布局

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

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

相关文章

郑州高校大学智能制造实验室数字孪生可视化系统平台建设项目验收

郑州高校大学智能制造实验室数字孪生可视化系统平台建设项目验收

随着制造业的转型升级&#xff0c;智能化、信息化已成为制造业发展的必然趋势。数字孪生技术作为智能制造领域的关键技术之一&#xff0c;它通过构建与实体系统相对应的虚拟模型&#xff0c;实现对实体系统的实时监测、预测和优化&#xff0c;为制造业的智能化、信息化提供了强…
阅读更多...
LitelDE安装---附带每一步截图以及测试

LitelDE安装---附带每一步截图以及测试

LiteIDE LiteIDE 是一款专为Go语言开发而设计的开源、跨平台、轻量级集成开发环境&#xff08;IDE&#xff09;&#xff0c;基于 Qt 开发&#xff08;一个跨平台的 C 框架&#xff09;&#xff0c;支持 Windows、Linux 和 Mac OS X 平台。LiteIDE 的第一个版本发布于 2011 年 …
阅读更多...
PTA-线性表实验（JAVA）

PTA-线性表实验（JAVA）

题目1&#xff1a;Josephus环的问题及算法 【实验内容】 编程实现如下功能&#xff1a; 题意说明&#xff1a;古代某法官要判决n个犯人的死刑&#xff0c;他有一条荒唐的法律&#xff0c;将犯人站成一个圆圈&#xff0c;从第start个犯人开始数起&#xff0c;每数到第distance的…
阅读更多...
使用Dockerfile构建镜像 使用docker-compose 一键部署IM项目

使用Dockerfile构建镜像 使用docker-compose 一键部署IM项目

本文讲解&#xff1a;使用Dockerfile构建镜像 & 使用docker-compose 一键部署IM项目。 im项目地址&#xff1a;xzll-im &#xff0c;欢迎志同道合的开发者 一起 维护&#xff0c;学习&#xff0c;欢迎star &#x1f604; 1、Dockerfile编写与镜像构建&容器运行 Dockerf…
阅读更多...
Nginx和CDN运用

Nginx和CDN运用

一.Web缓存代理 1.工作机制 代替客户机向网站请求数据&#xff0c;从而可以隐藏用户的真实IP地址。将获得的网页数据&#xff08;静态Web元素&#xff09;保存到缓存中并发送给客户机&#xff0c;以便下次请求相同的数据时快速响应。 2.代理服务器的概念 代理服务器是一个位…
阅读更多...
k8s token加新节点

k8s token加新节点

在 master 节点执行 kubeadm token create --print-join-command得到token和cert&#xff0c;这两个参数在2个小时内可以重复使用&#xff0c;超过以后就得再次生成 kubeadm join apiserver.k8s.com --token mpfjma.4vjjg8flqihor4vt --discovery-token-ca-cert-hash sha…
阅读更多...
【入门】5分钟了解卷积神经网络CNN是什么

【入门】5分钟了解卷积神经网络CNN是什么

本文来自《老饼讲解-BP神经网络》https://www.bbbdata.com/ 目录 一、卷积神经网络的结构1.1.卷积与池化的作用2.2.全连接层的作用 二、卷积神经网络的运算2.1.卷积层的运算2.2.池化的运算2.3.全连接层运算 三、pytorch实现一个CNN例子3.1.模型的搭建3.2.CNN完整训练代码 CNN神…
阅读更多...
【Dison夏令营 Day 04】如何用 Python 编写简单的数字猜谜游戏代码

【Dison夏令营 Day 04】如何用 Python 编写简单的数字猜谜游戏代码

上个周末&#xff0c;我整理了一份可以用 Python 编写的游戏列表。但为什么呢&#xff1f; 如果您是 Python 程序员初学者&#xff0c;编写有趣的游戏可以帮助您更快更好地学习 Python 语言&#xff0c;而不会被语法之类的东西所困扰。我在学习 Python 的时候曾制作过一些这样…
阅读更多...
Hadoop-03-Hadoop集群 免密登录 超详细 3节点公网云 分发脚本 踩坑笔记 SSH免密 服务互通 集群搭建 开启ROOT

Hadoop-03-Hadoop集群 免密登录 超详细 3节点公网云 分发脚本 踩坑笔记 SSH免密 服务互通 集群搭建 开启ROOT

章节内容 上一节完成&#xff1a; HDFS集群XML的配置MapReduce集群XML的配置Yarn集群XML的配置统一权限DNS统一配置 背景介绍 这里是三台公网云服务器&#xff0c;每台 2C4G&#xff0c;搭建一个Hadoop的学习环境&#xff0c;供我学习。 之前已经在 VM 虚拟机上搭建过一次&…
阅读更多...
短视频矩阵系统搭建APP源码开发

短视频矩阵系统搭建APP源码开发

前言 短视频矩阵系统不仅有助于提升品牌影响力和营销效率&#xff0c;还能帮助企业更精准地触达目标受众&#xff0c;增强用户互动&#xff0c;并利用数据分析来持续优化营销策略。 一、短视频矩阵系统是什么&#xff1f; 短视频矩阵系统是一种通过多个短视频平台进行内容创作…
阅读更多...
多多代播24小时值守：电商直播时代是带货爆单的关键

多多代播24小时值守：电商直播时代是带货爆单的关键

在电商直播盛行的今天&#xff0c;直播带货已成为品牌与消费者沟通的关键。然而&#xff0c;流量波动大&#xff0c;竞争激烈&#xff0c;使品牌面临诸多挑战。因此&#xff0c;许多品牌寻求专业代播服务&#xff0c;并特别强调24小时值守的重要性。 流量来源的不稳定性是一个显…
阅读更多...
Linux下安装RocketMQ：从零开始的消息中间件之旅

Linux下安装RocketMQ：从零开始的消息中间件之旅

感谢您阅读本文&#xff0c;欢迎“一键三连”。作者定会不负众望&#xff0c;按时按量创作出更优质的内容。 ❤️ 1. 毕业设计专栏&#xff0c;毕业季咱们不慌&#xff0c;上千款毕业设计等你来选。 RocketMQ是一款分布式消息中间件&#xff0c;具有高吞吐量、低延迟、高可用性…
阅读更多...
本末倒置！做660+880一定要避免出现这3种情况！

本末倒置！做660+880一定要避免出现这3种情况！

每年都有不少人做过660题&#xff0c;但是做过之后&#xff0c;并没有真正理解其中的题目&#xff0c;所以做过之后效果也不好&#xff01;再去做880题&#xff0c;做的也会比较吃力。 那该怎么办呢&#xff0c;不建议你继续做880题&#xff0c;先把660给吃透再说。 接下来给…
阅读更多...
PostgreSQL使用教程

PostgreSQL使用教程

安装 PostgreSQL 您可以从 PostgreSQL 官方网站下载适合您操作系统的安装程序&#xff0c;并按照安装向导进行安装。 启动数据库服务器 安装完成后&#xff0c;根据您的操作系统&#xff0c;通过相应的方式启动数据库服务器。 连接到数据库 可以使用命令行工具&#xff08;如 p…
阅读更多...
Objective-C使用块枚举的细节

Objective-C使用块枚举的细节

对元素类型的要求 在 Objective-C 中&#xff0c;NSArray 只能存储对象类型&#xff0c;而不能直接存储基本类型&#xff08;例如 int&#xff09;。但是&#xff0c;可以将基本类型封装在 NSNumber 等对象中&#xff0c;然后将这些对象存储在 NSArray 中。这样&#xff0c;en…
阅读更多...
Maven编译打包时报“PKIX path building failed”异常

Maven编译打包时报“PKIX path building failed”异常

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 方法11.报错信息2.InstallCert.java3.生成证书文件 jssecacerts4.复制 jssecacerts 文件5. 然后重启Jenkins 或者maven即可 方法21.下载证书2. 导入证书执行keytool…
阅读更多...
7.优化算法之分治-快排归并

7.优化算法之分治-快排归并

0.分治 分而治之 1.颜色分类 75. 颜色分类 - 力扣&#xff08;LeetCode&#xff09; 给定一个包含红色、白色和蓝色、共 n 个元素的数组 nums &#xff0c;原地对它们进行排序&#xff0c;使得相同颜色的元素相邻&#xff0c;并按照红色、白色、蓝色顺序排列。 我们使用整数…
阅读更多...
Elasticsearch (1)：ES基本概念和原理简单介绍

Elasticsearch (1)：ES基本概念和原理简单介绍

Elasticsearch&#xff08;简称 ES&#xff09;是一款基于 Apache Lucene 的分布式搜索和分析引擎。随着业务的发展&#xff0c;系统中的数据量不断增长&#xff0c;传统的关系型数据库在处理大量模糊查询时效率低下。因此&#xff0c;ES 作为一种高效、灵活和可扩展的全文检索…
阅读更多...
springboot系列八: springboot静态资源访问，Rest风格请求处理, 接收参数相关注解

springboot系列八: springboot静态资源访问，Rest风格请求处理, 接收参数相关注解

文章目录 WEB开发-静态资源访问官方文档基本介绍快速入门注意事项和细节 Rest风格请求处理基本介绍应用实例注意事项和细节思考题 接收参数相关注解基本介绍应用实例PathVariableRequestHeaderRequestParamCookieValueRequestBodyRequestAttributeSessionAttribute ⬅️ 上一篇…
阅读更多...
微服务-网关Gateway

微服务-网关Gateway

个人对于网关路由的理解&#xff1a; 网关就相当于是一个项目里面的保安&#xff0c;主要作用就是做一个限制项。&#xff08;zuul和gateway两个不同的网关&#xff09; 在路由中进行配置过滤器 过滤器工厂&#xff1a;对请求或响应进行加工 其中filters&#xff1a;过滤器配置…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023