CSS之flex布局
flex布局
CSS的Flex布局(Flexible Box Layout)是一种用于在页面上布置元素的高效方法,特别适合于响应式设计。Flex布局使得元素能够伸缩以适应可用空间,可以简化很多原本需要复杂CSS和HTML结构才能实现的布局设计。
flex布局包括flex容器和flex项
-
flex容器属性
1.display: flex | inline-flex:启用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 | space-evenly:设置主轴上的对齐方式。
4.align-items: stretch | flex-start | flex-end | center | baseline:设置交叉轴上的对齐方式。
5.align-content: stretch | flex-start | flex-end | center | space-between | space-around:多行Flex项在交叉轴上的对齐方式(单行无效)。
6.flex-wrap: nowrap | wrap | wrap-reverse:设置flex项是否可以换行。
7.flex-flow:flex-direction 和 flex-wrap 的简写。 -
flex项属性
1.flex-grow:定义flex项的放大比例。
2.flex-shrink:定义flex项的缩小比例。
3.flex-basis:定义flex项在分配多余空间之前的默认大小。
4.flex:flex是flex-grow, flex-shrink和flex-basis的简写。
5.align-self:允许单个flex项有与其他项不一样的对齐方式,覆盖align-items。
举个例子
代码示例
<body><div class="flex-container"><div class="flex-item"></div><div class="flex-item"></div><div class="flex-item"></div><div class="flex-item"></div></div></body><style>.flex-container {width: 600px;height: 200px;background-color: aquamarine;display: inline-flex;flex-direction: row;justify-content: space-between;align-items: center;}.flex-item {width: 100px;height: 100px;background-color: lightblue;}</style>
渲染示例:

易混淆属性总结
1.flex-grow
设置 flex 项主尺寸的 flex 增长系数,负值无效,默认为 0。flex-grow 分配剩余空间即 flex 容器的大小减去所有 flex 项的空间;
剩余空间 = 容器空间 - 所有flex项所占空间;
<body><div class="flex-container"><div class="flex-item item1"></div><div class="flex-item item2"></div><div class="flex-item item3"></div><div class="flex-item item4"></div></div></body><style>.flex-container {width: 600px;height: 200px;background-color: aquamarine;display: inline-flex;flex-direction: row;justify-content: space-between;align-items: center;}.flex-item {width: 100px;height: 100px;background-color: lightblue;}.item1 {flex-grow: 1;background-color: lightcoral;}.item2 {background-color: lawngreen;}.item3 {background-color: lightcyan;}.item4 {background-color: lightseagreen;}</style>

同理,有多个元素设置不同的flex-grow数值,则按照比例分配剩余空间。
2. flex-basis
指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话,那么这个属性就决定了 flex 元素的内容盒(content-box)的尺寸。
.flex-item {flex-basis: 50px;height: 100px;background-color: lightblue;}.item1 {flex-basis: max-content;background-color: lightcoral;}.item2 {background-color: lawngreen;}.item3 {background-color: lightcyan;}.item4 {background-color: lightseagreen;}

3. flex-shrink
flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。负值不允许。默认值 1,在默认情况下flex项宽度加一块超出容器时,会等比例缩小。
.flex-item {width: 180px;height: 100px;background-color: lightblue;flex-shrink: 0;}.item1 {flex-shrink: 1;background-color: lightcoral;}.item2 {background-color: lawngreen;}.item3 {background-color: lightcyan;}.item4 {background-color: lightseagreen;}

box1宽度 = 600 - 180 * 3 = 60;同理,有多个元素设置不同的flex-shrink数值,则按照比例分配空间。
4. flex:1 | 0 | auto | none
flex属性是flex-grow、flex-shrink、flex-basis三个属性的简写,默认值是flex: 0 1 auto。默认有剩余空间,不会自动放大;超出时会等比例缩小。
-
flex:1是flex-grow: 1;flex-shrink: 1;flex-basis: 0%;的缩写。flex-basis 0%表示0,无尺寸,以实际内容宽度为主,会覆盖设置的width。
-
flex:0是flex-grow: 0;flex-shrink: 1;flex-basis: 0%;的缩写。
-
flex:auto是flex-grow: 1;flex-shrink: 1;flex-basis: auto;的缩写。
-
flex:none是flex-grow: 0;flex-shrink: 0;flex-basis: auto;的缩写。
5. display: flex | inline-flex
inline-flex
代码示例
<body><div class="flex-container"><div class="flex-item item1">1</div><div class="flex-item item2">2</div><div class="flex-item item3">3</div><div class="flex-item item4">4</div></div></body><style>.flex-container {height: 200px;background-color: aquamarine;display: inline-flex;flex-direction: row;justify-content: space-between;align-items: center;}.flex-item {width: 180px;height: 100px;background-color: lightblue;}.item1 {background-color: lightcoral;}.item2 {background-color: lawngreen;}.item3 {background-color: lightcyan;}.item4 {background-color: lightseagreen;}

