css3-flex布局:基础使用 / Flexbox布局

一、理解flex

二、理解Flex布局(又称Flexbox布局)

Flex布局(又称Flexbox布局)是一种基于Web的CSS3布局模式,其目的是为了更加灵活和自适应地布置各种各样的网页元素。Flex布局通过将一个父容器分割为一个或多个弹性项目,使得这些项目能够按照一定规则相互排列,并且自动适应它们所处的容器环境。

在Flex布局中,父容器成为“flex container”,子元素成为“flex item”。Flex容器有两个重要的属性:flex-direction和justify-content。flex-direction主要用来决定flex item在主轴上的排列方向,而justify-content则用来对flex item进行主轴方向上的对齐。

除了这些基本属性之外,Flex布局还具有许多其他的属性,例如:align-items、align-content、flex-wrap、order、flex-grow、flex-shrink等。这些属性用来定义flex item在交叉轴和主轴上的排序方式以及它们在父容器中所占的空间大小。

flex布局是一种比较高级的网页排版技术,它能够帮助开发者轻松地实现复杂的网页布局效果,并且具有灵活和响应式的特点。

三、设置了 flex 布局后,以下属性将失效

序号属性备注
1float
2clear
3vertical-align在 Flex 容器中只能用于对齐 Flex 项目中的内联元素或文字
4display:inline-block
5width可以在 Flex 项目上设置
6height可以在 Flex 项目上设置
7margin: auto在 Flex 容器上无法将 Flex 项目水平居中,需要使用justify-content:center实现
8flex-direction: row该属性被设置为默认值flex-direction: row,如果需要更改主轴方向,应该使用flex-direction属性
9flex-wrap: nowrap该属性被设置为默认值flex-wrap:nowrap,如果需要实现换行或不换行,应该使用flex-wrap属性
10justify-content: flex-start该属性被设置为默认值,如果需要更改主轴方向上的对齐方式,应该使用justify-content属性
注意:这并不是绝对的,还取决于具体的属性值和 Flex 项目的结构。有些情况下上述属性仍然可以正常使用

四、Flex布局有以下核心概念

4.1、Flex容器(Flex Container):应用了 Flex 布局的元素,称为 Flex 容器。其作用是定义 Flex 项目所在的容器,使 Flex 项目能够进行弹性布局。

4.2、Flex项目(Flex Item):Flex 容器中的子元素称为 Flex 项目(Flex Item),每个 Flex 项目都具有弹性盒的属性。同时,它们也受到 Flex 容器的限制,如放置的方向、排列顺序等。

4.3、Flex轴(Main Axis):Flex 容器主要的放置方向即为 Flex 轴。在该轴上,Flex 容器中的 Flex 项目会被依次排列。

4.4、Flex交叉轴(Cross Axis):与 Flex 轴垂直的轴称为 Flex 的交叉轴。在该轴上,Flex 项目所占据的空间是有限制的,具体大小由 Flex 容器的属性决定。

4.5、主轴方向属性(justify-content):该属性用于控制 Flex 项目在 Flex 轴上的对齐方式。它可以让 Flex 项目在主轴方向上看起来更加美观,通常被用于实现水平对齐或垂直对齐。

4.6、交叉轴方向属性(align-items):该属性用于控制 Flex 项目在交叉轴上的对齐方式。它可以让 Flex 项目在交叉轴方向上看起来更加美观,通常被用于实现水平对齐或垂直对齐。

4.7、弹性元素属性(flex):该属性用于控制 Flex 项目如何分配 Flex 容器中可用空间。该属性的值决定了 Flex 项目的伸缩性,它能够让 Flex 项目在 Flex 容器中的尺寸发生变化,以适应不同的屏幕尺寸或者容器大小。

五、Flex容器

Flex容器是包含Flex项目的父级元素,通过设置该元素的display属性为flex或inline-flex,即可创建一个Flex容器。

