FlexBox布局

最新推荐文章于 2025-04-23 17:48:22 发布
最新推荐文章于 2025-04-23 17:48:22 发布
阅读量150 收藏
点赞数
分类专栏： React-Native 文章标签： flexBox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42206243/article/details/98728233
版权

一、Flex布局是什么？

Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
Flexbox通常能让我们更好的操作它的子元素布局：

如果元素容器没有足够的空间，我们无需计算每个元素的宽度，就可以设置他们在同一行。
可以快速让他们布局在一列。
可以方便让他们对齐容器的左、右、中间等。
无需修改结构就可以改变他们的显示顺序。
如果元素容器设置百分比和视窗大小改变，不用担心未指定元素的确切宽度而破坏布局，因为容器中的每个子元素都可以自动分配容器的宽度或高度的比例。
注意:设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

二、基本概念

采用Flex布局的元素，称为Flex容器，简称“容器”。它的所有子元素自动成为容器成员，称为Flex项目，简称“项目”。

在这里插入图片描述

三、容器的属性

以下6个属性设置在容器上。

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
3.1 flex-direction属性
flex-direction属性决定主轴的方向

在这里插入图片描述
上图是分别对flex-direction设置以上四个属性值得效果。

3.2 flex-wrap属性

.box{
flex-wrap:nowrap | wrap | wrap-reverse
}

三个值分别表示：
（1）nowrap(默认) :不换行
（2）wrap:换行，第一行在上方
（3）wrap-reverse:换行，第一行在下方

3.3 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box{
flex-flow:< flex-direction >||< flex-wrap >
}

3.4 justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

.box{
justify-content: flex-start | flex-end | center | space-between | space-around;
}

3.5 align-items属性

align-item属性定义项目在交叉轴上如何对齐。

.box{
align-item:flex-start | flex-end | center | baseline | stretch;
}

