day 3：scroll-view（视图容器）——border属性（边框样式）、弹性盒模型display-flex、margin属性、flex属性、横向布局、纵向布局

微信小程序学习day 3：scroll-view（视图容器）——border属性（边框样式）、弹性盒模型display-flex、margin属性、flex属性、横向布局、纵向布局

一、视图容器——scroll-view

1、在进行scroll-view学习之前，应先了解：

1）border属性（边框样式）

格式：border ：1px solid red
其中1px可以换成任意像素值，red可以换成任意颜色

2）弹性盒模型display-flex

应用于容器中，可应用于行内元素，通俗解释就是使得元素显示在一行
具体看代码展示，注意为了方便查看这里将会加上大小、颜色进行区分！
下面展示一些 代码片。

// demo.wxml
<view class="out">
    <view class="box">111</view>
    <view class="box">222</view>
    <view class="box">333</view>
    <view class="box">444</view>
    <view class="box">555</view>
</view>

未进行弹性盒模型的代码片

// demo.wxss
.out{border: 1px solid green;}
.box{width: 100px;height: 100px;background-color: pink;}

如图所示：

进行了弹性盒模型的代码片

// demo.wxss
.out{border: 1px solid green;display:flex;}
.box{width: 100px;height: 100px;background-color: pink;}

如图所示：

1. FFFFFF

,t_70,g_se,x_16)

3）flex-wrap：用于指定弹性盒子的子元素的换行模式

1. nowrap：为默认，弹性容器为单行，容易发生溢出
2. wrap：为多行，溢出部分会被放置到新行
3. wrap：reverse：溢出部分于wrap放置位置相反，即换行时第一行会换到下方
   下面展示一些 代码片。

// demo.wxss
.out{border: 1px solid green;display: flex;flex-wrap: nowrap;}

4)margin属性：表示边距

4. 整体表示法：margin：10px 10px 10px 10px，分别表示上下左右的边距
5. 分步表示法：margin-top——上边距、margin-right——右边距、margin-bottom——下边距、margin-left——左边距
   下面展示一些 代码片。

// demo.wxss
.out{border: 1px solid green;display: flex;flex-wrap: nowrap;}
.box{width: 100px;height: 100px;background-color: pink;margin: 2px 2px 2px 2px;}

如图所示（是整体表示的方法）：

4）flex属性——针对于项目属性：是flex-grow、flex-shrink、flex-basis的简写。其默认值为 0 1 auto，后面两项属性是可以进行更改选择的

1. flex-grow：项目放大比例，默认为0
2. flex-shrink：项目缩小比例，默认为1
3. felx-basis：项目占据空间，默认为auto

下面展示一些 代码片。

// demo.wxss
.out{border: 1px solid green;display: flex;flex-wrap: nowrap;}
.box{width: 100px;height: 100px;background-color: pink;margin: 2px 2px 2px 2px;flex: 0 0 100px;}

如图所示：

2、scroll-view：分为横向布局、纵向布局

1）依据以上知识，进行横向布局

下面展示一些 代码片。

// news.wxml
<!-- 横向滑动 -->
<scroll-view >
  <view class="out">
    <view class="box">111</view>
    <view class="box">222</view>
    <view class="box">333</view>
    <view class="box">444</view>
    <view class="box">555</view>
  </view>
</scroll-view>

// news.wxss
/* 横向布局 */
.out{border: 1px solid green;display:flex;flex-wrap: nowrap;}
.box{width: 100px;height: 100px;background-color: pink;margin:2px 2px 2px 2px;flex: 0 0 100px;}

如图所示：

2）scroll-x ：允许横向滚动

添加后，便可拖动进行显示

// news.wxml
<!-- 横向滑动 -->
<scroll-view  scroll-x>
  <view class="out">
    <view class="box">111</view>
    <view class="box">222</view>
    <view class="box">333</view>
    <view class="box">444</view>
    <view class="box">555</view>
  </view>
</scroll-view>

如图所示：

3）scroll-left：设置横向滚动条位置

// news.wxml
<!-- 横向滑动 -->
<scroll-view  scroll-x scroll-left="10px" >
  <view class="out">
    <view class="box">111</view>
    <view class="box">222</view>
    <view class="box">333</view>
    <view class="box">444</view>
    <view class="box">555</view>
  </view>
</scroll-view>

如图所示：

4）设置纵向滚动布局

直接参考代码块，异曲同工！！！
下面展示一些 代码片。

// news.wxml
<!-- 竖向滑动 -->
<scroll-view class="scroll" scroll-y>
  <view>
    <view class="box1">111</view>
    <view class="box1">222</view>
    <view class="box1">333</view>
    <view class="box1">444</view>
    <view class="box1">555</view>
  </view>
</scroll-view>

未进行弹性盒模型的代码片

// news.wxss
/* 竖向布局 */
.scroll{height: 350px;}
.box1{width: 100%;height: 100px;background-color: indianred;margin-bottom: 2px;}

如图所示：