设为首页收藏本站
开启辅助访问

在路上

 找回密码
 立即注册
在路上 › 站点首页 ›学习 › 查看内容

原创：新手布局福音！微信小程序使用flex的一些基础样式属性（二）

2016-12-16 12:53| 发布者: zhangjf| 查看: 500| 评论: 0

摘要: 来源：微信小程序使用flex的一些基础样式属性作者：Nazi 接下来 再介绍两个属性，align-items 和 align-self align-items: flex-start | flex-end | center | baseline | stretch; align-self: auto | flex-start | ...

来源：微信小程序使用flex的一些基础样式属性
作者：Nazi

接下来 再介绍两个属性，align-items 和 align-self

align-items: flex-start | flex-end | center | baseline | stretch;

align-self: auto | flex-start | flex-end | center | baseline | stretch;

align-items是在所有项目上的对齐方式。

align-self是在单独的项目上的对齐方式。

不同属性值下的表现：(横轴上规定的是 flex-start)

css样式为：

  1. .container{
  2. width: 100%;
  3. height: 400px;
  4. background-color: #ccc;
  5. display: flex;/*or inline-flex*/
  6. flex-flow:row wrap;
  7. justify-content:flex-start;
  8. align-items: flex-start;
  9. }
  10. .item{
  11. flex:0 0 30%;
  12. min-height: 100px;
  13. }
复制代码

align-items: flex-start

align-self: flex-start

修改样式：（后面的修改下同）

  1. .container{
  2. width: 100%;
  3. height: 400px;
  4. background-color: #ccc;
  5. display: flex;/*or inline-flex*/
  6. flex-flow:row wrap;
  7. justify-content:flex-start;
  8. /*align-items: flex-start;*/
  9. }
  10. .item{
  11. flex:0 0 30%;
  12. min-height: 100px;
  13. max-height: 300px;
  14. }
  15. .item：nth-child（2）{
  16. max-height: 200px;
  17. align-self: flex-start;
  18. }
复制代码

align-items: flex-end

align-self: flex-end

align-items: center;

align-self: center;

align-items:baseline;

align-self:baseline;(为了更好的能看出效果这里限制所有的项目最小高度为100px最大高度不定)

align-items: stretch; / align-self: stretch;

侧轴的长度属性为auto 这个值会使外边距盒子的尺寸按照min/max 的长度接近所在行的尺寸

另外：float clear vertical-align 在flex布局里里面是无效的。

属性介绍到这里，就来先看看这个布局的灵活性是如何体现的。

当只有一个flex项目的时候，结构如此下：

  1. <div class="container">
  2. <div class="item1"></div>
  3. </div>
复制代码

在微信小程序里面可以是这样的结构：

  1. <view class="container">
  2. <view class="item1"></view>
  3. </view>
复制代码

给他设定才css样式，

  1. .container{
  2. width: 100%;
  3. height: 400px;
  4. background-color: #ccc;
  5. display: flex;
  6. flex-flow:row wrap;
  7. justify-content:flex-start;
  8. }
  9. .item1{
  10. background-color: #0074e0;
  11. width: 50px;
  12. height: 50px;
  13. }
复制代码

显示是这样的：

但是要让他完全居中的样子，比如：

css样式设定如下

  1. .container{
  2. width: 100%;
  3. height: 400px;
  4. background-color: #ccc;
  5. display: flex;
  6. flex-flow:row wrap;
  7. justify-content:center; /*样式修改在这里*/
  8. align-items: center; /*样式修改在这里*/
  9. }
  10. .item1{
  11. background-color: #0074e0;
  12. width: 100px;
  13. height:100px;
  14. }
复制代码

现在让他在右下角显示如下：

CSS样式设置：

  1. .container{
  2. width: 100%;
  3. height: 400px;
  4. background-color: #ccc;
  5. display: flex;
  6. flex-flow:row wrap;
  7. justify-content:flex-end; /*样式修改在这里*/
  8. align-items:flex-end; /*样式修改在这里*/
  9. }
  10. .item1{
  11. background-color: #0074e0;
  12. width: 100px;
  13. height:100px;
  14. }
复制代码

在加上一个项目：（后面新增不再赘述）

  1. <div class="container">
  2. <div class="item1"></div>
  3. <div class="item2"></div>
  4. </div>
复制代码

在微信小程序里面可以是这样的结构：

  1. <view class="container">
  2. <view class="item1"></view>
  3. <view class="item2"></view>
  4. </view>
复制代码

左上横排

  1. .container{
  2. width: 100%;
  3. height: 400px;
  4. background-color: #ccc;
  5. display: flex;
  6. flex-flow:row wrap;
  7. justify-content:flex-start;
  8. align-items:flex-start;
  9. }
复制代码

水平方向居中

  1. .container{
  2. width: 100%;
  3. height: 400px;
  4. background-color: #ccc;
  5. display: flex;
  6. flex-flow:row wrap;
  7. justify-content:center;
  8. align-items:flex-start;
  9. }
复制代码

两个项目不贴在一起

  1. .container{
  2. width: 100%;
  3. height: 400px;
  4. background-color: #ccc;
  5. display: flex;
  6. flex-flow:row wrap;
  7. justify-content:space-around;
  8. align-items:flex-start;
  9. }
复制代码

从上面的列子看来，仅仅只是就该某些css的属性，就能达到以前需要花大量css样式的声明才能达到的效果。
跟新。。。写糊涂了。再次感谢指出错误。再来看看下面这个

html的结构如下：

  1. <div class="container">
  2. <div class="row">
  3. <div class="item1"></div>
  4. <div class="item2"></div>
  5. <div class="item1"></div>
  6. </div>
  7. <div class="row">
  8. <div class="item2"></div>
  9. <div class="item1"></div>
  10. <div class="item2"></div>
  11. </div>
  12. <div class="row">
  13. <div class="item1"></div>
  14. <div class="item2"></div>
  15. <div class="item1"></div>
  16. </div>
  17. </div>
复制代码

css样式如下：

  1. .container{
  2. width: 400px;
  3. height: 400px;
  4. background-color: #ccc;
  5. display: flex;
  6. flex-wrap: wrap;
  7. align-content: space-around;
  8. }
  9. .row{
  10. display:flex;
  11. flex-basis: 100%;
  12. justify-content:space-around;
  13. }
  14. .item1,
  15. .item2{
  16. width: 100px;
  17. height:100px;
  18. }
  19. .item1{
  20. background-color: #0074e0;
  21. }
  22. .item2{
  23. background-color: #008c00;
  24. }
复制代码

仅仅只是添加下一条css样式，然后增加项目个数，修改下外框的宽高度就有这样的效果显示。

一些基本的flex布局的样式就说到这里了，这只是一个很小的点，其他的更多的是体现出这布局项目里面的伸缩的计算方式 排列方式，如：order flex-grow flex-shrink flex-basis 等。更多的技巧则需要自己去深层次的探索。这里仅仅只是基础，大神们无视就好。

附加：简单的说下flex-basis: 100%; 这个属性定义了Flex项目在分配Flex容器剩余空间之前的一个默认尺寸。

收藏 邀请
上一篇：yaml转java bean下一篇：Android安全之Intent Scheme Url攻击

最新评论

相关分类

小黑屋|在路上 ( 蜀ICP备15035742号-1 )  

;

GMT+8, 2025-7-7 18:23

Copyright 2015-2025 djqfx

返回顶部