CSS3弹性布局 滚动条样式

弹性布局
要布局的子元素的父元素称之为容器，容器中写

display:flex     //将块级元素变为容器
display:inline-flex    //将行内元素变为容器

弹性容器的样式属性

flex-direction:row    //默认值，主轴是X轴，主轴起点在左端
flex-direction:row-reverse    //主轴是X轴，主轴起点在右端
flex-direction:column    //主轴是Y轴，主轴起点在顶端
flex-direction:column-reverse    //主轴是Y轴，主轴起点在底部

当一个主轴排列不下所以项目时，项目的显示方式

flex-wrap:nowrap  //默认值，空间不够，不换行，项目会自动压缩
flex-wrap:wrap  //空间不够，就换行，项目不压缩
flex-wrap:wrap-reverse  //换行，反转

定义项目在主轴上的对齐方式

justify-content:space-between  //两端对齐
justify-content:space-around  //每个间距相同
justify-content:flex-start  //默认值，在主轴起点对齐
justify-content:flex-end  //在主轴的终点对齐
justify-content:center  //在主轴上居中对齐

定义项目在交叉轴的对齐方式

align-items:flex-start  //交叉轴起点对齐
align-items:flex-end  //交叉轴终点对齐
align-items:center  //交叉轴居中对齐
align-items:baseline  //交叉轴基线对齐
align-items:stretch  //如果项目未设置高度，在交叉轴上充满容器

全局滚动条样式

<style>
#nprogress .bar{
  background-color: #f4f4f4!important;
  height: 3px!important;
}
::-webkit-scrollbar{   //滚动条整体部分，其中的属性有width,height,background,border等
  width: 4px;
  height: 6px;
}
::-webkit-scrollbar-corner{   //边角，两个滚动条交汇处
  display: block;
}
::-webkit-scrollbar-thumb{  //滚动条里面可以拖动的那部分
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track{   //外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
  border-right-color: transparent;
  border-left-color: transparent;
  background-color: rgba(0, 0, 0, 0.1);
}
</style>

隐藏滚动条

<style>
.f-menu {
  transition: all 0.2s;
  top: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  position: fixed;
  box-shadow: 2px 2px 2px #efefef;
  background-color: #003A84;
}
/* 隐藏滚动条 */
.f-menu::-webkit-scrollbar{  //滚动条整体部分，其中的属性有width,height,background,border等。
  width: 0px;
}
</style>