IFE小薇学院-三栏布局，仿bootstrap栅格布局，flex布局

github地址

三栏式布局

• position：absolute布局
  

  这三种方法中最简单最好理解的方法， 直接通过position定位，完成布局，缺点是没有考虑到文档流的先后加载顺序，没有先加载重要的main部分。

<div class="main">这或许是立春以来的第一场雪吧！在我脑海中模糊地记着。从昨晚开始，天空中便稀稀落落地落下几片雪花。紧接着，雪愈下愈大。 独自守着窗儿，百无聊赖地看着路边一</div>
<div class="left">
    <div class="left-box"></div>
</div>
<div class="right">
    <div class="right-box"></div>
    <div class="right-box"></div>
    <div class="right-box"></div>
    <div class="right-box"></div>
</div>

.left{
     position: absolute;
     left: 20px;
     top:20px;
}
.right{
     position: absolute;
     right: 20px;
     top:20px;
}
.main{
     margin: 0 140px 0 220px;
}

• 圣杯布局
  

  html布局中，是main-left-right结构，不需要添加多余标签，通过float和relative还有margin-left的负值，实现布局。通过外面的父元素，padding为左右两栏留出位置，在通过设置margin-left负值，还有relative布局left/right负值，达到效果。和双飞翼的区别是不需要添加新的标签，但是要用到position：relative

<main>
    <div class="main">这或许是立春以来的第一场雪吧！在我脑海中模糊地记着。从昨晚开始，天空中便稀稀落落地落下几片雪花。紧接着，雪愈下愈大。 独自守着窗儿，百无聊赖地看着路边一盏</div>
    <div class="left">
        <div class="left-box"></div>
    </div>
    <div class="right">
        <div class="right-box"></div>
        <div class="right-box"></div>
        <div class="right-box"></div>
        <div class="right-box"></div>
    </div>
</main>

main{
    padding: 0 140px 0 220px;
}
.left,.right,.main{
    float: left;
}
.main{
    width: 100%;
}
.left{
    margin-left: -100%;
    position:relative;
    left:-220px;
}
.right{
    position:relative;
    margin-left: -120px;
    right: -140px;
}

• 双飞翼布局
  

  html结构也是从main-left-right，不同的是，在main种添加一个insert-div，用来承载真正的main内容。布局其实是用main占据整个100%宽度，再用main的padding属性，给两栏留出位置。所以最后的结果是，两栏覆盖在main上，但是main的真正内容承载与insert-div种。

<div class="main">
    <div class="insert">这或许是立春以来的第一场雪吧！在我脑海中模糊地记着。从昨晚开始，天空中便稀稀落落地落下</div>
</div>
<div class="left">
    <div class="left-box"></div>
</div>
<div class="right">
    <div class="right-box"></div>
    <div class="right-box"></div>
    <div class="right-box"></div>
    <div class="right-box"></div>
</div>

.left,.right,.main{
    float: left;
}
.main{
    width:100%;
    /*重置一下样式*/
    border: none;
    padding: 0;
}
.left{
    margin-left: -100%;
}
.right{
    margin-left:-120px
}
.insert{
    margin: 0 140px 0 220px;
    border: 2px solid #999;
    padding: 20px;
}

还有一部分的公共css部分

*{
padding: 0;
margin: 0;
}
body{
    background: #eee;
    padding: 20px;
}
.left{
    width: 200px;
}
.right{
    width: 120px;
}
.left,.main,.right{
    padding: 20px;
    box-sizing: border-box;
    border: 2px solid #999;
}
.right-box,.left-box{
    height: 80px;
    width: 80px;
    box-sizing: border-box;
    border: 2px solid #999;
}
.right-box:not(:first-child){
    margin-top: 20px;
}

---

仿bootstrap栅格布局

• 思路设计