序号属性属性描述值描述
1display指定容器为Flex布局flex主轴水平方向排列
inline-flex主轴垂直方向排列
2flex-direction指定主轴的方向row从左到右
row-reverse水平方向(从右到左)
column垂直方向(从上到下)
column-reverse垂直方向(从下到上)
3justify-content指定主轴上的对齐方式flex-start靠近起点对齐
flex-end靠近终点对齐
center居中对齐
space-between两端对齐
space-around间隔对齐
4align-items指定交叉轴上的对齐方式flex-start靠近起点对齐
flex-end靠近终点对齐
center居中对齐
baseline基线对齐
stretch拉伸对齐
5align-content指定多根轴线的对齐方式(仅当交叉轴为多根轴线时有效)flex-start多行项目对齐于交叉轴的起始位置
flex-end多行项目对齐于交叉轴的结束位置
center多行项目在交叉轴上居中对齐
space-between多行项目在交叉轴上平均分布,首尾项目对齐于容器两端,项目之间的距离相等。
space-around多行项目在交叉轴上平均分布,项目之间的距离相等,首尾项目距离容器两端的距离是其他项目之间距离的一半
stretch多行项目在交叉轴上拉伸以充满容器的高度。
6flex-wrap指定元素是否换行nowrap不换行
wrap换行
wrap-reverse反向换行
7flex-flow用于同时设置 flex 容器的主轴和交叉轴的方向和排列方式,它是 flex-direction 和 flex-wrap 两个属性的缩写row主轴为水平方向,起点在左端
row-reverse主轴为水平方向,起点在右端
column主轴为垂直方向,起点在上方
column-reverse主轴为垂直方向,起点在下方
wrap换行,第一行在上方
wrap-reverse换行,第一行在下方
nowrap不换行,所有元素排在一行上
inherit从父元素继承值
8align-self设置单个项目在交叉轴上的对齐方式auto默认值,元素继承父元素在交叉轴方向上的对齐方式
flex-start元素在交叉轴的起点对齐
flex-end元素在交叉轴的终点对齐
center元素在交叉轴的中心对齐
baseline元素在交叉轴上以基线对齐
stretch将元素在交叉轴上拉伸至撑满整个交叉轴

六、Flex项目

Flex项目是Flex容器中的子元素,通过设置该元素的flex属性,即可使其成为一个Flex项目。

序号属性属性描述
1justify-content控制项目在主轴上的对齐方式
2align-items控制项目在交叉轴上的对齐方式
3flex-direction控制主轴的方向
4flex-wrap控制项目在一行内排列不下时的换行方式
5align-content控制多行项目在交叉轴上的对齐方式
6flex-grow表示Flex项目在空间分配时的放大比例。
flex-grow的默认值为0,数值越大,空间分配越多。
7flex-shrink表示Flex项目在空间不足时的缩小比例。
flex-shrink的默认值为1,数值越大,缩小比例越多,设置为 0 不缩放 。
8flex-basis表示Flex项目在空间分配前的初始大小。
flex-basis的默认值为auto,可以设置具体数值或百分比。
9order表示Flex项目在容器中的排列顺序。
order的默认值为0,数值越小,排列越靠前。可以使用负数值。
10flex是flex-grow, flex-shrink 和flex-basis的缩写,可以一次性设置以上三个属性
是flex-gflex的默认值为0 1 auto。

七、DEMO / vue3.3 + ts

7.1、水平、垂直 居中

 

