零基础学做网站培训介绍

当前位置:

微信小程序Flex布局属性详解

以下为学做网站论坛关于“微信小程序Flex布局属性详解”讲解视频教程。

微信小程序Flex布局属性有以下:

justify-content:设置弹性盒子元素在主轴(横轴)方向上的对齐方式

它有以下的几个值:

  • flex-start默认值。项目位于容器的开头。
  • flex-end项目位于容器的结尾。
  • center项目位于容器的中心。
  • space-between项目位于各行之间留有空白的容器内。
  • space-around项目位于各行之前、之间、之后都留有空白的容器内。
  • flex-wrap:wrap 允许换行

align-items:定义项目在交叉轴上如何对齐。

  • flex-start:交叉轴的起点对齐。
  • flex-end:交叉轴的终点对齐。
  • center:交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

除此之外,还有以下的属性:

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

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

4.1 order属性

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

.item {
order: <integer>;
}

4.2 flex-grow属性

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

.item {
flex-grow: <number>; /* default 0 */
}

如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

4.3 flex-shrink属性

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

.item {
flex-shrink: <number>; /* default 1 */
}

如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

负值对该属性无效。

4.4 flex-basis属性

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

.item {
flex-basis: <length> | auto; /* default auto */
}

它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。

4.5 flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值: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;
}

该属性可能取6个值,除了auto,其他都与align-items属性都一致。

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 如何注册微信小程序 图文教程 (110329 次浏览)
    要发布自己的微信小程序,首先需要在微信公众平台上注册微信小程序。注册步骤 登录“微信公众平台”,如果还没有账号,可以先注册一个。登录地址
  • 微信小程序开发授权 图文教程 (111803 次浏览)
    我们在“微信公众平台”注册好了小程序之后,接下来的工作就是开发微信小程序了。开发微信小程序前,我们需要进行授权。方法/步骤 点击“细致微信
  • 微信小程序制作步骤 图文教程 (111453 次浏览)
    上一步,我们完成了微信小程序的授权。这一步,就是使用我们购买的“微信小程序细致制作工具”,进行小程序的制作了。方法/步骤 点击左侧菜单的“
  • Flex布局制作菜单导航 图文教程 (1190 次浏览)
    制作菜单导航要求是每行5个栏目,总共二行,这就需要使用Flex布局制作菜单导航。课程中使用的属性: font-size:字体大小 margin:外边距
  • 微信小程序Flex布局属性有以下:justify-content:设置弹性盒子元素在主轴(横轴)方向上的对齐方式它有以下的几个值: flex-start默
  • flex布局是弹性盒模型,可以轻松的包集“自适应”浏览器窗的流动布局。它是csS3中为display新添加的值类型。用法:display: flex; 定义一个flex
  • CSS网页布局中字体样式 图文教程 (111799 次浏览)
    在网页制作时,我们需要控制网页中字体的大小,颜色,粗细等,通过情况下,我们会使用以下的CSS样式去控制这个字体的样式:字体的大小:font-size
  • 问:老师,我在divcss制作一个网页布局时div总是跑出来,怎么解决,代码如下:[cce]<div id="zhongjian"><div class="chebian"&
  • 什么是HTML属性每个HTML元素都可以给它添加一些属性,让它成为我们做网站时需要的样子。例如一段文字,我们可以给它添加属性,使这段文字变成红色,
  • 对于使用DEDECMS织梦建网站的同学们来说,网站优化时网站的图片ALT信息不可或缺。如果网站图片海量的话,手工的添加图片ALT信息费时费力。为
  • 问:老师你好,我想问一下,我做网站时,经常上传图片时,由于图片的尺寸太大,导致整个网页的版面被撑变形,每次上传图片时都要把图片通过photoshop
  • 网页http请求头部信息是网页代码零入门知识,网页http请求头部信息解释:1. Accept:告诉WEB服务器自己接受什么介质类型,*/* 表示任意类型,type/
  • template/default/common 模板公共文件夹,全局相关|--block_forumtree.htm 树形论坛版块分支js文件|--block_thread.htm 特殊主题的风格模块文
  • iframe标签用法详解 图文教程 (111342 次浏览)
    1、iframe 定义和用法iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。HTML 与 XHTML 之间的差异在 HTML 4.1 Strict DTD