• 观察bootstrap源码

  • 我最开始思考的时候觉得完全不需要row来进行分行，但是后来观察了源码以后，才明白row存在的原因:
    1.因为col的需要用到float属性，所以清除浮动就需要通过row来实现，其实也有几种方式，父元素row{overflow:hidden} / row:after{content:”; display: block;clear:both;} /在html中添加一个div，div设置clear:both；2.还有就是，因为要设置最外框padding：20px；但是又由于每一个col设置了margin-left：20px；所以row设置margin-left：-20px；就可以解决了。如果不是通过row来解决，而是通过调整main的css，只为单边设置，这样代码的感觉和思路就感觉上不够有条理而只是为了实现页面的样式，来拼凑的。

• scss重构

  • calc tips：
    在calc中添加变量，calc($i),编译器是会报错的，正确的方式是calc(#{$i})
  • 使用for循环，以及注意运算符和数字之间必须要有空格分隔

<div class="main">
        <div class="row">
            <div class="col-md-4 col-sm-6"></div>
            <div class="col-md-4 col-sm-6"></div>
            <div class="col-md-4 col-sm-12"></div>
        </div>
        <div class="row">
            <div class="col-md-3 col-sm-3"></div>
            <div class="col-md-6 col-sm-6"></div>
            <div class="col-md-3 col-sm-3"></div>
        </div>
       <div class="row">
           <div class="col-md-1 col-sm-2"></div>
           <div class="col-md-1 col-sm-2"></div>
           <div class="col-md-2 col-sm-8"></div>
           <div class="col-md-2 col-sm-3"></div>
           <div class="col-md-6 col-sm-3"></div>
       </div>

        <!--<div class="clear"></div>-->
    </div>

@charset "UTF-8";
//思考row这个类存在的意义，boot里面他只有margin-left和margin-right是负值，以及清除浮动的作用
$common-gap :20px;

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.main{
  border:1px solid #999;
  padding: $common-gap;
  padding-top: 0;
  //清除浮动
  //overflow: hidden;
}
//清除浮動方法一
//.clear{
//  clear: both;
//}
.row{
  margin-left: -#{$common-gap};
}
.row:after{
  content: '';
  display: block;
  clear: both;
}
div[class*='col-']{
  border: 2px solid #999;
  height: 50px;
  background: #eee;

  margin-top: $common-gap;
  margin-left: $common-gap;

  float: left;
}

@mixin col-layout($gridsize,$gridcols){
  @for  $i from 1 through $gridcols{
    .col-#{$gridsize}-#{$i}{
      width:calc(100% / 12 * #{$i} - #{$common-gap});
    }
  }
}

@media screen and (min-width:768px){
  @include col-layout(md,12);
}
@media screen and (max-width:768px) {
  @include col-layout(sm,12);
}

---

flex布局

想用scss来简化一下重复部分的，有点不知道怎么下手

<div class="main">
    <div class="flex-item the120">120</div>
    <div class="flex-item the100">100</div>
    <div class="flex-item the40">40</div>
    <div class="flex-item the200">200</div>
</div>

@charset "UTF-8";
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.flex-item{
  border: 1px solid red;
  width:150px;
  margin-bottom: 20px;
}
.main{
  border: 1px solid #999;
  padding: 20px;
  padding-bottom: 0;
  //定义布局方式flex
  display: flex;
  //定义横向还是竖向摆放
  flex-direction: row;
  //当目前宽度不够时，是换行显示还是缩小item
  flex-wrap:wrap;
  //设置对齐方式，功能和text-align目的是一样的，他高级一点
  justify-content: space-between;
  //用来设置标齐方式
  //align-items: center;
}
@media screen and (min-width:640px){
  .main{
    align-items: center;
  }
}
@media screen and (max-width:640px){
  .main{
    align-items: flex-start;
  }
  .the200{
    order: 1;
  }
  .the120{
    order: 2;
  }
  .the100{
    order: 3;
  }
  .the40{
    order: 4;
  }
}

.the120{
  height:120px;
}
.the100{
  height:100px;
}
.the40{
  height:40px;
}
.the200{
  height:200px;
}