小程序基础布局作业--筛子筛子

小程序基础布局作业–筛子

wxml

<view class="father">
  <view class="box1">
    <view class="point"></view>
  </view>
  <view class="box2">
    <view class="point"></view>
    <view class="point"></view>
  </view>
</view>
<view class="father">
  <view class="box3">
    <view style="padding-left:4px">
      <view class="point" ></view>
    </view>
    <view>
      <view class="point"></view>
    </view>
    <view style="padding-right:4px">
      <view class="point" ></view>
    </view>
  </view>
  <view class="box4">
    <view>
      <view class="point"></view>
      <view class="point"></view>
    </view>
    <view>
      <view class="point"></view>
      <view class="point"></view>
    </view>
  </view>
</view>
<view class="father">
  <view class="box5">
    <view>
      <view class="point"></view>
      <view class="point"></view>
    </view>
    <view>
      <view class="point"></view>
    </view>
    <view>
      <view class="point"></view>
      <view class="point"></view>
    </view>
  </view>
  <view class="box6">
    <view>
      <view class="point"></view>
      <view class="point"></view>
    </view>
    <view>
      <view class="point"></view>
      <view class="point"></view>
    </view>
    <view>
      <view class="point"></view>
      <view class="point"></view>
    </view>
  </view>
</view>
<view class="father">
  <view class="box7">
    <view>
      <view class="point"></view>
      <view class="point"></view>
      <view class="point"></view>
    </view>
    <view>
      <view class="point"></view>
    </view>
    <view>
      <view class="point"></view>
      <view class="point"></view>
      <view class="point"></view>
    </view>
  </view>
  <view class="box8">
    <view>
      <view class="point"></view>
      <view class="point"></view>
      <view class="point"></view>
    </view>
    <view>
      <view class="point"></view>
      <view class="point" style="background-color:#fff"></view>
      <view class="point"></view>
    </view>
    <view>
      <view class="point"></view>
      <view class="point"></view>
      <view class="point"></view>
    </view>
  </view>
</view>

wxss

page{
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between; 
}
view{
  box-sizing: border-box;
  border: solid 1px;
}
.father{
  border: #ffffff;
  display: flex;
  width: 100%;
  justify-content: space-around;
}
.father>view{
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: column;
}
page{
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;  
}
view{
  box-sizing: border-box;
  border: solid 1px;
}
.father{
  border: #ffffff;
  display: flex;
  width: 100%;
  justify-content: space-around;
}
.father>view{
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: column;
}
.point{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #000000;
}
.box1{
  justify-content: center;
  align-items: center;
}
.box2{
  justify-content: space-around;
  align-items: center;
}

.box3 view{
  border: white;
  display: flex;
}
.box3 view:nth-child(3){
  
  justify-content: flex-end;
}
.box3 view:nth-child(2){
  justify-content: center;
}
.box3,.box4,.box5,.box6,.box7,.box8{
  justify-content: space-around;
}
.box4 view,.box5 view,.box6 view,.box7 view,.box8 view{
  border: white;
  display: flex;
  justify-content: space-around;
}