04 2019 档案
摘要：网格容器 VS Flex容器 网格属性 VS Flex属性
阅读全文
摘要：网格轨道对齐可以相对于网格容器行和列轴。 align-content指定网格轨道沿着行轴对齐方式；justify-content指定网格轨道沿着列轴对齐方式。它们支持下面属性： normal start end center stretch space-around space-between sp
阅读全文
摘要：CSS的Box Alignment Module补充了网格项目沿着网格行或列轴对齐方式。 1 <view class="grid"> 2 <view class='item1'>1</view> 3 <!-- <view class='item'>2</view> 4 <view class='it
阅读全文
摘要：网格项目可以具有层级和堆栈，必要时可能通过z-index属性来指定. 1.在这个例子中，item1和item2的开始行都是1，item1列的开始是1，item2列的开始是2，并且它们都跨越两列。两个网格项目都是由网格线数字定位，结果这两个网格项目重叠了。 默认情况下，item2在item1上面，但是
阅读全文
摘要：1.隐式的指定网格线反向指定了隐式的网格区域名称，命名的网格区域隐式的命名了网格线名称. 指定网格区域会给网格区域边线添加隐式的网格线名称。这些网格线的命名是基于网格区域来命名，只是在网格区域名称的后面添加后缀-start或-end. 1 <view class="grid"> 2 <view cl
阅读全文
摘要：通常可以将网格线命名成任何你想命名的名称，如果网格线名称添加-start和-end的后缀，其实也隐式的创建一个网格区域，可以用来设置网格项目的位置. 在这个示例中，行和列都具有inner-start和inner-end网格线名称，同时也对应的创建一个隐式网格区域名称inner 1 <view cla
阅读全文
摘要：当网格项目确认在显式网格之外时就会创建隐性网格，当没有足够的空间或者显式的网格轨道来设置网格项目，此时网格项目就会自动创建隐式网格. 隐式网格可以定义：grid-auto-rows、grid-auto-columns和grid-auto-flow属性 1.在这个例子中我们只定义了一行（轨道），所以i
阅读全文
摘要：1.像网格线名称一样，网格区域的名称也可以使用grid-template-areas属性来命名。引用网格区域名称也可以设置网格项目位置. 设置网格区域的名称应该放置在单引号或双引号内，每个名称由一个空格符分开. 网格区域的名称，每组（单引号或双引号内的网格区域名称）定义了网格的一行，每个网格区域名称
阅读全文
摘要：1.使用repeat()函数可以给网格线分配相同的名称。这可以节省一定的时间 使用repeat()函数可以给网格线命名，这也导致多个网格线具有相同的网格线名称。 相同网格线名称指定网格线的位置和名称，也且会自动在网格线名称后面添加对应的数字，使其网格线名称也是唯一的标识符。 1 <view clas
阅读全文
摘要：使用网格线名称设置网格项目位置和使用网格线号码设置网格项目位置类似. 1.引用网格线名称的时候不应该带方括号 1 <view class="grid"> 2 <view class='item1'>1</view> 3 <view class='item'>2</view> 4 <view clas
阅读全文
摘要：通过grid-template-rows和grid-template-columns定义网格时，网格线可以被命名。网格线名称也可以设置网格项目位置。 grid-template-rows和grid-template-columns定义你的网格，将名称分配给网格线。 定义网格线名称时需要避免使用规范中
阅读全文
摘要：默认情况下网格项目跨度只有一个列和行，但可以跨越多个行和列。 1.可以通过设置grid-column-end和grid-column-start距离多个网络线号实现多个列跨越. 1 <view class="grid"> 2 <view class='item1'>1</view> 3 <view
阅读全文
摘要：网格线实际上是代表线的开始、结束. 两者之间就是网格列或行. 以下css仅对子元素生效 ,具体详情可以看后面示例 以上css会生成两列三行的网格创建三条列网格线和四条行网格线 . 如果一个网格项目跨度只有一行或一列，那么grid-row-end和grid-column-end不是必需的 注意以下几点
阅读全文
摘要：使用repeat()可以创建重复的网格轨道。这个适用于创建相等尺寸的网格项目和多个网格项目 repeat()也可以用在轨道列表中。 在这个示例中，第一列和最后一列的宽度都是30px，并且它们之间有另列三列，这三列是通过repeat()来创建的，而且每列的列宽是1fr（1fr = (网格宽度 - 30
阅读全文
摘要：可以通过minmax()函数来创建网格轨道的最小或最大尺寸。 minmax()函数接受两个参数： 第一个参数定义网格轨道的最小值 第二个参数定义网格轨道的最大值 可以接受任何长度值，也接受auto值。auto值允许网格轨道基于内容的尺寸拉伸或挤压。 在这个示例中，第一行的高度最小值是100px，但其
阅读全文
摘要：显式网格布局包含：行、列 列 grid-template-columns 行 grid-template-rows 以上行、列网格可以搭配使用！ 如果未定义grid-template-columns或grid-template-rows，则宽高根据自身内容. 也可以采用等份计算单位"fr" (一旦采
阅读全文
摘要：grid-gap默认还有两个参数 如果grid写默认方式，则行、列都会使用相同的单位 如果grid写两个参数，则行和列各自生效 如果grid写行方式，则仅有行生效 如果grid写列方式，则仅有列生效 1 page { 2 color: #fff; 3 } 4 5 .grid { 6 padding:
阅读全文
摘要：Grid有三个参数 目前介绍以下两种：grid、inline-grid grid是根据内容来收缩的，你可以试试在子元素使用内边距(padding) 或者 外边距(margin) inline-grid和inline-block会有什么联系呢？ inline-block可以设置宽高，且为行内块
阅读全文
摘要：Flexbox布局（Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局（基于一维），即使他们的大小是未知或者是动态的。（这里我们称为Flex）。 Flex布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序)，以最佳方式填充可用空间（主要是为了
阅读全文
摘要：svg替代iconfont的好处（无论是基于Vue、Jquery），都推荐svg http://www.woshipm.com/pd/463866.html svg图标库,svg图标在线制作 https://icomoon.io/app/#/select svg体积优化 https://jakear
阅读全文