<template><div class="container"><!-- 水平、垂直 居中 --><div class="flex"><div class="flex_item"></div></div></div>
</template><script setup lang="ts">
</script><style scoped lang="less">
.container{.flex{display: flex;justify-content: center; // 水平居中align-items: center; // 垂直居中width: 200px;height: 200px;background: #ff0000;&_item{width: 50px;height: 50px;background: #b3de1b;}}
}
</style>

7.2、flex-shrink

<template><div class="container"><div class="flex"><div class="flex_item">1</div><div class="flex_item">2</div><div class="flex_item">3</div><div class="flex_item">4</div><div class="flex_item">5</div><div class="flex_item">6</div><div class="flex_item">7</div></div></div>
</template><script setup lang="ts">
</script><style scoped lang="less">
.container{.flex{display: flex;width: 200px;height: 200px;background: #ff0000;&_item{width: 50px;height: 50px;background: #b3de1b;flex-shrink: 0; // 表示Flex项目在空间不足时的缩小比例。flex-shrink的默认值为1,数值越大,缩小比例越多,设置为 0 不缩放 。}}
}
</style>

7.3、flex-wrap: wrap; / 换行

7.4、 align-content: flex-start; / 多行项目对齐于交叉轴的起始位置

 

八、过程记录

8.1、display flex 和 inline-flex区别

displayflexinline-flex
布局方向不同display:flex是主轴水平方向排列display:inline-flex是主轴垂直方向排列
元素占用空间不同display:flex元素会占据一行(即父元素宽度)display:inline-flex元素只占据它所包含内容的空间
默认属性不同display:flex默认属性是flex-direction:rowdisplay:inline-flex默认属性是flex-direction:row-reverse
元素排列方式不同display:flex元素默认排列方式为flex-startdisplay:inline-flex元素默认排列方式为baseline

参考链接

Flex 布局语法教程 | 菜鸟教程

30 分钟学会 Flex 布局 - 知乎

flex布局(详解)_杰杰坚强的博客-CSDN博客

flex布局详细教程

处理:end value has mixed support, consider using flex-end instead_星月I随心的博客-CSDN博客

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

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

相关文章

图解WebSocket

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱写博客的嗯哼&#xff0c;爱好Java的小菜鸟 &#x1f525;如果感觉博主的文章还不错的话&#xff0c;请&#x1f44d;三连支持&#x1f44d;一下博主哦 &#x1f4dd;个人博客&#xff1a;敬请期待 文章目录 前言一、…

Qt 加载 libjpeg 库出现“长跳转已经运行”错误

在我以为升级到 Qt5.15.9 后&#xff0c;运行没有什么问题时&#xff0c;问题就来了 在加载 jpeg 格式的图片时&#xff0c;出现了“长跳转已经运行”的错误 这个错误一般是由 setjmp/longjmp 函数触发的&#xff0c;出现的可能的原因有以下几种&#xff08;听听 chatgpt 的回…

VMware Workstation 如何启用复制粘贴

产品&#xff1a;VMware Workstation 16 Pro 版本&#xff1a;16.1.1 build-17801498 我们刚安装好的 VMware Workstation 会发现无法复制粘贴文件到虚拟机中&#xff0c;如下为解决方案&#xff1a; 1.点击 虚拟机&#xff0c;点击 安装 VMware Tools(T)...。 2.虚拟机下面会…

详细安装配置django

安装配置使用Django。 1&#xff0c;下载安装 django pip install django 2.创建设置项目 先进入要放置项目的文件夹下 2.1&#xff0c; 创建项目 django-admin startproject Api_project 2.2&#xff0c; 创建app命令 cd Api_project dir看一下是否有 manage.py 文件…

2023-08-11 LeetCode每日一题(矩阵对角线元素的和)

2023-08-11每日一题 一、题目编号 1572. 矩阵对角线元素的和二、题目链接 点击跳转到题目位置 三、题目描述 给你一个正方形矩阵 mat&#xff0c;请你返回矩阵对角线元素的和。 请你返回在矩阵主对角线上的元素和副对角线上且不在主对角线上元素的和。 示例 1&#xff1…

企业计算机服务器中了Devos勒索病毒怎么办,勒索病毒解密

社会在发展&#xff0c;科技在进步&#xff0c;企业的生产也得到了很大改善&#xff0c;但是随着网络技术的不断发展&#xff0c;越来越多的企业遭到的网络安全威胁开始增多&#xff0c;其中较为明显的就是勒索病毒攻击。预防勒索病毒攻击成为日常生活中不可或缺的一部分工作。…

SyntaxError: Cannot use import statement outside a module

node环境运行报错&#xff1a; 解决步骤&#xff1a; 1. npm init -y 2. 在 package.json 文件中加入一条&#xff1a;"type": "module", 3. 保存后再执行即可 附&#xff1a;最好是不要在node用import&#xff0c;否则需要上次配置 建议1&#xff1a;用re…

el-table实现静态和动态合并单元格 以及内容显示的问题

实现效果图 <el-tablev-loading"loading":data"tableData"style"width: 100%":row-class-name"tableRowClassName"size"small"><el-table-column fixed label"序号" width"50"><el-tab…

Detecting Twenty-thousand Classes using Image-level Supervision

Detecting Twenty-thousand Classes using Image-level Supervision 摘要背景方法PreliminariesDetic:具有图像类别的检测器loss技术细节扩展Grad-CAMGrad-CAM原理 总结 摘要 摘要 由于检测数据集的规模较小&#xff0c;目前的物体检测器在词汇量方面受到限制。而图像分类器的数…

LeetCode_03Java_1572. 矩阵对角线元素的和

给你一个正方形矩阵 mat&#xff0c;请你返回矩阵对角线元素的和。 请你返回在矩阵主对角线上的元素和副对角线上且不在主对角线上元素的和。 输入&#xff1a;mat [[1,2,3],[4,5,6],[7,8,9]] 输出&#xff1a;25 解释&#xff1a;对角线的和为&#xff1a;1 5 9 3 7 2…

Scratch 之 3D 介绍及教程

第一章 为什么 3D 很难&#xff1f; 1.1 3D 难在何处&#xff1f; 3D 之所以会使我们觉得困难&#xff0c;是因为 Scratch 软件只有两个坐标轴&#xff0c;既&#xff1a;X轴、Y轴。 2维坐标系 而 3D 却拥有三个坐标轴&#xff1a; 3维坐标系 怎么办&#xff1f;很简单&…

Jquery 复选框点击生成标签 源代码

html <!DOCTYPE html> <html><head><meta charset"utf-8"><title>服务资源管理</title><link rel"stylesheet" type"text/css" href"../lib/layui/css/layui.css" /><link rel"st…

【BASH】回顾与知识点梳理(二十一)

【BASH】回顾与知识点梳理 二十一 二十一. Linux 的文件权限与目录配置21.1 使用者与群组属主(文件拥有者)属组(群组概念)其他人的概念root(万能的天神)Linux 用户身份与群组记录的文件 21.2 Linux 文件权限概念Linux 文件属性Linux 文件权限的重要性 21.3 如何改变文件属性与权…

组合模式(C++)

定义 将对象组合成树形结构以表示部分-整体’的层次结构。Composite使得用户对单个对象和组合对象的使用具有一致性(稳定)。 应用场景 在软件在某些情况下&#xff0c;客户代码过多地依赖于对象容器复杂的内部实现结构&#xff0c;对象容器内部实现结构(而非抽象接口)的变化…

Redis数据结构——链表list

链表是一种常用的数据结构&#xff0c;提供了顺序访问的方式&#xff0c;而且高效地增删操作。 Redis中广泛使用了链表&#xff0c;例如&#xff1a;列表的底层实现之一就是链表。 在Redis中&#xff0c;链表分为两部分&#xff1a;链表信息 链表节点。 链表节点用来表示链表…

PyTorch深度学习实践---笔记

PyTorch深度学习实践---笔记 2.线性模型&#xff08;Linear Model&#xff09;2.exercise 3. 梯度下降算法&#xff08;Gradient Descent&#xff09;3.1梯度下降&#xff08;Gradient Descent&#xff09;3.2 随机梯度下降&#xff08;Stochastic Gradient Descent&#xff09…

亚马逊测评工作室怎么做?

亚马逊是全球最大的电商平台之一&#xff0c;任何一个卖家想要提升自己店铺的知名度和销量&#xff0c;都需要关注自己Listing的Review数量和星级评价&#xff0c;而测评对于卖家账号的评定和产品曝光量有着重要影响&#xff0c;可以用于店铺提升销量&#xff0c;留评等 在进行…

c51单片机串口通信(中断方式接收数据)(单片机--单片机通信)示例代码 附proteus图

单片机一般采用中断方式接受数据&#xff0c;这样便于及时处理 #include "reg51.h" #include "myheader.h" #define uchar unsigned char int szc[10]{0xc0,0xf9,0xa4,0xb0,0x99,0x92,0x82,0xf8,0x80,0x90}; int bufferc[6]{0}; int sza[6]{0x01,0x02,0x0…

TEXTure环境配置,跑通inference的demo

TEXTure 环境配置安装kaolin这个包,这里可能会遇到各种问题配置huggingface的访问令牌 运行Text Conditioned Texture Generation指令报错1报错2成功运行 查看结果查看贴图后的三维网格模型 环境配置 # 创建一个名为texture的环境 conda create -n texture python3.9 -y# 激活…

人工智能任务1-【NLP系列】句子嵌入的应用与多模型实现方式

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下人工智能任务1-【NLP系列】句子嵌入的应用与多模型实现方式。句子嵌入是将句子映射到一个固定维度的向量表示形式&#xff0c;它在自然语言处理&#xff08;NLP&#xff09;中有着广泛的应用。通过将句子转化为向量…