flex box入门到精通
关注
分享
扫一扫
讲解flex box的基本语法，讲解flex box布局在微信小程序中的应用，讲解flex box的布局实战
黄菊华老师
专注大学生计算机教育和毕业设计辅导
展开
-
微信小程序-Flex入门实战
网页代码<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q原创 2019-01-14 14:20:54 · 1267 阅读 · 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 · 3524 阅读 · 1 评论 -
微信小程序样式Flex Box精通课程-Flex容器的属性-flex-wrap 项目换行
flex-wrap 项目换行基础语法默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。.box{ flex-wrap: nowrap | wrap | wrap-reverse; }nowrap（默认）：不换行wrap：换行，第一行在上方wrap-reverse：换行，第一行在下方小程序应用flex-wrap: no...原创 2019-01-14 14:20:41 · 3834 阅读 · 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 · 1350 阅读 · 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 · 10429 阅读 · 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 · 3052 阅读 · 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 · 1665 阅读 · 0 评论 -
微信小程序样式Flex Box精通课程-Flex项目的属性-order子元素的排序
order子元素的排序基础语法order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。.item { order: <integer>; }小程序应用默认效果效果如图Wxml代码<view class='zong'> <view class='fangxing1'> &原创 2019-01-14 14:20:05 · 1615 阅读 · 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 · 1780 阅读 · 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 · 1835 阅读 · 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 · 1588 阅读 · 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 · 1167 阅读 · 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 · 1841 阅读 · 0 评论 -
微信小程序样式Flex Box精通课程-Flex项目的属性-margin（对齐和居中）
margin（对齐和居中）默认样式和代码效果如图Wxml代码<view class='zong'> <view class='fangxing1'> <text>01</text> </view&am原创 2019-01-14 14:19:23 · 1659 阅读 · 0 评论 -
微信小程序-Flex 布局是什么
Flex 布局是什么Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ display: flex; } 行内元素也可以使用 Flex 布局。.box{ display: inline-flex; } Webkit 内核的浏览器，必须加上-webkit前缀。.box{ displa...原创 2019-01-14 14:18:51 · 1841 阅读 · 4 评论