flex布局小实例

这是一个flex布局小实例。

flex布局总是在用过后忘了，写这个博客是方便自己日后查看。

实现效果：

在实现效果之前先了解一下flex布局。

1.flex属性是flex-grow,flex-shrink和flex-basis的简写，默认值是0 1 auto。后两个属性可选。

   建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

2.flex-grow属性定义项目的放大比例，默认值0，即如果存在剩余空间，也不放大；

3.flex-shrink属性定义项目的缩小比例，默认值1，即如果空间不足，该项目将缩小；

4.flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间(main size)。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

css：

body {
    background: #eee;
}
.w1200 {
    width: 1200px;
    margin: 0 auto;
}
.chart {
    background: #fff;
}
/*容器*/
#indicator {
   display: flex; 
   flex-wrap: wrap; /*换行*/
   padding: 21px 20px 0;
   margin: 50px auto 0;
   border-bottom: 1px solid #eee;
   background: #fff;
}
/*tab样式*/
#indicator .text {
    flex: 0 0 104px; /*关键 不放大不缩小 并定义tab宽度*/
    height: 30px;
    margin-right: 18px;
    margin-bottom: 12px;
    padding: 0 10px;
    line-height: 30px;
    text-align: center;
    overflow: hidden; /*以下三个定义文本过多以点省略*/
    white-space: nowrap;
    text-overflow: ellipsis;
    border-radius: 18px;
    font-size: 14px;
    color: #888888;
    border: 1px solid #E1E1E1;
}
/*选中tab样式*/
#indicator .active {
    color: #6A8BF5;
    border: 1px solid #6A8BF5;
}

html：

js：

var tabData = ['阻塞性睡眠呼吸暂停低通气综合征', '高血压性肾病', '高血压性中风', '高血压脑病', '肾性高血压', '阻塞性睡眠呼吸暂停低通气综合征', '高血压性肾病', '高血压性中风', '高血压脑病', '肾性高血压'];

// 根据数据生成tab
for(let i=0; i" + legendData[i] + "");
    // 默认第一个tab处于选中状态
    if (i == 0) {
        $('.text').addClass('active')
    }
}
// 为每一个tab添加点击事件
$('.text').on('click', function () {
    let legendText = $(this).text()
    $('.text').removeClass('active');
    $(this).addClass('active');
});