-
flex布局：弹性布局
-
1、display：flex;将 父元素设置为弹性盒子（给父元素设置 控制子元素排版的布局 内部的直系子级元素成为弹性元素 ）
-
称父元素为弹性容器，子元素为弹性元素，一个元素既可以是弹性元素，同时也可以是弹性容器
-
默认display: flex; 对外展示为block（块级）特性，对内子元素拥有弹性元素特性
-
display:inline-flex; 对外展示为inline-block（行内块）特性，对内子元素拥有弹性元素特性
-
子元素: 水平排列 不独占整行 可以设置宽高 margin padding生效
-
子元素不固定高度（由内容撑开时，默认会占父级高度的100%）
-
-
2、flex-direction设置子盒子的排列方向（设置 主轴方向）
-
默认： row 主轴水平向右、侧轴垂直向下
-
row-reverse: 主轴水平向左、侧轴垂直向下
-
column: 主轴垂直向下、侧轴水平向右
-
column-reverse： 主轴垂直向上，侧轴水平向右
-
-
3、flex-wrap: nowrap;默认子元素不换行展示 在主轴上被压缩
-
4、 justify-content子元素主轴上排列属性
-
justify-content: flex-start;默认
-
center 居中展示
-
flex-end在主轴末尾位置展示
-
-
5、align-items单行子元素在侧轴上的布局属性
-
align-items: stretch; 默认（如果子元素没有设置高度 将拉伸到父元素高度100%）
-
flex-start center flex-end
-
align-content: flex-start/center/flex-end(将子元素挤在一起来排列)
-
space-between/space-evenly/space-around（将子元素分散在侧轴排列）
-
-
分散式布局
-
space-around 相当与所有元素都拥有相同的左右margin
-
space-between 两侧元素靠主轴两边排列 中间的元素平分空间
-
space-evenly 两侧以及元素之间的间距完全相等
-
多行子元素分散式布局方案（align-content一般肯定是配合flex-wrap: wrap;这条属性来使用 适应与子元素换行展示后拥有多行的时候的布局）
-
-
子元素在父元素内垂直水平居中的方案：
-
父元素设置
-
display: flex;
-
justify-content: center;
-
align-items: center;
-
-
-
flex沿主轴的排列方式
-
1. 将 父元素 设置为 弹性盒子
- flex-wrap: wrap;
-
换行 默认不换行 nowrap/wrap/wrap-reverse(反向换行，通过这个属性以及flex-direction方向设置搭配使用可以实现更多的排列需求)
-
- flex-wrap: wrap;
-
2、flex-direction: row;设置 子盒子的排列方向（设置 主轴方向）
-
row： 默认 主轴水平向右、侧轴垂直向下
-
row-reverse: 主轴水平向左、侧轴垂直向下
-
column: 主轴垂直向下、侧轴水平向右
-
column-reverse： 主轴垂直向上，侧轴水平向右
-
-
3、justify-content:设置 沿主轴的排列方式
-
flex-start: 默认排列方式 从主轴的起点到主轴的终点
-
flex-end: 子元素 沿主轴方向 摆放到 结尾
-
center: 子元素 沿主轴方向 居中排列
-
space-around: 子元素 沿主轴方向 等分剩余空间
-
space-between： 子元素 沿主轴方向 两端对齐等分剩余空间
-
-
-
子元素属性（只能用在弹性元素中）
-
1、order:0;调整子元素自己的排列位置 默认是0 越小顺序越靠前 越大越靠后
-
2、flex-grow: 0;默认值为0 负数无效 可以设置为小数
-
弹性子元素的膨胀因子，代表该元素参与瓜分剩余空间的系数（份数） 设置了数值之后这个值会覆盖元素的宽度设置
-
如果所有子元素的膨胀系数相加>=1份,那么会瓜分所有剩余空间 如果<1份按百分比去瓜分剩余空间
-
所有子元素的膨胀系数相加<1份的情况下
-
该元素自己分的的空间 = 自己的系数 * 总多余空间
-
-
所有子元素的膨胀系数相加>=1份的情况下
-
该元素自己分的的空间 =（自己的系数/总系数）* 总多余空间
-
-
-
3、flex-shrink: 1; 弹性元素缩小因子 默认1 不换行的情况下当空间不够时 默认弹性元素会被压缩
-
可以设置为0保证它不被压缩
-
该元素自己被压缩的空间 =（自己的系数/总系数）* 总缺失部分
-
-
4、flex:initial; flex是flex-grow,flex-shrink,flex-basis的缩写/简写
-
默认 initial ： 0 1 auto
-
none(钢铁直男)： 0 0 auto (也可以写成flex:0;)
-
inhert： 继承
-
auto： 1 1 auto (也可以写成flex:1;)
-
-
5、flex-basis:auto; 在分配多余空间前，子元素占据主轴的空间，浏览器根据这个属性来计算弹性盒子是否有剩余空间
-
可以使用百分比及其他单位（px em rem）来定义宽度 负值无效
-
-
6、align-self: auto; 默认auto
-
子元素控制自己在侧轴上的排列方式 可以覆盖父元素align-items的设置
-
flex-start flex-end center
-
-
-
-
css3计算属性 calc()
-
运算符左右两边必须有空格 100% - 100px 可以两个不同的单位计算
-
+ - 加减法必须都有单位
-
* / 乘除法 只能写一个单位 而且必须是前面的被除数写单位
-
margin-left: calc(1000px / 2);
-
-
滚动条样式设置
-
轨道背景及整体大小
-
.box::-webkit-scrollbar {
-
width: 6px;
-
height: 6px;
-
background-color: rgba(240, 240, 240, 1);
-
background-color: red; }
-
-
定义滚动条轨道 内阴影+圆角
-
.box::-webkit-scrollbar-track {
-
border-radius: 10px;
-
background-color: rgba(240, 240, 240, .5);
-
background-color: green;}
-
-
定义滑块 内阴影+圆角
-
.box::-webkit-scrollbar-thumb {
-
border-radius: 10px;
-
box-shadow: 0 0 0px skyblue inset;
-
background-color: skyblue;}
-
-
