请你学习：前端布局3 - flex

news2024/11/14 20:45:19

Flexbox布局也叫Flex布局，弹性盒子布局。它的目标是提供一个更有效地布局、对齐方式，并且能够使父元素在子元素的大小未知或动态变化情况下仍然能够分配好子元素之间的间隙。主要思想是使父元素能够调整子元素的宽度、高度、排列方式，从而更好的适应可用的布局空间。设定为flex布局的元素能够放大子元素使之尽可能填充可用空间，也可以收缩子元素使之不溢出。​

Flex布局更适合小规模的布局，可以简便、完整、响应式的实现各种页面布局。但是，设为Flex布局以后，其子元素的float、clear和vertical-align属性将失效。Flex弹性盒模型的优势在于只需声明布局应该具有的⾏为，⽽不需要给出具体的实现⽅式，浏览器负责完成实际布局，当布局涉及到不定宽度，分布对⻬的场景时，就要优先考虑弹性盒布局。

Flex布局是一个完整的模块，它包括了一套完整的属性。其中采用 Flex 布局的元素，称为 Flex 容器，简称"容器"。它的所有子元素就是容器成员，称为 Flex 项目，简称"项目"。

  • Flex容器（Flex Container）：采用Flex布局的元素，通过给该元素设置display属性的值为flex或inline-flex，来定义一个Flex容器。flex值表示该容器是一个块级元素，而inline-flex值表示该容器是一个行内元素。
  • Flex项目（Flex Items）：Flex容器的所有子元素自动成为Flex项目。这意味着，在Flex布局中，你直接对容器的子元素进行布局、对齐和分配空间，而不是传统布局中可能需要的嵌套块级元素或行内元素。

在这里插入图片描述
在Flex布局中，确实存在两个主要的轴：主轴（main axis）和交叉轴（cross axis），但它们的方向并不总是水平轴和垂直轴，这取决于flex-direction属性的设置。

  • 主轴（Main Axis）：这是Flex容器的主方向轴，Flex项目将沿着这条轴进行排列和尺寸调整。默认情况下，如果flex-direction的值为row（默认值），那么主轴就是水平轴，从左到右排列项目。但是，如果flex-direction被设置为column，那么主轴就变成垂直轴，从上到下排列项目。

  • 交叉轴（Cross Axis）：这是与主轴垂直的轴，Flex项目在交叉轴上的尺寸和对齐方式由交叉轴相关的属性控制（如align-items和align-self）。如果主轴是水平轴，那么交叉轴就是垂直轴；如果主轴是垂直轴，那么交叉轴就是水平轴。

因此，说“项目默认沿主轴排列（水平轴）”并不完全准确，因为主轴的方向可以是水平的也可以是垂直的，这取决于flex-direction的设置。默认情况下，由于flex-direction是row，所以主轴是水平的，项目沿水平轴从左到右排列。但是，一旦改变了flex-direction的值，主轴的方向和项目的排列方向也会相应改变。
在这里插入图片描述

  • 主轴（Main Axis）
    • 定义：Flex父元素的主轴是子元素布局的主要方向轴。这个方向决定了Flex项目（子元素）如何排列。
    • 确定方向：主轴的方向由flex-direction属性确定。默认值为row，表示主轴是水平方向，从左到右排列项目。如果flex-direction被设置为column，则主轴变为垂直方向，从上到下排列项目。
    • 主尺寸（Main Size）：Flex项目在主轴上占据的空间大小称为主尺寸。这通常与项目的宽度（对于水平主轴）或高度（对于垂直主轴）相关。
  • 主轴的开始与结束（Main-start & Main-end）
    • 定义：main-start和main-end分别表示主轴的开始和结束位置。Flex项目将沿着主轴从main-start到main-end进行排列。
    • 位置关系：对于水平主轴（flex-direction: row），main-start通常位于容器的左侧，main-end位于右侧。对于垂直主轴（flex-direction: column），main-start位于容器的顶部，main-end位于底部。
  • 交叉轴（Cross Axis）
    • 定义：交叉轴是垂直于主轴的轴。它的方向由主轴的方向决定。
    • 作用：交叉轴主要用于控制Flex项目在主轴方向之外的对齐和尺寸。
  • 交叉轴的开始与结束（Cross-start & Cross-end）
    • 定义：cross-start和cross-end分别表示交叉轴的开始和结束位置。Flex项目在交叉轴上的排列虽然不如主轴上那么直接，但这些位置仍然对项目的对齐和尺寸有重要影响。
    • 位置关系：对于水平主轴（flex-direction: row），交叉轴是垂直的，cross-start位于容器的顶部，cross-end位于底部。对于垂直主轴（flex-direction: column），交叉轴是水平的，cross-start位于容器的左侧，cross-end位于右侧。
  • 交叉尺寸（Cross Size）
    • 定义：交叉尺寸是指Flex项目在交叉轴方向上占据的空间大小。
    • 影响因素：交叉尺寸的大小可能受到Flex项目自身的尺寸属性（如width、height）、Flex容器的对齐属性（如align-items）、以及Flex项目的align-self属性等因素的影响。

