浅谈display:flex

最新推荐文章于 2024-04-27 10:05:36 发布
转载 最新推荐文章于 2024-04-27 10:05:36 发布 · 426 阅读 · 0

本文探讨了display:flex在网页布局中的应用，重点介绍了如何利用flex解决传统布局难题，如元素的等比分配及居中问题。

浅谈display:flex

display:flex 意思是弹性布局

 

首先flex的出现是为了解决哪些问题呢？

一、页面行排列布局

像此图左右两个div一排显示

可以用浮动的布局方式

html部分

css部分

这种布局有两个缺点

1.需要一个空div来清除浮动，当然也可以选用其他清除浮动的方法，但此处需要清除浮动才能不影响下面的布局。

2.当.left,.right 的宽度是固定的，浏览器宽度变的过窄时，.right会被挤到下面

用display:flex布局，可以解决这两个缺点

刚吃的html部分不变，css部分

父级元素定义display:flex,子元素宽度用flex来定义,flex:1 是均分父级元素。占的比例相同

1:2分时

同样分为3份时

flex是所占的比例，这样的布局就方便很多。

 

 二、div上下左右居中

我之前写过div上下左右居中的几种方法

其中有一个写了margin：auto auto；这个方法的使用前提就是先把父元素设为display:flex

html部分

css部分 

在未知div宽高时，用这种方法比较方便

这是我在使用flex布局时用到的两个比较常见又好用的例子