3.6 align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box{
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

四、项目的属性

以下6个属性设置在项目上。

order
flex-grow
flex-shrink
flex-basis
flex
align-self
4.1 order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

item {
order:0;
}

4.2 flex-grow属性

flex-grow属性定义项目的放大比例，默认为0.

.outer{
			display: flex;
		}
		.outer div{
			width: 100px;
			height: 100px;
			background-color: red;
			margin-left: 20px;
		}
		.outer div:nth-child(1){
			flex-grow:1;
		}
		.outer div:nth-child(2){
			flex-grow:2;
		}
		.outer div:nth-child(3){
			flex-grow:3;
		}
		.outer div:nth-child(4){
			flex-grow:4;
		}

在这里插入图片描述
如上图所示，我们把四个div的flex-grow属性分别设为1,2,3,4，那么他们等于把整个宽度分为10份，分别占1/10、2/10、3/10、4/10。

4.3 flex-shrink属性

flex-shrink定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

.outer{
			display: flex;
		}
		.outer div{
			width: 300px;
			height: 100px;
			background-color: red;
			margin-left: 20px;
		}
		.outer div:nth-child(1){
			flex-shrink:1;
		}
		.outer div:nth-child(2){
			flex-shrink:2;
		}
		.outer div:nth-child(3){
			flex-shrink:2;
		}
		.outer div:nth-child(4){
			flex-shrink:1;
		}

在这里插入图片描述
由上图可知，当空间不足时，flex-shrink属性值大的缩小。

4.4 flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

item {
	flex-basis:length | auto;
}

4.5 flex属性

flex属性是flex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto。
该属性有两个快捷值：auto(1 1 auto)和none(0 0 auto)。

4.6 align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

item {
	align-self:auto | flex-start | flex-end  |  center  | baseline  |  stretch;
}

应用实例：
在这里插入图片描述

import React, {Fragment} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

const App = () => {
  return (
    <Fragment>
      <View style={styles.container}>
        <Text style={{backgroundColor:'red',height:30}}>第一个</Text>
        <Text style={{backgroundColor:'green',height:40}}>第二个</Text>
        <Text style={{backgroundColor:'blue',height:50}}>第三个</Text>
        <Text style={{backgroundColor:'yellow',height:60}}>第四个</Text>
      </View>

    </Fragment>
  );
};

const styles = StyleSheet.create({
    container: {
      backgroundColor:'purple',
      //上边距
      marginTop:100,
      //改变主轴方向
      flexDirection:'row',
      //设置主轴的对齐方式
      justifyContent:'space-around',
      //设置侧轴的对齐方式
      alignItems:'flex-end'
    }
});

export default App;

在这里插入图片描述

import React, {Fragment} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

const App = () => {
  return (
    <Fragment>
      <View style={styles.container}>
        <Text style={{backgroundColor:'red',width:80}}>第一个</Text>
        <Text style={{backgroundColor:'green',width:90}}>第二个</Text>
        <Text style={{backgroundColor:'blue',width:100}}>第三个</Text>
        <Text style={{backgroundColor:'yellow',width:110}}>第四个</Text>
      </View>

    </Fragment>
  );
};

const styles = StyleSheet.create({
    container: {
      backgroundColor:'purple',
      //上边距
      marginTop:100,
      //改变主轴方向
      flexDirection:'row',
      //设置主轴的对齐方式
      justifyContent:'flex-start',
      //设置侧轴的对齐方式
      alignItems:'center',
      //显示不下，换一行
      flexWrap:'wrap'
    }
});

export default App;

在这里插入图片描述

import React, {Fragment} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

const App = () => {
  return (
    <Fragment>
      <View style={styles.container}>
        <Text style={{backgroundColor:'red',flex:1}}>第一个</Text>
        <Text style={{backgroundColor:'green',flex:3}}>第二个</Text>
        <Text style={{backgroundColor:'blue',flex:2}}>第三个</Text>
        <Text style={{backgroundColor:'yellow',flex:1}}>第四个</Text>
      </View>

    </Fragment>
  );
};

const styles = StyleSheet.create({
    container: {
      backgroundColor:'purple',
      //上边距
      marginTop:100,
      //改变主轴方向
      flexDirection:'row',
      //设置主轴的对齐方式
      justifyContent:'flex-start',
      //设置侧轴的对齐方式
      alignItems:'flex-end'
    }
});

export default App;

在这里插入图片描述

import React, {Fragment} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

const App = () => {
  return (
    <Fragment>
      <View style={styles.container}>
        <Text style={{backgroundColor:'red',flex:1,height:60,alignSelf:'flex-start'}}>第一个</Text>
        <Text style={{backgroundColor:'green',flex:3,height:70,alignSelf:'flex-end'}}>第二个</Text>
        <Text style={{backgroundColor:'blue',flex:2,height:80}}>第三个</Text>
        <Text style={{backgroundColor:'yellow',flex:1,height:90}}>第四个</Text>
      </View>

    </Fragment>
  );
};

const styles = StyleSheet.create({
    container: {
      backgroundColor:'purple',
      //上边距
      marginTop:100,
      //改变主轴方向
      flexDirection:'row',
      //设置主轴的对齐方式
      justifyContent:'flex-start',
      //设置侧轴的对齐方式
      alignItems:'center'
    }
});

export default App;
STM32开发记录-基本定时器的操作
caiguorong的博客
09-05 1997
只为记录开发流程，如有错误，前留言指点。基本定时器6/7就只有定时功能和单脉冲模式，没有PWM，输入捕获。第三个计数周期值，当计数器从0计数到周期值则会产生中断，然后从0开始重新计数。然后在定时器初始化函数里面启动定时器，启动的方式有三种，看需要选择。我们要使用中断函数的时候必须增加回调函数，回调函数分很多如。第四个是否重装载，这个在基本定时器没用。第一个是预分频器，把定时器时钟源分频。在打开中断功能，并设置好中断优先级。第二个是计数模式，向上计数。这样基本定时器就配置完了。我这边选择已中断方式启动。
STM32 HAL库 STM32CubeMX -- TIM（定时器中断）
热门推荐
Dir_x的博客
02-12 1万+
STM32 HAL库 STM32Cbue MX配置 定时器中断 TIM 定时器分类 定时器功能框图
学习笔记：基于hal 库开发stm32之定时中断
qq_54152756的博客
07-05 7451
简单写一些关于stm32基于hal库的定时器开发
HAL库TIM定时器
qq_36314279的博客
06-06 4564
待更新
基于STM32F103C8T6(HAL库）和CubeMX使用定时器TIM中断扫描按键,实现按键的长按、短按以及双击
最新发布
wwivn的博客
04-23 1183
在按键的使用过程中，有许多的按键扩展方式，比如区别按键的长按短按以及双击，这里将实现这些功能
STM32定时器的基本知识
m0_73636161的博客
11-16 7451
对stm32单片机中定时器基础知识的了解与学习
stm32 _hal_time中断中的定时器回调函数
gtkknd的专栏
02-17 1万+
当触发中断时会调用对应的中断函数 例如定时器2中断： TIM2_IRQHandler(void) HAL 库中对中断的类型进行了分类处理，每一种类型的中断方式对应一个回调函数； 例如定时器有五种中断方式，对应着五个回调函数： Timer Period elapsed callback HAL_TIM_PeriodElapsedCallback() Timer Output Compare callbackHAL_TIM_OC_DelayElapsedCallback() Timer In...
HAL_TIM_PeriodElapsedCallback相关
weixin_41902493的博客
04-23 8984
是一个回调函数，用于处理定时器（TIM）的周期性中断。这个函数是 STM32 微控制器 HAL（硬件抽象层）库的一部分，用于处理定时器中断服务例程（ISR）。
hal定时器回调函数
ZYjsw668的博客
08-31 1万+
hal定时器回调函数(+) TIM Period elapsed callback(+) TIM Output Compare callback(+) TIM Input capture callback(+) TIM Trigger callback(+) TIM Error callback (+) TIM Period elapsed callback __weak void HAL_TIM_PeriodElapsedCallback(TIM_HandleTypeDef *htim) @b
蓝桥杯嵌入式STM32 G431 hal库开发速成——定时器——TIM
weixin_44860466的博客
11-21 5713
STM32 hal库开发，基本定时器的使用，定时器中断，定时器微妙us延迟，定时器与定时器中断的区别
定时器中断实验
d0203的博客
04-04 2959
需求：使用定时器中断方法，每500ms翻转一次LED1灯状态。5. 重写更新中断回调函数。
HAL_TIM_IC_CaptureCallback 函数
JNTeresa的博客
03-25 1323
HAL_TIM_IC_CaptureCallback`是STM32 HAL库中处理输入捕获中断的核心回调函数。1. **DMA辅助捕获**：使用`HAL_TIM_IC_Start_DMA()`避免中断频繁触发。E --> F[触发HAL_TIM_IC_CaptureCallback]
在HAL库中HAL_TIM_PeriodElapsedCallback这是什么函数
04-03
### HAL_TIM_PeriodElapsedCallback 函数功能与用法 #### 1. 功能描述 `HAL_TIM_PeriodElapsedCallback` 是 STM32 HAL 库中的回调函数，用于处理定时器周期结束事件。当定时器的计数值达到设定的最大值并触发更新...
HAL_TIM_PeriodElapsedCallback函数在哪里
03-20
嗯，用户想找HAL_TIM_PeriodElapsedCallback函数的定义位置和用法。首先，我需要回忆一下STM32的HAL库结构。这个回调函数应该和定时器中断相关，对吧？当定时器的周期到了，就会触发这个回调函数。 根据用户提供的...
HAL_TIM_PeriodElapsedCallback
02-16
HAL_TIM_PeriodElapsedCallback是STM32 HAL库中的一个回调函数，用于处理定时器的周期中断事件。当定时器的计数器达到设定的周期值时，会触发该中断，并调用HAL_TIM_PeriodElapsedCallback函数。 在使用HAL库进行...
HAL_TIM_PeriodElapsedCallback怎么结束
12-12
在STM32的HAL库中，`HAL_TIM_PeriodElapsedCallback`是一个回调函数，用于处理定时器周期溢出的事件。要结束这个回调函数，可以通过以下几种方式： 1. **清除定时器中断标志**：在回调函数中手动清除定时器的更新...
ST HAL库回调函数详解
wanghao312的博客
03-11 1331
ST公司的HAL库（Hardware Abstraction Layer）是STM32系列微控制器的底层驱动库，其设计采用了**回调函数（Callback Function）**机制来实现事件驱动的编程模型。回调函数允许用户在特定硬件事件（如传输完成、错误发生等）发生时，插入自定义的处理逻辑。通过合理使用HAL库的回调函数，可以大幅简化STM32的异步事件处理，提升代码可维护性和响应效率。用户可以在自己的代码中**重写（Override）**这些函数，添加具体逻辑。HAL库默认将回调函数定义为。
stm32 tip
m0_72973493的博客
06-13 1394
如果全局变量g_timxchy_cap_sta的第8位是0（表示还未成功捕获到一个高电平脉冲），并且第7位是1（表示正在等待捕获下降沿），那么它会检查g_timxchy_cap_sta的低6位是否全为1。在这种情况下，代码会将g_timxchy_cap_sta和g_timxchy_cap_val清零，并标记捕获到了一个上升沿（通过将g_timxchy_cap_sta的第7位置1）。在HAL库中，HAL_GPIO_EXTI_Callback函数的实现通常是预留的，需要开发者根据实际需求进行重写。
通用定时器输入捕获
weixin_59538099的博客
04-04 5737
1.HAL_TIM_IC_CaptureCallback(TIM_HandleTypeDef *htim)：作用为捕获中断发生时执行，上升沿或者下降沿中断触发。2.HAL_TIM_PeriodElapsedCallback(TIM_HandleTypeDef *htim)：作用为更新中断（溢出）发生时执行。即将参数初始化，开启时钟，设置NVIC中断优先级，中断服务函数等。溢出时间Tout = N*（ARR+1)+CCRx2 （us）通用定时器捕获脉冲原理（while循环所表达的）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值