1 在使用Flex布局时，首先需要给父元素（即容器）指定为Flex布局

给父元素指定为Flex布局通常是通过设置该元素的display属性为flex（表示块级Flex容器）或inline-flex（表示行内Flex容器）来实现的。默认情况下，如果不特别指定，display: flex; 会被设置为块级Flex容器。

<div class="container"></div>
.container {
    display: flex | inline-flex;
}

如果我们使用块状元素，比如div标签，就可以使用flex，如果使用行内元素，就可以使用inline-flex。多数情况下，我们会使用display: flex;

父元素（容器）可以设置以下六个属性：

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

flex-direction 属性用于定义 Flex 容器中项目的排列方向，它决定了主轴的方向。这个属性有四个可能的值，每个值都对应着不同的排列方式：

  1. flex-direction: row;：

    • 这是默认值。
    • Flex 项目将沿着水平主轴从左到右排列。
    • 主轴的起点位于容器的左边缘。
    • 交叉轴是垂直的。
      在这里插入图片描述

  2. flex-direction: row-reverse;：

    • Flex 项目将沿着水平主轴从右到左排列。
    • 主轴的起点位于容器的右边缘。
    • 交叉轴仍然是垂直的，与row方向相反。
      在这里插入图片描述

  3. flex-direction: column;：

    • Flex 项目将沿着垂直主轴从上到下排列。
    • 主轴的起点位于容器的上边缘。
    • 交叉轴现在是水平的。
      在这里插入图片描述

  4. flex-direction: column-reverse;：

    • Flex 项目将沿着垂直主轴从下到上排列。
    • 主轴的起点位于容器的下边缘。
    • 交叉轴是水平的，与column方向相反。
      在这里插入图片描述

    通过调整 flex-direction 的值，您可以灵活地控制 Flex 容器内部项目的排列方式，以适应不同的布局需求。这个属性是 Flex 布局中非常基础和重要的一个属性，因为它直接决定了项目的排列方向和主轴的方向。

flex-wrap 属性用于指定 Flex 容器中的项目是否可以在必要时换行到下一行。这个属性有三个值，每个值都定义了不同的换行行为：

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

  1. flex-wrap: nowrap;：

    • 这是默认值。

    • Flex 项目将在一行内显示，不会换行。

    • 如果容器的宽度不足以容纳所有项目，则项目会根据 flex-shrink 属性的值缩小，以尝试适应容器宽度。
      在这里插入图片描述
      在这里插入图片描述

    • 如果项目无法进一步缩小以适应容器，或者容器设置了固定的宽度，则项目可能会溢出容器。
      min-width:
      在这里插入图片描述
      在这里插入图片描述

  2. flex-wrap: wrap;：

    • Flex 项目将在必要时换行到下一行。
    • 换行后的第一行将位于容器的顶部（即主轴的起点方向）。
    • 如果有足够的空间，后续的行将堆叠在上一行的下方。
    • 这允许容器根据项目的数量和尺寸自动调整高度（对于水平主轴）或宽度（对于垂直主轴）。
      在这里插入图片描述

  3. flex-wrap: wrap-reverse;：

    • Flex 项目同样会在必要时换行，但与 wrap 不同的是，第一行将位于容器的底部（或主轴的结束方向）。
    • 这意味着换行后的行将堆叠在容器的底部，并且向上堆叠（对于水平主轴）或向左堆叠（对于垂直主轴）。
    • 这允许实现一些特殊的布局效果，如底部对齐的卡片列表或垂直堆叠的列。
      在这里插入图片描述

    通过调整 flex-wrap 的值，您可以控制 Flex 容器内项目的换行行为，从而创建更加灵活和适应性强的布局。

