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 布局后,以下属性将失效
| 序号 | 属性 | 备注 |
| 1 | float | |
| 2 | clear | |
| 3 | vertical-align | 在 Flex 容器中只能用于对齐 Flex 项目中的内联元素或文字 |
| 4 | display:inline-block | |
| 5 | width | 可以在 Flex 项目上设置 |
| 6 | height | 可以在 Flex 项目上设置 |
| 7 | margin: auto | 在 Flex 容器上无法将 Flex 项目水平居中,需要使用justify-content:center实现 |
| 8 | flex-direction: row | 该属性被设置为默认值flex-direction: row,如果需要更改主轴方向,应该使用flex-direction属性 |
| 9 | flex-wrap: nowrap | 该属性被设置为默认值flex-wrap:nowrap,如果需要实现换行或不换行,应该使用flex-wrap属性 |
| 10 | justify-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容器。
| 序号 | 属性 | 属性描述 | 值 | 值描述 |
| 1 | display | 指定容器为Flex布局 | flex | 主轴水平方向排列 |
| inline-flex | 主轴垂直方向排列 | |||
| 2 | flex-direction | 指定主轴的方向 | row | 从左到右 |
| row-reverse | 水平方向(从右到左) | |||
| column | 垂直方向(从上到下) | |||
| column-reverse | 垂直方向(从下到上) | |||
| 3 | justify-content | 指定主轴上的对齐方式 | flex-start | 靠近起点对齐 |
| flex-end | 靠近终点对齐 | |||
| center | 居中对齐 | |||
| space-between | 两端对齐 | |||
| space-around | 间隔对齐 | |||
| 4 | align-items | 指定交叉轴上的对齐方式 | flex-start | 靠近起点对齐 |
| flex-end | 靠近终点对齐 | |||
| center | 居中对齐 | |||
| baseline | 基线对齐 | |||
| stretch | 拉伸对齐 | |||
| 5 | align-content | 指定多根轴线的对齐方式(仅当交叉轴为多根轴线时有效) | flex-start | 多行项目对齐于交叉轴的起始位置 |
| flex-end | 多行项目对齐于交叉轴的结束位置 | |||
| center | 多行项目在交叉轴上居中对齐 | |||
| space-between | 多行项目在交叉轴上平均分布,首尾项目对齐于容器两端,项目之间的距离相等。 | |||
| space-around | 多行项目在交叉轴上平均分布,项目之间的距离相等,首尾项目距离容器两端的距离是其他项目之间距离的一半 | |||
| stretch | 多行项目在交叉轴上拉伸以充满容器的高度。 | |||
| 6 | flex-wrap | 指定元素是否换行 | nowrap | 不换行 |
| wrap | 换行 | |||
| wrap-reverse | 反向换行 | |||
| 7 | flex-flow | 用于同时设置 flex 容器的主轴和交叉轴的方向和排列方式,它是 flex-direction 和 flex-wrap 两个属性的缩写 | row | 主轴为水平方向,起点在左端 |
| row-reverse | 主轴为水平方向,起点在右端 | |||
| column | 主轴为垂直方向,起点在上方 | |||
| column-reverse | 主轴为垂直方向,起点在下方 | |||
| wrap | 换行,第一行在上方 | |||
| wrap-reverse | 换行,第一行在下方 | |||
| nowrap | 不换行,所有元素排在一行上 | |||
| inherit | 从父元素继承值 | |||
| 8 | align-self | 设置单个项目在交叉轴上的对齐方式 | auto | 默认值,元素继承父元素在交叉轴方向上的对齐方式 |
| flex-start | 元素在交叉轴的起点对齐 | |||
| flex-end | 元素在交叉轴的终点对齐 | |||
| center | 元素在交叉轴的中心对齐 | |||
| baseline | 元素在交叉轴上以基线对齐 | |||
| stretch | 将元素在交叉轴上拉伸至撑满整个交叉轴 |
六、Flex项目
Flex项目是Flex容器中的子元素,通过设置该元素的flex属性,即可使其成为一个Flex项目。
| 序号 | 属性 | 属性描述 |
| 1 | justify-content | 控制项目在主轴上的对齐方式 |
| 2 | align-items | 控制项目在交叉轴上的对齐方式 |
| 3 | flex-direction | 控制主轴的方向 |
| 4 | flex-wrap | 控制项目在一行内排列不下时的换行方式 |
| 5 | align-content | 控制多行项目在交叉轴上的对齐方式 |
| 6 | flex-grow | 表示Flex项目在空间分配时的放大比例。 flex-grow的默认值为0,数值越大,空间分配越多。 |
| 7 | flex-shrink | 表示Flex项目在空间不足时的缩小比例。 flex-shrink的默认值为1,数值越大,缩小比例越多,设置为 0 不缩放 。 |
| 8 | flex-basis | 表示Flex项目在空间分配前的初始大小。 flex-basis的默认值为auto,可以设置具体数值或百分比。 |
| 9 | order | 表示Flex项目在容器中的排列顺序。 order的默认值为0,数值越小,排列越靠前。可以使用负数值。 |
| 10 | flex | 是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区别
| display | flex | inline-flex |
| 布局方向不同 | display:flex是主轴水平方向排列 | display:inline-flex是主轴垂直方向排列 |
| 元素占用空间不同 | display:flex元素会占据一行(即父元素宽度) | display:inline-flex元素只占据它所包含内容的空间 |
| 默认属性不同 | display:flex默认属性是flex-direction:row | display:inline-flex默认属性是flex-direction:row-reverse |
| 元素排列方式不同 | display:flex元素默认排列方式为flex-start | display:inline-flex元素默认排列方式为baseline |
参考链接
Flex 布局语法教程 | 菜鸟教程
30 分钟学会 Flex 布局 - 知乎
flex布局(详解)_杰杰坚强的博客-CSDN博客
flex布局详细教程
处理:end value has mixed support, consider using flex-end instead_星月I随心的博客-CSDN博客
相关文章:
css3-flex布局:基础使用 / Flexbox布局
一、理解flex 二、理解Flex布局(又称Flexbox布局) Flex布局(又称Flexbox布局)是一种基于Web的CSS3布局模式,其目的是为了更加灵活和自适应地布置各种各样的网页元素。Flex布局通过将一个父容器分割为一个或多个弹性项…...
MYSQL-习题掌握
文章目录 SQL基本操作1 设计表操作1.1 关系表字段1.2 关系表创建1.3 关系表数据1.4 关系表关系 2 SQL操作2.1 SQL 1-102.2 SQL 11-202.3 SQL 21-302.4 SQL 31-402.5 SQL 41-50 SQL基本操作 1 设计表操作 1.1 关系表字段 1 学生表 student s_ids_names_births_sex学生编号学…...
Python-迭代
1、迭代器 迭代器是一个对象,它可以记录遍历的相关信息,迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束。迭代器有两个基本的方法:iter() 和 next()。我们都过命令行工具,了解一下python的底层迭代…...
【论文阅读】DEPCOMM:用于攻击调查的系统审核日志的图摘要(SP-2022)
Xu Z, Fang P, Liu C, et al. Depcomm: Graph summarization on system audit logs for attack investigation[C]//2022 IEEE Symposium on Security and Privacy (SP). IEEE, 2022: 540-557. 1 摘要 提出了 DEPCOMM,这是一种图摘要方法,通过将大图划…...
大语言模型之一 Attention is all you need ---Transformer
大语言模型已经在很多领域大显身手,其应用包括只能写作、音乐创作、知识问答、聊天、客服、广告文案、论文、新闻、小说创作、润色、会议/文章摘要等等领域。在商业上模型即产品、服务即产品、插件即产品,任何形态的用户可触及的都可以是产品,…...
数字鸿沟,让气候脆弱者更脆弱
随着科技的飞速发展,数字化正在改变我们的生活方式和社会结构。然而,数字鸿沟(Digital Divide)这一长期存在的问题,却在某些方面加剧了社会的不平等现象。在此,我们将探讨数字鸿沟如何加剧了气候脆弱者的脆…...
Tomcat 部署优化
Tomcat Tomcat 开放源代码web应用服务器,是由java代码开发的 tomcat就是处理动态请求和基于java代码的页面开发 可以在html当中写入java代码,tomcat可以解析html页面当中的iava,执行动态请求 动态页面机制有问题:不对tomcat进行优…...
Django框架-使用celery(一):django使用celery的通用配置,不受版本影响
目录 一、依赖包情况 二、项目目录结构 2.1、怎么将django的应用创建到apps包 三、celery的配置 2.1、celery_task/celery.py 2.2、celery_task/async_task.py 2.3、celery_task/scheduler_task.py 2.4、utils/check_task.py 四、apps/user中配置相关处理视图 4.1、基本…...
nvue语法与vue的部分区别
文章目录 1、仅支持flex布局2、字体样式3、高度问题 1、仅支持flex布局 仅支持flex布局。而且默认的是 flex-direction: column; 2、字体样式 字体的样式,必须要写在 text 标签内,才能生效 错误示例: <!-- 错误示例 --> <div cl…...
Java 开发工具 IntelliJ IDEA
1. IntelliJ IDEA 简介 IntelliJ IDEA 是一款出色的 Java 集成开发环境(IDE),提供了丰富的功能和工具,支持多种语言和框架的开发,如 Java、Kotlin、Scala、 Android、Spring、Hibernate 等。IntelliJ IDEA 专注于提高…...
将vsCode 打开的多个文件分行(栏)排列,实现全部显示,便于切换文件
目录 1. 前言 2. 设置VsCode 多文件分行(栏)排列显示 1. 前言 主流编程IDE几乎都有排列切换选择所要查看的文件功能,如下为Visual Studio 2022的该功能界面: 图 1 图 2 当在Visual Studio 2022打开很多文件时,可以按照图1、图2所示找到自…...
java中的同步工具类CountDownLatch
这篇文章主要讲解java中一个比较常用的同步工具类CountDownLatch,不管是在工作还是面试中都比较常见。我们将通过案例来进行讲解分析。 一、定义 CountDownLatch的作用很简单,就是一个或者一组线程在开始执行操作之前,必须要等到其他线程执…...
路由器和交换机的区别
交换机和路由器的区别 交换机实现局域网内点对点通信,路由器实现收集发散,相当于一个猎头实现的中介的功能 路由器属于网络层,可以处理TCP/IP协议,通过IP地址寻址;交换机属于中继层,通过MAC地址寻址(列表)…...
FreeRTOS(动态内存管理)
资料来源于硬件家园:资料汇总 - FreeRTOS实时操作系统课程(多任务管理) 目录 一、动态内存管理介绍 1、heap_1 2、heap_2 3、heap_3 4、heap_4 5、heap_5 二、动态内存总结与应用 1、heap_1 2、heap_4 3、heap_5 三、内存管理编程测试 1、heap_4 2、h…...
IntelliJ IDEA(简称Idea) 基本常用设置及Maven部署---详细介绍
一,Idea是什么? 前言: 众所周知,现在有许多编译工具,如eclipse,pathon, 今天所要学的Idea编译工具 Idea是JetBrains公司开发的一款强大的集成开发环境(IDE),主要用于Java…...
【LeetCode每日一题】——128.最长连续序列
文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【解题思路】八【时间频度】九【代码实现】十【提交结果】 一【题目类别】 哈希表 二【题目难度】 中等 三【题目编号】 128.最长连续序列 四【题目描述】 给定一个未…...
Redis_缓存1_缓存类型
14.redis缓存 14.1简介 穿透型缓存: 缓存与后端数据交互在一起,对服务端的调用隐藏细节。如果从缓存中可以读到数据,就直接返回,如果读不到,就到数据库中去读取,从数据库中读到数据,也是先更…...
模拟 枚举
分享牛客算法基础精选题单题目打卡!!! 目录 字符串的展开 多项式输出 机器翻译 : 铺地毯 : [NOIP2016]回文日期 字符串的展开 原题链接 : 字符串的展开 思路 : 模拟 代码 : #include<iostream> #include<cstring> #include<algorithm> using na…...
【实操】2023年npm组件库的创建发布流程
2022年的实践为基础,2023年我再建一个组件库【ZUI】。步骤回顾: 2022年的npm组件包的发布删除教程_npm i ant-design/pro-components 怎么删除_啥咕啦呛的博客-CSDN博客 1.在gitee上创建一个项目,相信你是会的 2.创建初始化项目,看吧&#…...
缓存设计的典型方案
缓存设计的典型方案 在使用缓存系统的时候,还需要考虑缓存设计的问题,重点在于缓存失效时的处理和如何更新缓存。 缓存失效是在使用缓存时不得不面对的问题。在业务开发中,缓存失效时由于找不到整个数据,一般会出于容错考虑&#…...
web vue 项目 Docker化部署
Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段: 构建阶段(Build Stage):…...
微信小程序之bind和catch
这两个呢,都是绑定事件用的,具体使用有些小区别。 官方文档: 事件冒泡处理不同 bind:绑定的事件会向上冒泡,即触发当前组件的事件后,还会继续触发父组件的相同事件。例如,有一个子视图绑定了b…...
React Native 开发环境搭建(全平台详解)
React Native 开发环境搭建(全平台详解) 在开始使用 React Native 开发移动应用之前,正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南,涵盖 macOS 和 Windows 平台的配置步骤,如何在 Android 和 iOS…...
Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)
目录 1.TCP的连接管理机制(1)三次握手①握手过程②对握手过程的理解 (2)四次挥手(3)握手和挥手的触发(4)状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...
(二)原型模式
原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...
Neo4j 集群管理:原理、技术与最佳实践深度解析
Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...
【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)
🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...
3-11单元格区域边界定位(End属性)学习笔记
返回一个Range 对象,只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意:它移动的位置必须是相连的有内容的单元格…...
rnn判断string中第一次出现a的下标
# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...
云原生玩法三问:构建自定义开发环境
云原生玩法三问:构建自定义开发环境 引言 临时运维一个古董项目,无文档,无环境,无交接人,俗称三无。 运行设备的环境老,本地环境版本高,ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...
