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

上一篇: 前端空间 - 收藏集 - 掘金下一篇:微信小程序教学第四章第三节（含...

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

发布时间：2019-08-05 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了原创：新手布局福音！微信小程序使用flex的一些基础样式属性（二），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

来源：微信小程序使用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样式为：

      
      
      
      
      
.container{
width: 100%;
height: 400px;
background-color: #ccc;
display: flex;/*or inline-flex*/
flex-flow:row wrap;
justify-content:flex-start;
align-items: flex-start;
}
.item{
flex:0 0 30%;
min-height: 100px;
}
align-items: flex-start

align-self: flex-start

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

      
      
      
      
      
.container{
width: 100%;
height: 400px;
background-color: #ccc;
display: flex;/*or inline-flex*/
flex-flow:row wrap;
justify-content:flex-start;
/*align-items: flex-start;*/
}
.item{
flex:0 0 30%;
min-height: 100px;
max-height: 300px;
}
.item：nth-child（2）{
max-height: 200px; 
align-self: flex-start;
}
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项目的时候，结构如此下：

      
      
      PE="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="

" title="" data-original-title="复制">
      
      
<div class="container">
<div class="item1"></div>
</div>
在微信小程序里面可以是这样的结构：

      
      
      
      
      
<view class="container">
<view class="item1"></view>
</view>
给他设定才css样式，

      
      
      
      
      
.container{
width: 100%;
height: 400px;
background-color: #ccc;
display: flex;
flex-flow:row wrap;
justify-content:flex-start;
}
.item1{
background-color: #0074e0;
width: 50px;
height: 50px;
}
显示是这样的：

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

css样式设定如下

      
      
      
      
      
.container{
width: 100%;
height: 400px;
background-color: #ccc;
display: flex;
flex-flow:row wrap;
justify-content:center; /*样式修改在这里*/
align-items: center; /*样式修改在这里*/
}
.item1{
background-color: #0074e0;
width: 100px;
height:100px;
}
现在让他在右下角显示如下：

CSS样式设置：

      
      
      
      
      
.container{
width: 100%;
height: 400px;
background-color: #ccc;
display: flex;
flex-flow:row wrap;
justify-content:flex-end; /*样式修改在这里*/
align-items:flex-end; /*样式修改在这里*/
}
.item1{
background-color: #0074e0;
width: 100px;
height:100px;
}
在加上一个项目：（后面新增不再赘述）

      
      
      
      
      
<div class="container">
<div class="item1"></div>
<div class="item2"></div>
</div>
在微信小程序里面可以是这样的结构：

      
      
      
      
      
<view class="container">
<view class="item1"></view>
<view class="item2"></view>
</view>
左上横排


      
      
      
      
      
.container{
width: 100%;
height: 400px;
background-color: #ccc;
display: flex;
flex-flow:row wrap;
justify-content:flex-start;
align-items:flex-start;
}
水平方向居中


      
      
      
      
      
.container{
width: 100%;
height: 400px;
background-color: #ccc;
display: flex;
flex-flow:row wrap;
justify-content:center;
align-items:flex-start;
}
两个项目不贴在一起


      
      
      
      
      
.container{
width: 100%;
height: 400px;
background-color: #ccc;
display: flex;
flex-flow:row wrap;
justify-content:space-around;
align-items:flex-start;
}
从上面的列子看来，仅仅只是就该某些css的属性，就能达到以前需要花大量css样式的声明才能达到的效果。
跟新。。。写糊涂了。再次感谢指出错误。再来看看下面这个

htML的结构如下：

      
      
      
      
      
<div class="container">
        <div class="row">
                <div class="item1"></div>
                <div class="item2"></div>
                <div class="item1"></div>
        </div>
        <div class="row">
                <div class="item2"></div>
                <div class="item1"></div>
                <div class="item2"></div>
        </div>
        <div class="row">
                <div class="item1"></div>
                <div class="item2"></div>
                <div class="item1"></div>
        </div>
</div>
css样式如下：

      
      
      
      
      
.container{
        width: 400px;
        height: 400px;
        background-color: #ccc;
        display: flex;
        flex-wrap: wrap;
        align-content: space-around;
}
.row{
  display:flex;
  flex-basis: 100%;
  justify-content:space-around;
}
.item1,
.item2{
  width: 100px;
  height:100px;
}
.item1{
  background-color: #0074e0;
}
.item2{
  background-color: #008c00;
}
仅仅只是添加下一条css样式，然后增加项目个数，修改下外框的宽高度就有这样的效果显示。
一些基本的flex布局的样式就说到这里了，这只是一个很小的点，其他的更多的是体现出这布局项目里面的伸缩的计算方式 排列方式，如：order flex-grow flex-shrink flex-basis 等。更多的技巧则需要自己去深层次的探索。这里仅仅只是基础，大神们无视就好。
附加：简单的说下flex-basis: 100%; 这个属性定义了Flex项目在分配Flex容器剩余空间之前的一个默认尺寸。