justify-content 属性用于定义 Flex 容器中的项目在主轴上的对齐方式。这个属性有五个值，每个值都提供了不同的对齐方式，这里以水平方向为主轴（即 flex-direction: row;）进行说明：

.container {
    align-items: flex-start | flex-end | center | baseline | stretch;
}

  1. justify-content: flex-start;：

    • 默认值。
    • 项目在主轴上向一端的对齐，具体来说是左对齐（如果主轴是水平的）。
    • 项目之间的间隔是它们各自占用的空间。
      在这里插入图片描述

  2. justify-content: flex-end;：

    • 项目在主轴上向另一端的对齐，具体来说是右对齐（如果主轴是水平的）。
    • 类似于 flex-start，但项目是在主轴的另一端对齐。
      在这里插入图片描述

  3. justify-content: center;：

    • 项目在主轴上居中对齐。
    • 如果容器有足够的空间，项目将均匀分布在主轴的中间位置。
      在这里插入图片描述

  4. justify-content: space-between;：

    • 项目之间的间隔相等，且项目在主轴的两端对齐。
    • 第一个项目与容器的开始边界贴合，最后一个项目与容器的结束边界贴合，剩余的空间在其余项目之间平均分配。
      在这里插入图片描述

  5. justify-content: space-around;：

    • 每个项目两侧的间隔相等。
    • 因此，项目之间的间隔比项目与容器边界的间隔大一倍。
    • 这导致第一个项目前的空间和最后一个项目后的空间是项目之间间隔的一半。
      在这里插入图片描述

align-items 属性定义了 Flex 容器中的项目在交叉轴上的对齐方式。当容器的 flex-direction 设置为 row 时，交叉轴是垂直的（即垂直于主轴）。以下是 align-items 属性的五个可能值及其效果：

  1. align-items: flex-start;

    • 项目在交叉轴的起点对齐（顶部或左边，取决于主轴的方向，但在这里我们假设主轴是水平的，所以是顶部）。
    • 如果容器的高度设置为 100px，而项目的高度分别为 20px、40px、60px、80px、100px，则所有项目的顶部都会对齐在容器的顶部，且项目之间不会有额外的垂直间隔（除非有额外的CSS规则或Flex容器的其他属性导致间隔）。
      在这里插入图片描述

  2. align-items: flex-end;

    • 项目在交叉轴的终点对齐（底部或右边）。
    • 同样地，如果容器的高度为 100px，而项目的高度各异，则所有项目的底部都会对齐在容器的底部，导致较短的项目在顶部有额外的空间。
      在这里插入图片描述

  3. align-items: center;

    • 项目在交叉轴的中点对齐。
    • 如果容器的高度为 100px，无论项目的高度如何，它们都会以容器的中心点为基准垂直居中对齐。
      在这里插入图片描述

  4. align-items: baseline;

    • 项目的基线对齐。这通常意味着文本的基线将对齐，但如果项目中有不同的对齐方式（例如，有些项目包含文本，有些则不包含），则效果可能不如预期。
    • 注意，baseline 对齐并不总是意味着所有项目的底部都会在同一水平线上，而是依赖于项目的具体内容和对齐方式。
      在这里插入图片描述

  5. align-items: stretch;（默认值）

    • 如果项目未设置高度或高度设置为 auto，则项目将被拉伸以填充整个容器的交叉轴长度。
      在这里插入图片描述

    • 如果容器的高度为 100px，且所有项目都没有设置高度或高度设置为 auto，则所有项目都将被拉伸到 100px 高。但是，如果项目设置了最小高度（min-height）或最大高度（max-height），则这些值可能会限制拉伸的程度。

未完待续。。。

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

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

相关文章

AI变现之Midjourney头像定制

AI变现之Midjourney头像定制

前言 Midjourney | 头像定制 1.项目介绍 个性化头像在如今的社交媒体时代变得越来越重要。传统头像照片有时显得普通&#xff0c;而AI绘画头像则能为自己的社交账号增加独特性和吸引力。 通过AI绘画工具制作头像&#xff0c;可以获得一个充满创意和个性的头像&#xff0c;让…
阅读更多...
湖南的智榜样网络安全公司开的培训学校参加学习成为网络安全工程师

湖南的智榜样网络安全公司开的培训学校参加学习成为网络安全工程师

