flex布局基础

原创 已于 2022-05-06 09:15:44 修改 · 193 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

于 2021-11-19 20:32:26 首次发布

参考：一篇文章弄懂flex布局 - 听风是风 - 博客园 详细

把能想到的点写一下：

1.兼容性

兼容到IE10以上

2.属性

display: flex

justify-content:center 左右居中对齐

align-items:center 上下居中

3.flex:0 1 auto --->放大、缩小、默认宽度

这条属性写在子元素上

auto(1 1 auto)

none(0 0 auto)

4.flex:n

这里的flex属性是给到子元素上面的

一般flex会有三个元素，如flex:0 1 auto

但也会出现如flex:n的情况，相当于 flex-grow的属性

具体设置看这篇：关于flex盒模型里项目放大比例的计算规则（flex-grow和flex属性）_kun_96的博客-CSDN博客_flex等比例缩放

Flex布局基础知识
01-08
Flex布局 今天在学习css的时候，学到了一个新的布局方式:Flex布局（弹性盒布局）。本人认为挺重要的，首写博客来巩固一下自己今天所学的有关Flex布局的知识，并与大家分享，内容如有错误，欢迎大家来给我指点一下。 ...
浅谈微信小程序flex布局基础
10-18
【微信小程序Flex布局基础】 Flex布局，全称为Flexible Box布局，是现代Web开发中用于创建灵活、响应式设计的一种布局模式。在微信小程序中，它同样被广泛应用，以实现复杂和适应不同屏幕尺寸的界面设计。本文将...
Flex 布局基础
2401_87805056的博客
06-02 903
Flex 布局，即弹性盒子布局，是一种用于在页面上排列元素的一维布局模型。它允许子元素在主轴（row 或 column）上伸缩，以填充剩余空间或适应容器的大小变化，从而解决了传统布局中的一些常见问题，如元素对齐和空间分配等。以上代码实现了一个简单的两列布局页面，左侧为导航栏，右侧为内容区，通过 Flex 布局实现了灵活的空间分配和对齐。在 Flex 布局中，我们有两个关键的概念：Flex 容器和 Flex 项目。属性决定了 Flex 项目的排列顺序，其取值为一个整数，数值越小，项目越靠前。
flex 布局基础入门
m0_56966142的博客
02-19 565
一、flex 布局基础 1.1 flex 布局与传统布局 优缺点 传统布局 flex布局 兼容性好 操作方便，布局简单，移动端应用广泛 布局繁琐 PC端浏览器支持 1.2 flex 布局原理 1. 概述 flex 是 flexible Box 的缩写，意为"弹性布局"， 用来为盒状模型提供最大的灵活性，任何一个容器都可以 指定为 flex 布局。 Flex弹性盒模型的优势在于只需声明布局应该具有的⾏为，⽽不需要给出具体的实现⽅式，浏览器负责完成实际布局，当布局涉及到不定宽度
Flex布局基础
qq_44709970的博客
12-11 1562
概念：什么是Flex？ FlexiableBox即是弹性盒子，用来进行弹性布局，可以配合rem处理尺寸的适配问题 为什么使用Flex布局？ 1，用来为盒状模型提供最大的灵活性。任何容器都可以指定为Flex布局（使用display属性） 即：display:flex; 2，更加符合响应式设计的特点 虽然说，我们在进行前端布局时，可以使用position、float等属性满足我们的所有需求，但是代码量大且不够灵活 初识Flex 每个弹性容器都有两根轴：主轴和交叉轴，两轴之间成90度关系.
flex布局基础介绍
Yijing_Wei的博客
09-07 829
初学flex布局基本介绍，flex布局属性简介，基本使用。felx布局使元素垂直居中，flex布局基本应用
flex布局基础和应用
qq_56397275的博客
12-15 370
align-self属性可以为项目设置与其他项目不一样的对齐方式，具体参数用法和align-items一致，只不过它是作用于单个项目，属性也是写在项目上（子元素）不是容器上（父元素）。flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。flex布局包含的元素通常用容器和项目来称呼，设置flex布局（display: flex）的元素称为flex。flex-shrink 属性控制项目收缩比例，默认为1，即如果空间不足，项目缩小。
Flex布局基础及常用样式
qt的博客
03-26 2505
转载阮一峰老师的Flex布局语法和实际开发，已经一些相关的案例 Flex语法 网页布局（layout）是 CSS 的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box{ display: fl
CSS-flex布局基础知识
m0_48701975的博客
04-05 683
1.布局原理 1.1布局原理 flex是flexible Box的缩写，意为“弹性布局”,用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。采用Flex布局的元素，称为Flex容器，简称“容器”。它的所有子元素自动成为容器成员，称为Flex项目，简称“项目” 当我们为父盒子设为flex布局后，子元素的float、clear和vertical-align属性将失效。 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局 子容器可以横向排列也可以纵向排列 原理总结：就是通过给父盒子添
flex布局（基础）
m0_64246150的博客
05-12 260
传统布局与flex布局 传统布局： 兼容性好 布局繁琐 局限性，不能再移动端很好的布局 flex弹性布局： 操作方便，布局极为简单，移动端应用很广泛 PC端浏览器支持情况较差 IE 11或更低版本，不支持或仅部分支持 建议： 1.如果是PC端页面，我们还是传统布局 2.如果是移动端或者不考虑兼容性问题的pc端页面，我们还是使用flex弹性布局 布局原理 flex是flexiblebox的缩写，意味“弹性布局”，用来为盒状模型提供最大的灵.
8月4日 flex布局基础知识练习
08-04
CSS个人学习用案例练习。素材、教程来自B站：https://www.bilibili.com/video/BV14J4114768?share_source=copy_web&vd_source=243f64660b5d6b4b957716cf240fdffd
Vue基础知识-脚手架开发-子传父-props回调函数实现和自定义事件（$on绑定、$emit触发、$off解绑）实现
2503_91308956的博客
09-04 1098
本文演示了Vue2中两种子组件向父组件传递数据的方法：1）通过props回调函数，父组件传递回调函数给子组件，子组件调用该函数传参；2）通过自定义事件，父组件给子组件绑定事件，子组件用$emit触发并传参。
vue2(7)-单页应用程序&路由
Naiveyouzhi的博客
09-07 142
快速引入组件，也可以用绝对路径 基于@指代src目录，从src目录出发找组件。最大的原因是：页面按需更新 要按需更新，就要明确访问路径和组件的关系。类名太长可以在router，index.js里面配置。单页应用程序，之所以开发效率高，性能高，用户体验好。右边第三个框，是在main.js中导入的。5.声明式导航-导航链接。2.路由：路径和组件的映射关系。配组件 配规则，配导航 配出口。如 单页：网易云，多页：京东。6.声明式导航-两个链接。6.声明式导航-跳转传参。
python中的“与或非“与vue中的“与或非“
最新发布
dreams_dream的博客
09-07 98
差异点Python运算符语法andornot&&, `!空值判断None是假null和undefined是假类型转换更严格更宽松（自动类型转换）表达式优先级> && >
vue3的选项式与组合式
wdhykj1的博客
09-07 526
选项式 API 和组合式 API 各有其优势和适用场景。选项式 API 提供了一种结构简单、易于学习的方式，适合小型项目和新手开发者。组合式 API 则提供了更好的逻辑组织、复用和类型支持，适合大型复杂应用。Vue 3 同时支持这两种 API 风格，开发者可以根据项目需求和个人偏好灵活选择。在实际开发中，甚至可以混合使用两种 API，在同一个项目中根据组件的复杂程度选择最合适的 API 风格。无论选择哪种 API，理解其背后的设计理念和最佳实践都是编写高质量 Vue 应用的关键。
Uni-App + Vue onLoad与onLaunch执行顺序问题完整解决方案 – 3种实用方法详解
前端开发-前端技术分享
09-04 1318
深入解析Vue应用中onLoad在onLaunch未完成时执行的常见问题，提供Promise状态管理、事件总线、状态机模式三种解决方案，适用于小程序和Vue项目开发，解决全局数据未准备好的痛点。
.tsx父页面给.vue子页面传参
cyw8998的专栏
09-05 218
【代码】.tsx父页面给.vue子页面传参。
Vue 实现文件拖拽上传与粘贴上传：从原理到实践
duduanwang的博客
09-06 482
文件上传组件实现方案 该Vue组件实现了拖拽上传和粘贴上传两种高级文件上传方式，包含以下核心功能： 交互方式支持： 拖拽上传（HTML5 Drag & Drop API） 粘贴上传（Clipboard API） 传统文件选择 核心处理逻辑： 文件验证（大小限制、类型检查、去重） 实时预览生成（图片类型） 上传进度跟踪 错误处理与用户反馈 技术实现要点： 使用Vue3 Composition API 通过事件监听处理拖拽和粘贴操作 利用URL.createObjectURL实现本地预览 包含完整的生命
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值