浅谈uniapp的flex布局
qq_36305027的博客
05-10 1万+
1 flex布局 ​ flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。设置Flex布局也很简单直接css中，设置它的 display:flex。 1.1 flex-direction ​ 容器类元素排列方向，它有四个参数可以选择。row（从左至右）； row-reverse （从右至左）； column（从上到下）； column-reverse（从下到上）。 <template> <view style="dis
浅谈CSS3中display属性的Flex布局 - 三里屯柯南 - 博客园1
08-04
在CSS3中，`display`属性的`flex`布局是一种强大的布局模式，旨在解决传统CSS布局方式在处理复杂和动态内容时的局限性。通过使用`display: flex`，我们可以轻松地创建响应式和灵活的网页布局。在本文中，我们将深入...
页面布局-----display:flex详解
weixin_46585382的博客
10-14 4万+
页面布局-----display:flex详解。
什么是弹性（display: flex）布局 ？
热门推荐
weixin_41044151的博客
02-25 11万+
display:flex 意思是弹性布局，它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 .box{ display: flex; } 注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 它可以用于以下四个方面： 1、在不同方向排列元素 2、重新排列元素的显示顺序 3、更改元素的对齐方式 4、动态地将
弹性盒子(display:flex)详解
m0_68845148的博客
11-09 1万+
在css中我们使用display大多都是用来转换元素类型的，这种方法在我们实现页面布局中大部分地方都很好用，但难免还是会有一定的局限性，那么弹性盒子就有可能帮助我们更好的去进行批量改变子元素的布局。
display：flex
qq_37805832的博客
08-15 584
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{padding: 0px;margin: 0px;} ul { list-style: none; width: 600px; border: 1px solid red; margin: 1
display: flex继承
08-30
- *1* [浅谈display:flex对div宽度和高度继承的影响](https://blog.youkuaiyun.com/m0_52518047/article/details/124256841)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip...
浅谈CSS3中display属性的Flex布局的方法
09-24
- `flex`: 是`flex-grow`, `flex-shrink`和`flex-basis`的简写，如`flex: 1 0 auto;`表示项目会尽可能增长，但不会缩小，基础大小为自动。 通过这些属性的组合使用，开发者可以创建出各种复杂的响应式布局，适应...
display flex
catherine的博客
11-09 1429
display flex是什么？display flex是将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）在web网页中必须要考虑兼容性，因为浏览器不同，浏览器的支持和实现方式也不同，导致兼容起来略显麻烦不过，开发微信小程序的话，并不需要考虑其他浏览器。display flex布局使用方法设定一个容器，其中有多个子容器，比如，这是一个简单的例子&lt;div style="width:40...
弹性盒子display：flex
你还有我
12-21 3788
目录弹性盒子flex-direction 排列方向flex-wrap规定是否换行justify-content主轴排列align-items侧轴排列方式单个元素的align-selfflex-grow放flex-shrink缩flex-basisorder 弹性盒子 声明定义： 使用display：flex或display：inline-flex 声明一个容器为弹性盒子。这个容器中的子元素们，会遵循弹性布局。 【注】一般是使用display:flex. inline-flex极少用。 flex:如果没有为父
弹性布局（display: flex）
2401_84341405的博客
04-27 2万+
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考。
CSS3 -- display:flex
weixin_34117211的博客
02-14 225
弹性盒子 零、 父元素为display: flex;孙元素不受影响：所以想让子元素不受父元素影响，在子元素上套一层，让子元素变成孙元素 一、容器的属性（6） display、flex-direction、flex-wrap、justify-content、align-items、align-content ❶ display: inline-flex / flex; (Web...
CSS中的display: flex；
2301_77523055的博客
04-22 882
是CSS（层叠样式表）中用于设置容器为弹性盒子模型（Flexbox）的属性值。弹性盒子模型是CSS3中引入的一个新的布局模式，它设计用来更好地在容器中布局、对齐和分配空间给子元素（即容器内的项目），即使容器的大小是动态变化的或者未知的。使用Flexbox，你可以轻松地控制子元素的对齐方式（水平或垂直）、排列顺序、空间分配等，而无需使用浮动或定位等传统方法，这大大简化了复杂的布局任务。时，这个元素会变成一个弹性容器，而它的直接子元素则自动成为弹性项目（flex items）。
display:flex属性
weixin_46380993的博客
02-29 5万+
什么是display:flex？（我来自逆战班） Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒模型提供最大的灵活性。任何一个容器都可以指定为flex布局。 1：先来了解一下display:flex 正常情况下 在一个盒子中，放置4个div，设置高度，宽度继承父元素，呈现如图排列方式，当我们给盒子加上display:flex时，再看一下 盒子内的4个div就...
react native display:flex display:none
最新发布
10-17
<think>我们正在讨论React Native中的display属性，特别是flex和none。请注意，React Native的布局系统基于Flexbox，因此display:flex是默认的布局行为。而display:none用于隐藏元素。 在React Native中，我们通常使用style属性来控制组件的显示和布局。对于display属性，React Native支持的有： - 'flex'（默认值）：使用Flexbox布局显示元素。 - 'none'：隐藏元素，且不占据布局空间。 注意：在React Native中，没有类似于Web中的block, inline-block等值，因为布局主要依赖于Flexbox。 使用场景： 1. display:flex：这是默认值，当我们想使用Flexbox布局来排列子元素时，不需要特别设置，因为默认就是flex。但我们可以通过flexDirection, justifyContent, alignItems等属性来控制布局。 2. display:none：当我们想要隐藏某个组件，并且不希望它占据任何空间时使用。注意，与Web不同，在React Native中，我们也可以通过设置组件的宽度和高度为0来隐藏，但使用display:none更为直接和语义化。 示例： 1. 使用display:flex（默认，通常不写）： ```jsx <View style={{flex: 1, flexDirection: 'row'}}> <Text>Item 1</Text> <Text>Item 2</Text> </View> ``` 2. 使用display:none： ```jsx <View style={{display: 'none'}}> <Text>这个组件将被隐藏，不占据空间</Text> </View> ``` 另外，在React Native中，我们也可以使用条件渲染来控制组件的显示与隐藏，例如： ```jsx {shouldShow && <View><Text>条件显示的组件</Text></View>} ``` 这种方式与display:none的效果类似，都是不渲染或隐藏组件，不占据空间。 但是要注意，display:none只是隐藏组件，而条件渲染则是完全不渲染该组件。根据需求选择： - 如果组件需要频繁切换显示/隐藏，且状态需要保留，可以使用display:none（因为组件只是被隐藏，并没有被卸载）。 - 如果隐藏时不需要保留状态，或者组件渲染开销大，则可以使用条件渲染（这样在隐藏时不会渲染，节省资源）。 总结： - 默认情况下，React Native组件都是display:flex，无需特别设置。 - 使用display:none可以隐藏组件且不占据空间。 - 根据场景选择display:none还是条件渲染。 相关问题： 1. 在React Native中，除了display:none，还有哪些隐藏组件的方法？ 2. React Native的Flexbox布局与Web的Flexbox有哪些主要区别？ 3. 如何实现React Native组件的渐显/渐隐效果？ </think>在 React Native 中，`display: flex` 和 `display: none` 的使用方式与 Web 开发类似，但存在平台差异和实现区别： ### 📱 1. `display: flex`（默认布局模式） - **作用**：启用 Flexbox 布局（React Native 的默认布局系统） - **使用方法**（通常无需显式声明，因默认即为 flex）： ```jsx <View style={{ display: 'flex', flexDirection: 'row' }}> <Text>Item 1</Text> <Text>Item 2</Text> </View> ``` - **核心属性**： - `flexDirection`: `row`（水平） / `column`（垂直，默认） - `justifyContent`: 主轴对齐（`flex-start`, `center`, `space-between` 等） - `alignItems`: 交叉轴对齐（`stretch`, `center`, `flex-start` 等） - `flex`: 定义元素的伸缩比例（如 `flex: 1` 表示占满剩余空间） - **典型场景**： - 构建响应式网格布局 - 实现水平/垂直居中 - 分配剩余空间（如底部固定按钮+滚动内容区域） - 等分空间布局（结合 `flex: 1` 使用） ### 🚫 2. `display: none` - **作用**：完全隐藏元素且**不占据布局空间** - **使用方法**： ```jsx <View style={{ display: shouldShow ? 'flex' : 'none' }}> <Text>条件显示的内容</Text> </View> ``` - **特性**： - 元素从渲染树移除，不参与布局计算 - 相比 `opacity: 0`（视觉隐藏但仍占位）更彻底 - 性能优于 `position: absolute` + `left: -1000` 等 hack 方式 - **典型场景**： - 条件渲染（如权限控制下的UI模块） - 步骤引导的分页切换 - 动态隐藏/显示复杂组件（避免重渲染开销） - 响应设备旋转/尺寸变化的适配逻辑 ### ️ 关键注意事项 1. **平台差异**： - Android 默认支持 `display: none` - **iOS 需 RN 0.62+** 才支持（旧版本需用 `opacity` + `position` 替代） 2. **性能对比**： | **方法** | 布局占位 | GPU 渲染负担 | 适用场景 | |-------------------|----------|-------------|-----------------------| | `display: none` | ❌ 否 | ✅ 低 | 需彻底移除元素时 | | `opacity: 0` | ✅ 是 | ⚠️ 中 | 需要位移动画时 | | 条件渲染 `&&` | ❌ 否 | ✅ 低 | 初始化不渲染的复杂组件 | 3. **替代方案参考**（兼容旧版 iOS）： ```jsx // 兼容性隐藏方案 <View style={{ opacity: shouldShow ? 1 : 0, position: shouldShow ? 'relative' : 'absolute', height: shouldShow ? undefined : 0, overflow: 'hidden' }}> ``` --- ### 📚 相关问题 1. React Native 中 Flexbox 布局与 Web 的 Flexbox 有哪些主要区别？ 2. 如何实现 React Native 组件的渐隐/渐显动画效果？ 3. 在性能优化场景下，`display: none` 和条件渲染 `{isVisible && <Component/>}` 应如何选择？ 4. React Native 中如何处理响应式布局中的元素隐藏逻辑（如横屏/竖屏切换）？ > 引用说明：关于元素隐藏时布局空间的处理机制参考了 Flexbox 布局规范的核心原则[^1]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值