学习网络安全可以通过以下步骤进行&#xff1a; 获取基础知识&#xff1a;开始学习网络安全之前&#xff0c;建议先获取一些计算机基础知识&#xff0c;包括计算机网络、操作系统、编程语言等方面的知识。这些基础知识将为你理解和学习网络安全提供必要的背景。 学习网络安全基…
阅读更多...
数据中台即将消亡，数智基建取而代之？

数据中台即将消亡，数智基建取而代之？

数据中台即将消亡&#xff0c;数智基建取而代之&#xff1f; 前言数智基建 前言 在当今数字化浪潮汹涌澎湃的时代&#xff0c;企业的发展如同在浩瀚海洋中航行的巨轮&#xff0c;而数据则是推动这艘巨轮前行的强大动力。然而&#xff0c;如何有效地管理和利用数据&#xff0c;…
阅读更多...
2024年第十四届APMCM亚太地区大学生数学建模竞赛思路

2024年第十四届APMCM亚太地区大学生数学建模竞赛思路

2024年第十四届亚太地区大学生数学建模竞赛(以下简称“竞赛”)是由中国国际科技促进会物联网工作委员会和北京图象图形学学会联合主办的亚太地区大学生学科类竞赛&#xff0c;竞赛由亚太地区大学生数学建模竞赛组委会负责组织&#xff0c;欢迎各高等院校按照竞赛章程及有关规定…
阅读更多...
MySQL：SQL调优的简单实践

MySQL：SQL调优的简单实践

记一次简单的SQL优化实践。 一、初始化数据 1.1 初始化数据-课程表 #课程表 create table Course(c_id int primary key,name varchar(10) );#存储过程&#xff1a;增加课程表100条数据DROP PROCEDURE IF EXISTS insert_Course;DELIMITER $CREATE PROCEDURE insert_Course()…
阅读更多...
[线程]***多线程带来的风险-线程安全问题

[线程]***多线程带来的风险-线程安全问题

文章目录 一. 什么是线程安全二. 线程不安全一个经典的例子三. 对上述例子的理解四. 出现线程不安全的原因1. 线程在操作系统中是随机调度, 抢占式执行的2. 当前代码中, 多个线程同时修改同一变量3. 线程针对变量的修改操作, 不是"原子"的4. 内存可见性问题, 引起线程…
阅读更多...
使用gradle 移除敏感权限

使用gradle 移除敏感权限

前言 最近要上架Google Play 但是因为有个敏感权限很容易被拒。 想着把权限依赖的库去掉就行了&#xff0c;但是遇到一个恶心的问题。就是这个权限在Android Studio的Merged Manifest 视图中没有&#xff0c;但是在生成的apk中却包含。这样的就不能通过Android Studio来定位权…
阅读更多...
一文搞懂 js 原型和原型链

一文搞懂 js 原型和原型链

文章目录 一、前言二、原型2.1 概念2.2 获取原型的方法2.2.1 __proto__获取方式2.2.2 通过构造函数prototype 属性获取2.2.2 ES6 class 通过Object.getPrototypeOf()获取类原型 2.3 通过原型实现继承2.4 原型的作用 三、 原型链四、ES6实现继承五、综述 一、前言 原型和原型链…
阅读更多...
计算机网络面试真题总结（七）

计算机网络面试真题总结（七）

文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ 什么是对称加密、非对称加密&#xff1f; 对称加密是一种常用的加…
阅读更多...
C语言 之 自定义类型：结构体、结构体内存对齐、修改默认对齐参数 详细说明 可以来看看哟

C语言 之 自定义类型：结构体、结构体内存对齐、修改默认对齐参数 详细说明 可以来看看哟

