flex布局（pink老师课程笔记）
flex布局
flex使用后部分行内和块级元素，均可设置宽高
div {
display: flex;
width: 400px;
height: 400px;
background-color: orange;
}
span {
width: 100px;
height: 50px;
background-color: purple;
margin-left: 10px;
}
任何一个容器均可指定flex布局
当父盒子设为flex后，子盒子的float、clear和vertical-align将失效
父元素-容器
子元素-项目
父项常见属性（6）
注意：主轴和侧轴
flex-direction-设置主轴方向（项目的排列顺序）
/* 默认主轴是X轴 ,则y轴为侧轴 */
flex-direction: row;
/* 翻转，从右至左 */
flex-direction: row-reverse;
/* 主轴为y轴 */
flex-direction: column;
justify-content-设置主轴上子元素的排列方式
/* 默认从头部开始，若主轴为X，则从左到右 */
/* justify-content: flex-start; */
/* 从尾部开始排列，若主为X，则靠右对齐 */
/* justify-content: flex-end; */
/* 在主轴居中对齐 */
/* justify-content: center; */
/* 平分剩余空间 */
/* justify-content: space-around; */
/* 先两边贴边，再平分剩余空间 */
justify-content: space-between;
space-between
flex-wrap-设置子元素是否换行
默认不换行，若装不开，则将子盒子缩小
/* 默认不换行 */
/* flex-wrap: nowrap; */
/* 换行 */
flex-wrap: wrap;
align-items-设置侧轴上子元素排列属性（单行）
/* align-items: flex-start; */
/* align-items: flex-end; */
/* 居中*/
/* align-items: center; */
/* 拉伸（默认值），但是子盒子不给高度*/
align-items: stretch;
适用于单行显示的属性
align-content-设置侧轴上子元素排列属性（多行）
只能用于子项出现换行的情况
/* align-content: flex-start; */
/* align-content: flex-end; */
/* align-content: center; */
/* align-content: space-around; */
/* 先贴边，再平分 */
align-content: space-between;
/* 子项元素平分父元素高度 */
/* align-content: stretch; */
flex-flow-设置主轴方向和是否换行简写
flex-flow:row wrap;
子项常见属性（3）
flex-子项目占的份数
子项目分配剩余空间
/* 左右两侧固定，中间自适应 */
span:nth-child(1) {
width: 100px;
height: 50px;
background-color: blue;
}
span:nth-child(2) {
flex: 1;
background-color: rgb(32, 152, 161);
}
span:nth-child(3) {
width: 100px;
height: 50px;
background-color: rgb(197, 41, 96);
}
与分蛋糕相似
flex: number
/* 平均分成3等份,3个span各占1份 */
div span {
flex: 1;
background-color: purple;
}
align-self-控制子项自己在侧轴的排列方式
单个项目与其他项目不同，覆盖掉align-items
span:nth-child(2) {
flex: 1;
align-self: flex-end;
background-color: rgb(32, 152, 161);
}
order-子项目排列顺序（前后）
span:nth-child(2) {
flex: 1;
align-self: flex-end;
order: -1;
background-color: rgb(32, 152, 161);
}
默认为0，-1比0小，所以在前
index是图层属性
案例
局部导航栏——一行放置5个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #222;
font-size: 12px;
}
.local-nav {
display: flex;
height: 65px;
background-color: aqua;
border-radius: 8px;
margin: 3px 4px;
}
.local-nav li {
flex: 1;
}
.local-nav li [class^="local-nav-icon"] {
display: flex;
flex-direction: column;
align-items: center;
}
.local-nav li [class^="local-nav-icon"]::before {
content: '';
display: block;
width: 50px;
height: 50px;
background: url(icons.png) no-repeat -253px -3px;
}
/* 利用属性选择器更换背景色 */
.local-nav li .local-nav-icon-icon2::before {
background-position: -253px -55px;
}
.local-nav li .local-nav-icon-icon3::before {
background-position: -257px -106px;
}
.local-nav li .local-nav-icon-icon4::before {
background-position: -253px -55px;
}
.local-nav li .local-nav-icon-icon5::before {
background-position: -253px -55px;
}
</style>
</head>
<body>
<ul class="local-nav">
<li>
<a href="#" title="景点玩乐" class="local-nav-icon-icon1">
景点 玩乐
</a>
</li>
<li>
<a href="#" title="景点玩乐" class="local-nav-icon-icon2">
景点 玩乐
</a>
</li>
<li>
<a href="#" title="景点玩乐" class="local-nav-icon-icon3">
景点 玩乐
</a>
</li>
<li>
<a href="#" title="景点玩乐" class="local-nav-icon-icon4">
景点 玩乐
</a>
</li>
<li>
<a href="#" title="景点玩乐" class="local-nav-icon-icon5">
景点 玩乐
</a>
</li>
</ul>
</body>
</html>
选择前两个盒子-
.local-nav:nth-child(-n+2)
上有老下有小-
.local-nav li {
/* 不冲突 */
flex: 1;
display: flex;
}
文字阴影
text-shadow:1px 1px 1px rgba(0,0,0,.3)
水平阴影，垂直阴影，模糊度，颜色
图片缩放
background-size:112px auto;
linear-gradient-背景渐变（线性）（必须添加私有前缀）
/* 从左至右，颜色由橘色变为紫色 */
background: -webkit-linear-gradient(left, orange, purple);
起始方向度数或者方位，默认为top
