在我们的项目中我们使用 axios 进行异步调用。 因为异步调用的问题，如果我不采取手段，子页面没有办法获得父页面中的数据，页面将会显示为 没有数据。...问题和解决 这个问题的原因就是子组件在初始化的时候，父组件还没有获得数据。 可以使用的方法是 v-if 进行判断。 对比上面我们使用了 v-if 判断的代码和没有使用判断的代码。...另外一个需要注意的是，在子组件中需要使用 props:['projects','currentPage'], 将数据从父总结中传递过来。 从父组件中将数据传递过来。
Flex布局 通过给父盒子添加flex属性，来控制子盒子的位置和排列方式 常见的父项属性 flex-direction设置主轴方向 默认主轴是水平的x轴 主轴和侧轴是会变化的， flex-direction...则左到右 flex-end 从尾开始 center 主轴居中对齐 space-around 平分剩余空间 space -between 先两边贴边，再平分剩余空间 flex-wrap设置是否换行 flex-wrap...则左到右 flex-end 从尾开始 center 居中对齐 stretch 拉伸 align-content 设置侧轴上的子元素的排列方式（多行） 子项中出现换行wrap,才有效果 属性值 说明 flex-start...在侧轴的头部开始排列 flex-end 侧轴尾部开始排列 center 侧轴居中对齐 space-around 子项在侧轴平分剩余空间 space -between 侧轴先分布在两头，再平分剩余空间...stretch 子项元素高度平分父元素高度 单行用align-items 多行用align-content 常见的子项属性 flex属性 分配剩余空间，用flex来表示占多少份数 align-self
【父项的底边】对齐的规则 ALIGN_PARENT_END 将子项的【末端边缘】与其RelativeLayout【父项的末端】边缘对齐的规则 ALIGN_PARENT_LEFT 将孩子的【左边缘】与其RelativeLayout...【父对象的左边缘】对齐的规则 ALIGN_PARENT_RIGHT 将孩子的【右边缘】与其RelativeLayout【父对象的右边缘】对齐的规则 ALIGN_PARENT_START 将孩子的【起始边缘...】与其RelativeLayou【t父对象的起始边缘】对齐的规则 ALIGN_PARENT_TOP 使子项的上边缘与其RelativeLayout父项的上边缘对齐的规则 ALIGN_RIGHT 将孩子的右边缘与另一个孩子的右边缘对齐的规则...CENTER_HORIZONTAL 使子级相对于其RelativeLayout父级的边界水平居中的规则 CENTER_IN_PARENT 使子项相对于其RelativeLayout父项的边界居中的规则...CENTER_VERTICAL 使子项相对于其RelativeLayout父项的边界垂直居中的规则 END_OF 将孩子的起始边缘与另一个孩子的终止边缘对齐的规则 LEFT_OF 将孩子的右边缘与另一个孩子的左边缘对齐的规则
当我们为父盒子设为flex布局以后，子元素的float、vertical-align数据将失效。...2 flex布局父项常见属性 2.1 常见父项属性 flex-direction：设置主轴的方向 justify-content：设置主轴上的子元素排列方式 flex-warp：设置子元素是否换行 align-content...定义：flex布局中默认是不换行的。 如果元素太多，会缩小子元素的宽度，放到父元素里面。...属性值 说明 nowrap 默认值，不换行 wrap 换行 2.5 align-items 设置侧轴上的子元素排列方式（单行） 该属性是控制子项在侧轴（默认y轴）上的排列方式，在子项为单项的时候使用。...设置侧轴上的子元素的排列方式（多行） 设置子项在侧轴上的排列方式，并且只能用于子项出现 换行 的情况（多行） 图片 属性值 说明 flex-start 默认值在侧轴的头部开始排列 flex-end 在侧轴的尾部开始排列
flex布局的原理 给父盒子添加flex属性，来控制盒子的位置和排列方式（当我们给父元素设置为flex布局以后，子元素的float、clear和vertical-align属性将失效） flex:布局又叫伸缩布局...，弹性布局，伸缩盒布局，flex布局 flex常见的父项常见属性 flex-direction：设置主轴的方向 justify-content：设置主轴上的子元素排列方式 flex-wrap：设置子元素是否换行...和 flex-wrap flex常见的子项属性 flex子项目占的分数 aglin-self控制子项目自己在侧轴的排列方式 order属性定义子项的排列顺序（前后顺序） flex设置垂直居中的两种方式...: 200px; } 我是垂直居中的盒子...line-height: 200px; } 使用子元素方法垂直居中
），占据的交叉轴空间叫做（cross size）三、容器属性1.父级属性可以简单的理解为作用外层div。...1px solid red; display: flex; /\* 父项常见属性...当所有子项目的总宽度大于父元素的宽度的时候，子项目会均分父元素的宽度。...\*/ /\* 针对单行的子项目 \*/ /\* 想要让子项目水平垂直居中，相当于实现项目在主轴和侧轴上的居中。...如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
总结：就是通过给父盒子添加flex属性（display: flex;），来控制子盒子的位置和排列方式 1.3 flex布局父项常见属性 以下六个属性是对父元素设置的 flex -direction:设置主轴方向...（单行） 该属性控制子项在侧轴（默认是y轴）上的排列方式 ，在子项为单项（单行）时使用 属性值 说明 flex-start 从上到下 flex-end 从下到上 center 挤在一起（垂直居中） stretch...子项在侧轴西安分部在两头，在平分剩余空间 stretch 设置子项元素高度平分父元素高度 align-content和align-items区别 align-items适用于单行情况下，只有上对齐...flex布局子项常见属性 1.4.1 flex属性 flex属性定义子项目分配剩余空间，用flex来表示占多少份数 可为数字，也可为百分比，百分比相对于父级来说 1.4.2align-self控制子项自己在侧轴上的排列方式...默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目” 常见父项属性: flex-direction：设置主轴的方向 justify-content：设置主轴上的子元素排列方式...（默认是y轴）上的排列方式 在子项为单项（单行）的时候使用 属性值 说明 flex-start 从上到下 flex-end 从下到上 center 挤在一起居中（垂直居中） stretch 拉伸 （默认值...） align-content 设置侧轴上的子元素的排列方式（多行）: 设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况（多行），在单行下是没有效果的 属性值 说明 flex-start...再平分剩余空间 stretch 设置子项元素高度平分父元素高度 align-content 和 align-items 区别: align-items 适用于单行情况下， 只有上对齐、下对齐、居中和...: align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性 默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于
总结：就是通过给父盒子添加flex属性，(display: flex;)来控制子盒子的位置和排列方式 6.2.3 flex布局父项常见属性 以下六个属性是对父元素设置的 flex -direction...垂直居中） stretch 拉伸（默认值）有高度不能拉伸 6.2.3.5align-content设置侧轴上的子元素的排列方式（多行） 设置子项在侧轴上的排列方式，并且只能用于子项出现换行的情况（多行...子项在侧轴西安分部在两头，在平分剩余空间 stretch 设置子项元素高度平分父元素高度 align-content和align-items区别 align-items适用于单行情况下，只有上对齐...flex布局子项常见属性 6.2.4.1flex属性 flex属性定义子项目分配剩余空间，用flex来表示占多少份数 可为数字，也可为百分比，百分比相对于父级来说 6.2.4.2align-self控制子项自己在侧轴上的排列方式...默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
Flex布局常见父项的属性：●flex-direction :设置主轴的方向Row 默认值从左到右row-reverse 从右到左column 从上到下column-reverse 从下到上●justify-content...:设置主轴上的子元素排列方式flex-start 默认值从头部开始 如果主轴是x轴，则从左到右flex-end 从尾部开始排列(但元素的顺序还是从左到右)center 在主轴居中对齐(如果主轴是x轴则水平居中...,再平分剩余空间stretch 设置子项元素高度平分父元素高度●align-items :设置侧轴上的子元素排列方式(单行)该属性是控制子项在侧轴(默认是y轴).上的排列方式在子项为单项(单行)的时候使用...flex-start 从上到下flex- end 从下到上center 挤在一起居中(垂直居中)stretch 拉伸(默认值但是子盒子如果给高度就不会生效)●flex-flow :复合属性,相当于同时设置了...默认值为auto ,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
android:layout_alignWithParentIfMissing 如果设置为true，则在无法找到layout_toLeftOf，layout_toRightOf等的锚点时，父项将用作锚点...android:layout_below 将此视图的上边缘定位在给定锚点视图ID下方。 android:layout_centerHorizontal 如果为true，则将此子项水平居中于其父级。...android:layout_centerInParent 如果为true，则将此子项在其父级中水平和垂直居中。...android:layout_centerVertical 如果为true，则将此子项垂直居中于其父项中。...android:layout_toRightOf 将此视图的左边缘定位到给定锚点视图ID的右侧。 android:layout_toStartOf 将此视图的结束边缘定位到给定锚点视图ID的开头。
总结：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式 3.0 父项常见属性 flex-direction：设置主轴的方向 justify-content：设置主轴上的子元素排列方式 flex-wrap...从头部开始 flex-end 从尾部开始 center 居中显示 stretch 拉伸 3.5 align-content 设置侧轴上的子元素的排列方式（多行） 设置子项在侧轴上的排列方式 并且只能用于子项出现...）， 可以设置 上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。...wrap; 4.0 flex布局子项常见属性 flex子项目占的份数 align-self控制子项自己在侧轴的排列方式 order属性定义子项的排列顺序（前后顺序） 4.1 flex 属性 flex...默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。
:1;// 占满所有剩余空间 3、Flex 实现元素水平垂直居中 方法一：给 flex 容器添加以下三个属性，就可以实现子项水平垂直居中 display: flex; // 容器为 flex 布局...justify-content: center; // 子项在主轴（水平居中） align-items: center; // 子项在交叉轴（垂直居中） 方法二： 父元素加上 display:flex;...时 ，给子项加上 margin: auto; 可实现在垂直方向居中 4、flex 怎么实现盒子 1 在最左边，2 、3 在最右边 在父容器.container 中构建两个子项 .left 和.right...解决方案：如果我们每一行显示的个数为 n，那我们可以最后一行子项的后面加上 n-2 个 span 元素，span 元素的宽度和其它子项元素宽度一样，但不用设置高度。...flex 布局 flex-wrap: wrap; // 内容放不下自动换行 给子项添加如下样式： flex-basis: 25%; // 项目占据主轴（父容器宽）的空间。
这使元素相对于包含块的边缘水平居中。 ? 具有绝对定位元素的 margin:auto ? 另一个不太常见的将绝对定位元素居中的用例是margin: auto。...当我们有一个元素应该在它的父元素内部水平和垂直居中时，我们可能会倾向于使用translateX或translateY。 我们可以使用下面方法让具有绝对定位元素居中： 设置的宽度和高度。...考虑下面的模型，父级元素是一个 flex 布局： ? 我们想把第二项推到最右边，自动边距就派上用场了。...好吧，原因是绝对定位的元素相对于其最接近的父元素具有position：relative。 该父项具有padding: 16px，因此子项位于顶部和左侧的16px处。 有趣，不是吗？...我们不能使用left:0，因为这会将子元素粘到边缘，这不是我们想要的。 请参阅下面的模型，以了解我的意思。 ? 要以正确的方式重置子项，我们应该使用left: auto。
只需要在父元素的样式中添加一行: display:flex; <!...总结flex布局原理: 就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式. 01 父项常见属性 flex-direction:设置主轴方向. justify-content:设置主轴上的子元素排列方式...那我们能不能垂直居中,又水平居中呢? 其实我们只要两步:让盒子在主轴上水平居中,又让盒子在侧轴垂直居中就可以实现啦....做出来的效果: 但是也有主侧轴的问题,假如我设置的主轴是y轴,再让侧轴居中,出来的效果就是: 但是这个属性只适用于单行文本....总结就是单行找align-items,多行找align-content. 02 子项常见属性 flex子项目占的份数 align-self控制子项在自己侧轴的排列方式. order属性定义子项的排列顺序
布局原理 1.通过给父盒子添加flex属性，来控制子盒子的位置和排列方式 2.设置flex属性的容器称为flex父容器，父容器的子元素称为子容器 （flex项目） 当设置flex布局之后，子元素的...（居中也是） 如果没有设置分配空间 而是给的margin外边距 则不会压缩剩余空间 会直接改变子元素本身的大小。...，以往如果用外边距margin：auto，往往只能做到水平居中，还需要搭配其他的属性。...总结 常见父项属性 flex-direction：设置主轴的方向 justify-content：设置主轴上的子元素排列方式 flex-wrap：设置子元素是否换行 align-content：设置侧轴上的子元素的排列方式...子项目占的份数 align-self 控制子项自己在侧轴的排列方式 order 属性定义子项的排列顺序（前后顺序）
，数值表示占据剩余空间的份数flex 属性，是以下三个属性的简写，即 flex:0 1 auto;属性描述flex-grow:0;定义弹性盒子项的拉伸因子，即子项分配父项剩余空间的比，默认值为 0flex-shrink...:1;指定了 flex 元素的收缩规则，子项的收缩所占的份数，默认值为1 当所有子项相加的宽度大于父项的宽度，每个子项减少的多出的父项宽度的 1/n felx-basis:auto;指定了 flex...5份，其中 a 占 1 份，b 占 1 份，c 占 3 份，即 1:1:3，我们可以看到父项宽度定义为 400 px，子项被定义为 200 px，相加之后为 600 px，超出父项宽度 200 px，那么这么超出的...center伸缩元素向每行中点排列，每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同space-between在每行上均匀分配弹性元素，相邻元素间距离相同，即空白在子项之间每行第一个元素与行首对齐...，每行最后一个元素与行尾对齐space-around在每行上均匀分配弹性元素，相邻元素间距离相同，即空白围绕着子项每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半#main
2.1 基本概念 1）父容器和子项目 设置了 display:flex 或者 display:inline-flex 的元素将成为父容器 (flex container) ，其内部所有子元素成为子项目...（用于实现水平居中） image.png space-around: 子项目沿主轴均匀分布，位于首尾两端的子项目到父容器的距离是子项目间距的一半（注意 around 的意思 image.png space-between...以一开始是起始端对齐为例，cross-strat 到各个子项目基线的距离可能各不相同，一旦设置了基线对齐，则：距离最大的那个子项目保持与 corss-start 相切，其他子项目的基线均向该项目的基线对齐...image.png space-around：各行沿交叉轴均匀分布，位于首尾两端的行到父容器的距离是行与行距离的一半 image.png space-between: 各行沿交叉轴均匀分布，位于首尾两端的行到父容器相切...image.png flex-grow 属性定义了父容器还有剩余空间时，子项目如何瓜分这些剩余空间。 其值为一个权重（扩张因子），子项目将按照设定的这个权重去瓜分父容器的剩余空间。
小程序 flex 布局快速入门 小程序 flex 布局实现 一、view 默认布局 1.1 flex 布局原理 1.2 flex 父项常见属性 二、使用 flex 设置水平弹性布局 2.1 Flex 布局的方向轴...成为 Flex 项目（Item） 总： 通过给 父容器添加 flex 属性，来控制子盒子的位置和排列方式 1.2 flex 父项常见属性 flex-direction :设置主轴的方向 justify-content...：水平的主轴 和 垂直的交叉轴 Flex 布局默认是水平主轴的 2.1.1 水平主轴布局 row （水平向右） 在 父容器设置 flex-direction的值 flex-direction: row...五、flex 布局之子项属性 5.1 align-self 控制子项在侧轴上的排列方式 可以运行单个项目与其他的项目有不同的对齐方式，可以覆盖 align-items 属性。...默认为 auto，表示继承父类的 align-items 属性，如果没有父元素，则等同于 strtch 像这样，我们设置父亲属性为 align-items: flex-start ，给 4号各格子设置
云服务器
ICP备案
腾讯会议
云直播
实时音视频
