flex box
黄菊华老师
专注大学生计算机教育和毕业设计辅导
展开
-
微信小程序毕业设计、基于微信棋牌室管理小程序毕设
棋牌室管理小程序毕业设计原创 2021-12-20 09:42:21 · 5783 阅读 · 0 评论 -
微信小程序样式Flex Box精通课程-Flex容器的属性-flex-flow属性
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。.box { flex-flow: <flex-direction> || <flex-wrap>; }原创 2019-01-14 14:20:35 · 1261 阅读 · 0 评论 -
微信小程序样式Flex Box精通课程-Flex容器的属性-justify-content内容对齐(左中右)
justify-content内容对齐基础语法justify-content属性定义了项目在主轴上的对齐方式。(左中右).box { justify-content: flex-start | flex-end | center | space-between | space-around; } flex-start(默认值):左对齐 flex-end:右对齐 cen...原创 2019-01-14 14:20:27 · 10346 阅读 · 0 评论 -
微信小程序样式Flex Box精通课程-Flex容器的属性-align-items(上中下对齐)
align-items(上中下对齐)基础语法align-items属性定义项目在交叉轴上如何对齐。(上中下).box { align-items: flex-start | flex-end | center | baseline | stretch; }它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。 flex-start:交叉轴的起点对齐。 fl...原创 2019-01-14 14:20:19 · 2972 阅读 · 0 评论 -
微信小程序样式Flex Box精通课程-Flex容器的属性-align-content设置各个行的对齐
align-content设置各个行的对齐align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items,但它不是设置弹性子元素的对齐,而是设置各个行的对齐.box { align-items: flex-start | flex-end | center | baseline | stretch; } flex-start:与交叉轴的...原创 2019-01-14 14:20:11 · 1583 阅读 · 0 评论 -
微信小程序样式Flex Box精通课程-Flex项目的属性-order子元素的排序
order子元素的排序基础语法order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。.item { order: <integer>; }小程序应用默认效果效果如图Wxml代码<view class='zong'> <view class='fangxing1'> &原创 2019-01-14 14:20:05 · 1540 阅读 · 0 评论 -
微信小程序样式Flex Box精通课程-Flex项目的属性-flex-grow项目的放大比例
flex-grow项目的放大比例基础语法flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。.item { flex-grow: <number>; /* default 0 */ } 如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空...原创 2019-01-14 14:19:58 · 1709 阅读 · 0 评论 -
微信小程序样式Flex Box精通课程-Flex项目的属性-flex-shrink项目的缩小比例
flex-shrink项目的缩小比例基础语法flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。.item { flex-shrink: <number>; /* default 1 */ } 如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则...原创 2019-01-14 14:19:51 · 1750 阅读 · 0 评论 -
微信小程序样式Flex Box精通课程-Flex项目的属性-flex-basis项目占据的主轴空间
flex-basis项目占据的主轴空间flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。.item { flex-basis: <length> | auto; /* default auto */ } 它可以设为跟width或height属性一样的值...原创 2019-01-14 14:19:45 · 1510 阅读 · 0 评论 -
微信小程序样式Flex Box精通课程-Flex项目的属性-flex综合属性设置
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] } 该属性有两个快捷值:auto (1 1原创 2019-01-14 14:19:38 · 1095 阅读 · 1 评论 -
微信小程序样式Flex Box精通课程-Flex项目的属性-align-self(子元素上中下的设置)
align-self(子元素上中下的设置)基础语法align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。.item { align-self: auto | flex-start | flex-end | center | baseline...原创 2019-01-14 14:19:30 · 1793 阅读 · 0 评论 -
微信小程序样式Flex Box精通课程-Flex项目的属性-margin(对齐和居中)
margin(对齐和居中)默认样式和代码效果如图Wxml代码<view class='zong'> <view class='fangxing1'> <text>01</text> </view&am原创 2019-01-14 14:19:23 · 1585 阅读 · 0 评论 -
Flex Box页面布局实战课程-基本网格布局
最简单的网格布局,就是平均分布。在容器里面平均分配空间,跟上面的骰子布局很像,但是需要设置项目的自动缩放。实战代码<!DOCTYPE><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>基本网格原创 2019-04-09 17:10:31 · 892 阅读 · 0 评论 -
Flex Box页面布局实战课程-百分比布局
某个网格的宽度为固定的百分比,其余网格平均分配剩余的空间。实战效果图实战代码<!DOCTYPE><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>百分比布局</title&a原创 2019-04-09 17:10:41 · 719 阅读 · 0 评论 -
Flex Box页面布局实战课程-固定的底栏
有时,页面内容太少,无法占满一屏的高度,底栏就会抬高到页面的中间。这时可以采用Flex布局,让底栏总是出现在页面的底部。HTML代码如下<body class="Site"> <header>...</header> <main class="Site-content">...</main> <fo原创 2019-04-09 17:10:51 · 637 阅读 · 0 评论 -
Flex Box页面布局实战课程-圣杯布局
圣杯布局(Holy Grail Layout)指的是一种最常见的网站布局。页面从上到下,分成三个部分:头部(header),躯干(body),尾部(footer)。其中躯干又水平分成三栏,从左到右为:导航、主栏、副栏。HTML代码如下<body class="HolyGrail"> <header>...</header> <div clas...原创 2019-04-09 17:11:02 · 883 阅读 · 0 评论 -
微信小程序样式Flex Box精通课程-Flex容器的属性-flex-wrap 项目换行
flex-wrap 项目换行基础语法默认情况下,项目都排在一条线(又称&amp;quot;轴线&amp;quot;)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。.box{ flex-wrap: nowrap | wrap | wrap-reverse; }nowrap(默认):不换行wrap:换行,第一行在上方wrap-reverse:换行,第一行在下方小程序应用flex-wrap: no...原创 2019-01-14 14:20:41 · 3751 阅读 · 0 评论 -
微信小程序样式Flex Box精通课程-Flex容器的属性-flex-direction 项目排列方向
flex-direction 项目排列方向基础语法flex-direction属性决定主轴的方向(即项目的排列方向):(左中右 上中下).box { flex-direction: row | row-reverse | column | column-reverse; } row(默认值):主轴为水平方向,起点在左端。 row-reverse:主轴为水平方向,起点在右端。...原创 2019-01-14 14:20:47 · 3439 阅读 · 1 评论 -
Flex Box页面布局实战课程-百分比布局
效果图代码&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml&qu原创 2019-04-09 17:32:37 · 1195 阅读 · 0 评论 -
Flex Box页面布局实战课程-固定的底栏
效果图代码&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml&am原创 2019-04-09 17:31:57 · 1019 阅读 · 0 评论 -
Flex Box页面布局实战课程-圣杯布局
效果图代码&lt;!DOCTYPE&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;&lt;title&gt;原创 2019-04-09 17:31:52 · 1034 阅读 · 0 评论 -
Flex Box页面布局实战课程-输入框的布局
效果图代码&lt;!DOCTYPE&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;&lt;title&gt;原创 2019-04-09 17:31:33 · 1062 阅读 · 0 评论 -
Flex Box页面布局实战课程-悬挂式布局
效果图代码&lt;!DOCTYPE&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;&lt;title&gt;原创 2019-04-09 17:31:23 · 1273 阅读 · 0 评论 -
Flex Box页面布局实战课程-流式布局
效果图代码&lt;!DOCTYPE&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;&lt;title&gt;原创 2019-04-09 17:31:16 · 998 阅读 · 0 评论 -
Flex Box页面布局实战课程-九宫格布局
效果图代码&lt;!DOCTYPE&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;&lt;title&gt;原创 2019-04-09 17:30:23 · 1310 阅读 · 0 评论 -
Flex Box页面布局实战课程-九宫格布局-一个项目的布局(按行row排列)
效果图代码&lt;!DOCTYPE&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;&lt;title&gt;原创 2019-04-09 17:30:08 · 1060 阅读 · 0 评论 -
Flex Box页面布局实战课程-九宫格布局-一个项目的布局(按列column排列)
效果图代码&lt;!DOCTYPE&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;&lt;title&gt;原创 2019-04-09 17:29:45 · 1037 阅读 · 0 评论 -
Flex Box页面布局实战课程-九宫格布局-八个项目的布局
效果图代码&lt;!DOCTYPE&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;&lt;title&gt;原创 2019-04-09 17:31:03 · 1463 阅读 · 0 评论 -
Flex Box页面布局实战课程-九宫格布局-七个项目的布局
效果图代码&lt;!DOCTYPE&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;&lt;title&gt;原创 2019-04-09 17:29:28 · 1147 阅读 · 0 评论 -
Flex Box页面布局实战课程-九宫格布局-五个项目的布局
效果图代码&lt;!DOCTYPE&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;&lt;title&gt;原创 2019-04-09 17:29:14 · 1177 阅读 · 0 评论 -
Flex Box页面布局实战课程-九宫格布局-三个项目的布局
效果图代码&lt;!DOCTYPE&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;&lt;title&gt;原创 2019-04-09 17:30:54 · 1014 阅读 · 0 评论 -
微信小程序-Flex 布局是什么
Flex 布局是什么Flex 是 Flexible Box 的缩写,意为&amp;quot;弹性布局&amp;quot;,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ display: flex; } 行内元素也可以使用 Flex 布局。.box{ display: inline-flex; } Webkit 内核的浏览器,必须加上-webkit前缀。.box{ displa...原创 2019-01-14 14:18:51 · 1770 阅读 · 4 评论 -
微信小程序-Flex入门实战
网页代码&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html&amp;amp;gt;&amp;amp;lt;head&amp;amp;gt;&amp;amp;lt;meta http-equiv=&amp;quot;Content-Type&amp;quot; content=&amp;q原创 2019-01-14 14:20:54 · 1205 阅读 · 0 评论 -
Flex Box页面布局实战课程-基本网格布局
效果图黄菊华老师的课程和资料代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">&l...原创 2019-04-03 15:02:00 · 1007 阅读 · 0 评论