classic.wxml
<view class='container'>
<view class='chunk color1'>1</view>
<view class='chunk color2'>2</view>
<view class='chunk color3'>3</view>
</view>
classic.wxss
/* pages/classic/classic.wxss */
.chunk{
/*行内元素*/
/* display:inline-block; */
/* 已经放到 弹性盒子中,你再去指定样式已经是无效了 */
/* display:block; */
width: 150px;
height: 100px;
}
/* 如果把几个块状元素放在弹性盒子中,那么它们的块状元素的特性就会消除了 */
.container{
display: flex;
/* 设置 column 将会实现 垂直排列的效果, 设置 row 将会实现 水平排列的效果 */
/* 当你不去设置 flex-direction 的时候,会有一个默认值,此时是水平排列 */
/* flex-direction: row; */
/* 实现行 123 => 321 row-reverse, 实现列 123 => 321 column-reverse */
/* qusetion: 为啥 column-reverse 不是从下往上排,而 row-reverse 是从右向左排 */
/* (1) 因为 我们在容器中只有这三个方块的高度; 而容器中的宽度是大于三个方块的宽度的
(2) 高度是自适应的。
*/
/* 关注点:
view 这个容器本身是自适应的, 100% height
*/
/* center: 居中; space-between: (flex-direction: row)水平方向实现平均分布
space-around: 实现 等距 分布
*/
/* 主轴 取决于 flex-direction justify-content
交叉轴 剩下的就是 align-items
交叉轴的特性 : stretch / baseline
*/
/* 高度注释之后, 会自适应。 align-items: stretch 会呈现拉伸的效果,拉伸到整个容器的高度为止
baseline: 将以第一个子元素为基线,之后的每个子元素都以该文字的子元素基线为准
*/
/* 在你设置 flex 盒子之后, 如果本身的宽度大于页面的宽度,(在不设置换行的情况下)那么会把页面的宽度进行 均分的处理*/
/* height: 400px; */
/* 在高度 有富余的情况下, 你设置 flex-wrap: wrap 换行之后,会出现居中的情况,那么怎么来改变这种情况呢?
我们是不是可以从高度下手呢?
*/
height: 200px;
flex-direction: row-reverse;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
background-color: #999999;
}
/* flex flexible box 弹性盒子*/
/* flex container flex item */
.color1{
background-color: brown
}
.color2{
background-color: blue
}
.color3{
background-color: gainsboro
}