结构体类型的声明 结构体的声明 struct tag {member-list; //结构体中的成员&#xff0c;可以有多个 }variable-list; //这里是直接创建结构体的变量&#xff0c;但是不一定要在这里声明变量 //不能把后面这个 ; 省略了例如结构体用于描述一个学生&#xff1a; struct Stu…
阅读更多...
MySQL内部临时表（Using temporary）案例详解及优化解决方法

MySQL内部临时表（Using temporary）案例详解及优化解决方法

目录 前言 一.场景案例 二、什么是内部临时表&#xff1f; 三、哪些场景会使用内部临时表&#xff1f; 四、内部临时表如何存储&#xff1f; 1&#xff09;使用内存 2&#xff09;先使用内存&#xff0c;再转化成磁盘文件 3&#xff09;直接使用磁盘文件 五、如何优化…
阅读更多...
Stable Diffusion绘画 | ControlNet应用-IP-Adapter：一致性角色就这么简单

Stable Diffusion绘画 | ControlNet应用-IP-Adapter：一致性角色就这么简单

IP-Adapter 更新了全新的模型—FaceID plus V2 版本&#xff0c;同时还支持 SDXL 模型。 FaceID plus V2 版本的优点&#xff1a; 解决任务一致性 一张图生成相似角色 其中&#xff0c;两个 Lora文件 放置在&#xff1a;SD安装目录\models\Lora 两个 bin文件 放置在&#x…
阅读更多...
三、IIC 总线协议——1、IIC总线协议介绍

三、IIC 总线协议——1、IIC总线协议介绍

IIC总线协议介绍 1、IIC介绍&#xff1a; Inter Integrated Circuit&#xff0c;同步、串行、半双工通信总线。 2、IIC总线结构图 ① 由时钟线SCL和数据线SDA组成&#xff0c;并且都接上拉电阻&#xff0c;确保总线空闲状态为高电平。 ②总线支持多设备连接&#xff0c;允许…
阅读更多...
SSM电动车智能充电桩管理系统 项目源码24481

SSM电动车智能充电桩管理系统 项目源码24481

摘 要 随着社会对环保和可持续发展的关注不断增加&#xff0c;电动车作为清洁能源交通工具受到了广泛关注和推广。然而&#xff0c;电动车充电设施的建设和管理面临着诸多挑战&#xff0c;如充电效率低下、管理繁琐等问题。为解决这些问题&#xff0c;本研究设计开发了一款电…
阅读更多...
揭秘无线领夹麦克风五大行业隐秘：音质失真、隐私泄露需警惕！

揭秘无线领夹麦克风五大行业隐秘：音质失真、隐私泄露需警惕！

​无线领夹麦克风是演讲、教学、直播等场合的得力助手&#xff0c;然而市场上品牌众多&#xff0c;产品质量参差不齐&#xff0c;安全隐患层出不穷。作为一名音频设备评测师&#xff0c;我近期入手了多款无线领夹麦克风进行测评&#xff0c;下面就来为大家揭秘无线领夹麦克风行…
阅读更多...
Jupyter Notebook详细教程

Jupyter Notebook详细教程

1、Ipython介绍 介绍 科学计算标准工具集的组成部分 IPython是一个免费、开源的项目&#xff0c;支持Linux、Unix、Mac OS X和Windows平台&#xff0c;其官方网址&#xff1a;Jupyter and the future of IPython — IPython IPython中包括各种组件&#xff0c;其中的两个主要…
阅读更多...
无盘设计及其在Allegro中的具体操作

无盘设计及其在Allegro中的具体操作

无盘设计的好处有两点&#xff1a; 去掉焊环后&#xff0c;增加了孔与线或是其它孔的间距; 去掉焊环后&#xff0c;铜皮避让的面积更少了&#xff0c;增加了铺铜平面的完整性。 一、确定通孔/过孔焊盘支持去除焊环 只有在封装中勾选了Suppress unconnected internal pads; leg…
阅读更多...
AI大模型，互联网的中年革命？人才抢夺白热化，平均工资水平惊呆了……

AI大模型，互联网的中年革命？人才抢夺白热化，平均工资水平惊呆了……

写在前面 在腾讯股东大会上&#xff0c;CEO马化腾深刻指出&#xff0c;人工智能&#xff08;AI&#xff09;并非仅仅是互联网领域十年一遇的机遇&#xff0c;而是一个具有深远影响的、堪比电力发明的工业革命级别的重大机遇。 本文将包括&#xff1a; 1- 行业概览 2- 大模型…
阅读更多...
C++必修：bitset的用法与实现

C++必修：bitset的用法与实现

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;C学习 贝蒂的主页&#xff1a;Betty’s blog 1. 位图的引入 首先我们来看一道面试题&#xff1a; 给40亿个不重复的无符号整数…
阅读更多...
乌龙？揭露2024国自然被刷真相！

乌龙？揭露2024国自然被刷真相！

8月24日&#xff0c;国自然正式放榜&#xff0c;并且申请项目批准资助通知、不予资助通知以及专家评审意见也已发送到各位申请人手里。 中了的人兴奋庆祝&#xff0c;没中的人气愤懊恼&#xff0c;一遍又一遍的看着评审意见&#xff0c;甚至会质疑一些评审的意见有些 “不合理…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023