CSS的Box Alignment Module补充了网格项目沿着网格行或列轴对齐方式。

 <view class="grid">
<view class='item1'>1</view>
<!-- <view class='item'>2</view>
<view class='item'>3</view>
<view class='item'>4</view>
<view class='item'>5</view>
<view class='item'>6</view>
<view class='item'>7</view>
<view class='item'>8</view>
<view class='item'>9</view> -->
</view>
 page {
color: #fff;
font-size: 16px;
} .grid {
/* padding: 1%; */
display: grid;
grid-template-rows: 80px 80px;
grid-template-columns: 1fr 1fr;
grid-template-areas: "content content" "content content";
border: 1px solid #ccc;
} .grid {
justify-items: start;
/* justify-items: end; */
/* justify-items: center; */
/* justify-items: stretch; */
} .item1 {
grid-area: content;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #fff;
border-radius: 0.2rem;
font-size: 0.8em;
min-height: 3rem;
padding: 0.75rem;
color: #f0f0f3;
/* background-color: #e91e63; */
} .item {
text-align: center;
background-color: #d94a6a;
} .item1 {
/* text-align: center; */
background-color: #1aa034;
}

justify-itemsjustify-self指定网格项目沿着行轴对齐方式;align-itemsalign-self指定网格项目沿着列轴对齐方式。

justify-itemsalign-items应用在网格容器上,它们的属性值有:

  • auto
  • normal
  • start
  • end
  • center
  • stretch
  • baseline
  • first baseline
  • last baseline

1. justify-items

  • stretch

2. align-items

align-items: stretch(网格项目横跨整个列)

网格项目定位在网格行和列的中间(实现水平垂直居中)。

  

 <view class="grid">
<view class='item1'>1</view>
<!-- <view class='item'>2</view>
<view class='item'>3</view>
<view class='item'>4</view>
<view class='item'>5</view>
<view class='item'>6</view>
<view class='item'>7</view>
<view class='item'>8</view>
<view class='item'>9</view> -->
</view>
 page {
color: #fff;
font-size: 16px;
} .grid {
/* padding: 1%; */
display: grid;
grid-template-rows: 80px 80px;
grid-template-columns: 1fr 1fr;
grid-template-areas: "content content" "content content";
border: 1px solid #ccc;
} .grid {
justify-items: center;
align-items: center;
/* align-items: start; */
/* align-items: center; */
/* align-items: end; */
/* justify-items: start; */
/* justify-items: end; */
/* justify-items: center; */
/* justify-items: stretch; */
} .item1 {
grid-area: content;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #fff;
border-radius: 0.2rem;
font-size: 0.8em;
min-height: 3rem;
padding: 0.75rem;
color: #f0f0f3;
/* background-color: #e91e63; */
} .item {
text-align: center;
background-color: #d94a6a;
} .item1 {
/* text-align: center; */
background-color: #1aa034;
}
  justify-items: center;
align-items: center;

  

 

grid - 网格项目对齐方式(Box Alignment)的更多相关文章

  1. grid - 网格轨道对齐方式

    网格轨道对齐可以相对于网格容器行和列轴. align-content指定网格轨道沿着行轴对齐方式:justify-content指定网格轨道沿着列轴对齐方式.它们支持下面属性: normal star ...

  2. grid - 网格项目层级

    网格项目可以具有层级和堆栈,必要时可能通过z-index属性来指定. 1.在这个例子中,item1和item2的开始行都是1,item1列的开始是1,item2列的开始是2,并且它们都跨越两列.两个网 ...

  3. grid - 网格项目跨行或跨列

    默认情况下网格项目跨度只有一个列和行,但可以跨越多个行和列. 1.可以通过设置grid-column-end和grid-column-start距离多个网络线号实现多个列跨越. <view cl ...

  4. Grid 网格布局

    CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统. 这是一个二维系统,这意味着它可以同时处理列和行,不像 flexbox 那样主要是一维系统. 你可以通过将CSS规则应用于父元素 ...

  5. grid - 通过网格区域命名和定位网格项目

    1.像网格线名称一样,网格区域的名称也可以使用grid-template-areas属性来命名.引用网格区域名称也可以设置网格项目位置. 设置网格区域的名称应该放置在单引号或双引号内,每个名称由一个空 ...

  6. grid - 使用相同的名称命名网格线和设置网格项目位置

    1.使用repeat()函数可以给网格线分配相同的名称.这可以节省一定的时间 使用repeat()函数可以给网格线命名,这也导致多个网格线具有相同的网格线名称. 相同网格线名称指定网格线的位置和名称, ...

  7. grid - 通过网格线名称设置网格项目位置

    使用网格线名称设置网格项目位置和使用网格线号码设置网格项目位置类似. 1.引用网格线名称的时候不应该带方括号 <view class="grid"> <view ...

  8. grid - 通过网格线号码来定位网格项目

    网格线实际上是代表线的开始.结束. 两者之间就是网格列或行. 以下css仅对子元素生效 ,具体详情可以看后面示例 grid-row-start: 2; grid-row-end: 3; grid-co ...

  9. grid网格布局使用

    定义 grid布局是指对网页进行划分成一个一个网格,然后根据自己的要求,可以任意组合. 以前写类似的功能,很麻烦,需要写很多的CSS去控制,有了grid就很方便了,可以随意进行组合. 跟flex有很多 ...

随机推荐

  1. rem+media+jquery布局结局方案

    ; ; } ? ; + 'px'; } document.addEventListener('DOMContentLoaded', callback); window.addEventListener ...

  2. 更新pip和setuptools

    python -m pip install -U pip setuptools

  3. CSS3 animation 练习

    css3 的动画让 html 页面变得生机勃勃,但是如何用好动画是一门艺术,接下来我来以一个demo为例,来练习css3 animation. 我们先详细了解一下animation 这个属性. ani ...

  4. Linux学习笔记 3 权限篇

    chmod 查看命令 ls -l -  rwx             r_x              r_x            4              user      grop    ...

  5. web服务搭建

  6. EF Core使用CodeFirst在MySql中创建新数据库以及已有的Mysql数据库如何使用DB First生成域模型

    官方教程:https://docs.microsoft.com/en-us/aspnet/core/data/?view=aspnetcore-2.1 使用EF CodeFirst在MySql中创建新 ...

  7. Android Stuido 方法参数 p0,p1

    Android Stuido 方法参数 p0,p1 参考文献 https://stackoverflow.com/questions/49219439/incorrect-variable-names ...

  8. [iOS]应用与视图的生命周期和方法调用

    1.应用程序的生命周期: AppDelegate类在应用生命周期的不同阶 会回调不同的方法. 视图push到了子界面,然后子界面pop回原界面的时候,会启用viewWillAppear以及之后的几个生 ...

  9. (Android系统目录结构)/mnt/sdcard 和 sdcard 的区别

    mnt/是Unix/Linux系统下外部设备的专用目录,Linux默认挂载外部设备都会挂载到这个目录;如将SD卡挂载后,会生成目录:/mnt/sdcard/. shell@aeon6735m_65c_ ...

  10. 轻松掌握Redux-Action使用方法

    轻松掌握Redux-Action使用方法 Redux-Action主要有两个方法,createAction和createAction,只要掌握了这两个方法就会了redux-action的使用. cre ...