flex
代码
display: flex;

相关文章:
CSS之flex布局
flex布局 CSS的Flex布局(Flexible Box Layout)是一种用于在页面上布置元素的高效方法,特别适合于响应式设计。Flex布局使得元素能够伸缩以适应可用空间,可以简化很多原本需要复杂CSS和HTML结构才能实现的布局设计。 flex布局包括…...
UnityShader——02三大主流编程语言
三大主流编程语言 Shader Language Shader language的发展方向是设计出在便携性方面可以与C/JAVA相比的高级语言,“赋予程序员灵活而方便的编程方式”,并“利用图形硬件的并行性,提高算法的效率” Shader language目前主要有 3 种语言&…...
Centos7安装nginx yum报错
Centos7安装nginx yum报错,yum源报错解决办法: 1、更新epel源后,出现yum报错 [roothacker117 ~]# yum install epel-release(安装成功) [roothacker117 ~]# yum install nginx(安装失败,提示如…...
【机组】基于FPGA的32位算术逻辑运算单元的设计(EP2C5扩充选配类)
🌈个人主页:Sarapines Programmer🔥 系列专栏:《机组 | 模块单元实验》⏰诗赋清音:云生高巅梦远游, 星光点缀碧海愁。 山川深邃情难晤, 剑气凌云志自修。 目录 一、实验目的 二、实验要求 …...
Asp .Net Core 系列:Asp .Net Core 集成 NLog
简介 NLog是一个基于.NET平台编写的日志记录类库,它可以在应用程序中添加跟踪调试代码,以便在开发、测试和生产环境中对程序进行监控和故障排除。NLog具有简单、灵活和易于配置的特点,支持在任何一种.NET语言中输出带有上下文的调试诊断信息…...
一个基于 .NET 7 + Vue.js 的前后端分离的通用后台管理系统框架 - DncZeus
前言 今天给大家推荐一个基于.NET 7 Vue.js(iview-admin) 的前后端分离的通用后台权限(页面访问、操作按钮控制)管理系统框架:DncZeus。 官方项目简介 DncZeus是一个基于 .NET 7 Vue.js 的前后端分离的通用后台管理系统框架。后端使用.NET 7 Entity Framework…...
更换商品图片日期JSON格式报错 - 序列化与反序列化日期格式设置
报错信息 msg: “服务端异常,请联系管理员JSON parse error: Cannot deserialize value of type java.util.Date from String “2023-11-13 13:13:35”: not a valid representation (error: Failed to parse Date value ‘2023-11-13 13:13:35’: Cannot parse da…...
FastJson、Jackson使用AOP切面进行日志打印异常
FastJson、Jackson使用AOP切面进行日志打印异常 一、概述 1、问题详情 使用FastJson、Jackson进行日志打印时分别包如下错误: 源码: //fastjon log.info("\nRequest Info :{} \n", JSON.toJSONString(requestInfo)); //jackson …...
嵌入式大厂面试题(2)—— 富士康
从本篇开始将会更新历年来各个公司的面试题与面经,题目来自于网上各个平台以及博主自己遇到的,如果大家有所帮助,帮忙点点赞和关注吧! 岗位:嵌入式软件工程师。 面试时间:30分钟。 岗位职责:官网…...
力扣_字符串4—编辑距离
题目 给你两个单词 w o r d 1 word1 word1 和 w o r d 2 word2 word2, 请返回将 w o r d 1 word1 word1 转换成 w o r d 2 word2 word2 所使用的最少操作数 。 你可以对一个单词进行如下三种操作: 插入一个字符删除一个字符替换一个字符 方法—动…...
MySQL篇----第二十篇
系列文章目录 文章目录 系列文章目录前言一、NULL 是什么意思二、主键、外键和索引的区别?三、你可以用什么来确保表格里的字段只接受特定范围里的值?四、说说对 SQL 语句优化有哪些方法?(选择几条)前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍…...
Promise 基础
Promise 基础 理解 抽象表达: Promise 是一门新的技术(ES6 规范)Promise 是 Js 中进行异步编程的新的解决方案(旧方案是使用回调函数) 具体表达 从语法上来说,Promise 是一个构造函数从功能上来说&#x…...
RPA财务机器人之UiPath实战 - 自动化操作Excel进行财务数据汇总与分析之流程建立与数据读取、处理、汇总、分析
一、案例介绍: A公司共有13个开在不同银行的帐户,分别用于不同的业务分部或地区分部收付款。公司总部为了核算每月的收支情况,查看银行在哪个月交易量频繁,需要每月汇总各个银行的帐户借方和贷方金额,并将其净收支&am…...
华为机试真题实战应用【赛题代码篇】-输入整型数组和排序标识/根据排序标识flag给数组排序(附Java、C++和python代码)
目录 问题描述 输出描述: 示例: 代码实现 Java 代码2 代码3 python...
【算法随想录01】环形链表
题目:141. 环形链表 难度:EASY 代码 哈希表遍历求解,表中存储的是元素地址。 时间复杂度 O ( N ) O(N) O(N),空间复杂度 O ( N ) O(N) O(N) /*** Definition for singly-linked list.* struct ListNode {* int val;* …...
macOS Sonoma 14.3.1(23D60)发布
系统介绍 黑果魏叔2 月 9 日消息,苹果今日向 Mac 电脑用户推送了 macOS 14.3.1 更新(内部版本号:23D60),本次更新距离上次发布隔了 17 天。 魏叔 查询苹果官方更新日志,macOS Sonoma 14.3.1 修复内容和 …...
2024-02-11 叮当鸭-平台系统-第三次重构-目标确定
摘要: 对平台系统的第三个版本,做总体规划,明确要达到的目标,功能需求,性能需求。 根据这些所要达到的目标,确定选择何种的方案。方案的成本评估单独进行,本文重点分析要达到的各种目标。 功能需求: 能和…...
Android7.0-Fiddler证书问题
一、将Fiddler的证书导出到电脑,点击Tools -> Options -> HTTPS -> Actions -> Export Root Certificate to Desktop 二、下载Window版openssl, 点击这里打开页面,下拉到下面,选择最上面的64位EXE点击下载安装即可 安…...
Kotlin:单例模式(项目使用实例)
摘要 单例模式主要的五种如下: 饿汉式懒汉式线程安全的懒汉式双重校验锁式(Double Check)静态内部类式 一、项目使用单例模式实例场景 app在运行时缓存部分数据,作为全局缓存数据,以便其他页面及时更新页面对应状态的数据&…...
vue百度地图的和element输入框/v-region的联动
vue百度地图的使用 第一步:安装插件第二步:main.js中引用第三步:页面中使用 第一步:安装插件 npm install vue-baidu-map --save第二步:main.js中引用 // 百度地图 import BaiduMap from vue-baidu-map Vue.use(Baid…...
变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析
一、变量声明设计:let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性,这种设计体现了语言的核心哲学。以下是深度解析: 1.1 设计理念剖析 安全优先原则:默认不可变强制开发者明确声明意图 let x 5; …...
C++_核心编程_多态案例二-制作饮品
#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为:煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例,提供抽象制作饮品基类,提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...
React第五十七节 Router中RouterProvider使用详解及注意事项
前言 在 React Router v6.4 中,RouterProvider 是一个核心组件,用于提供基于数据路由(data routers)的新型路由方案。 它替代了传统的 <BrowserRouter>,支持更强大的数据加载和操作功能(如 loader 和…...
关于nvm与node.js
1 安装nvm 安装过程中手动修改 nvm的安装路径, 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解,但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后,通常在该文件中会出现以下配置&…...
基础测试工具使用经验
背景 vtune,perf, nsight system等基础测试工具,都是用过的,但是没有记录,都逐渐忘了。所以写这篇博客总结记录一下,只要以后发现新的用法,就记得来编辑补充一下 perf 比较基础的用法: 先改这…...
CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云
目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...
C++八股 —— 单例模式
文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全(Thread Safety) 线程安全是指在多线程环境下,某个函数、类或代码片段能够被多个线程同时调用时,仍能保证数据的一致性和逻辑的正确性…...
C++使用 new 来创建动态数组
问题: 不能使用变量定义数组大小 原因: 这是因为数组在内存中是连续存储的,编译器需要在编译阶段就确定数组的大小,以便正确地分配内存空间。如果允许使用变量来定义数组的大小,那么编译器就无法在编译时确定数组的大…...
基于 TAPD 进行项目管理
起因 自己写了个小工具,仓库用的Github。之前在用markdown进行需求管理,现在随着功能的增加,感觉有点难以管理了,所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD,需要提供一个企业名新建一个项目&#…...
排序算法总结(C++)
目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指:同样大小的样本 **(同样大小的数据)**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...
