flex布局flex是flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可

flex是flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局

当我们为父盒子设为flex布局之后，子元素的float，clear和vertical-align属性将失效
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

父盒子属性

flex-direction:设置主轴方向
justify-content:设置主轴上的子元素排列方式
flex-wrap:设置子元素是否换行
align-content：设置侧轴上的子元素排列方式
align-items:设置侧轴上的子元素排列方式
flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap

flex-direction

flex-direction属性决定主轴的方向
主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

属性值	说明
row	默认值，从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

justify-content

justify-content属性定义了项目在主轴的对齐方式
使用这个属性之前一定要确定好主轴是哪个

属性值	说明
flex-start	默认值，从头部开始，如果主轴是x轴，则从左到右
flex-end	从尾部开始排列
center	在主轴居中对齐(如果主轴是x轴则水平居中)
space-around	平分剩余空间
space-between	先两边贴边，在平分剩余空间(重要)
space-around	每个元素之间有相同的间距
space-evenly	子元素间距和两端间距相等

flex-wrap

默认情况下，项目都排在一条线(又称"轴线")上。flex-wrap属性定义，flex布局中默认不换行，如果盒子排列不下，就会缩小盒子的大小

属性值	说明
nowrap	默认值，不换行
wrap	换行

align-items: 设置侧轴上的子元素排列方式(单行)

该属性是控制子项在侧轴(默认是y轴)上的排列方式，在子项为单项的时候使用

属性名	说明
flex-start	默认值，从上到下
flex-end	c从下到上
center	挤在一起居中(垂直居中)
stretch	拉伸

align-content: 设置侧轴上的子元素排列方式(多行)

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(多行),在单行下没有效果的

属性项	说明
flex-start	默认值，在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分剩余空间
stretch	设置子项元素高度平分父元素高度

flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性
flex-flow: row wrap

flex布局子项常见属性

flex子项目占的份数
align-self控制子项自己在侧轴的排列方式
order属性定义子项的排列顺序(前后顺序)

flex

flex 属性定义子项目分配剩余空间，用flex来表示占多少份数

.item{
    flex: <number>;/* default 0 */
}

解析 flex: 1

flex: 1 是集成了 flex-grow: 1; flex-shrink: 1; flex-basis: 0%

flex-grow: 1: 定义了元素在容器中可以扩展的比例
- 1 表示元素平分剩余空间
- 0 表示不允许扩展
flex-shrink: 1: 定义了元素在容器空间不足时的缩小比例
- 1 表示元素可以按比例缩小
- 0 表示不允许缩小
flex-basis: 0%: 定义了元素的初始大小
- 0% 表示元素的大小仅取决于内容，剩余空间会根据 flex-grow 和 flex-shrink 决定

align-self: 控制某一个子项自己在侧轴上的排列方式

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

span:nth-child(2){
    /* 设置自己在侧轴上的排列方式 */
    align-self: flex-end;
}

order: 定义项目的排列顺序

数值越小，排列越靠前，默认为0
注意：和z-index不一样

flex 常见布局样式

左侧固定，右侧自适应

.container {
  display: flex;
}
.left {
  width: 200px;
}
.right {
  flex: 1; /* 自适应宽度 */
}

固定子元素宽度，使子元素自动换行

.flex-box {
  display: flex;
  flex-wrap: wrap;
  /* gap: 10px 0px; */ /* gap: row-gap column-gap */
  column-gap: 10px; /* 水平间距 */
  row-gap: 10px; /* 垂直间距 */
}
.flex-box span {
  width: 30%;
}

导航栏布局

left 和 center 可以被元素内容撑大

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.left {
  flex: 0; /* 固定宽度 */
}
.center {
  flex: 1; /* 自适应宽度 */
  text-align: center;
}
.right {
  flex: 0; /* 固定宽度 */
}

每行三个元素，三个元素平分空间

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 1 calc(33.33% - 10px);
  /* 每行3个，间隔10px */
  margin: 5px;
  height: 10px;
}

.item:nth-child(3n) {
  background-color: red;
}

.item:nth-child(3n+1) {
  background-color: blue;
}

.item:nth-child(3n+2) {
  background-color: green;

案例

精灵图使用(图片拼合技术)

.sales-hd h2::after {
    position: absolute;
    top: 8px;
    left: 10px;
    content: "";
    width: 79px;
    height: 15px;
    background: url(../images/hot.png) no-repeat 0 -20px;
    background-size: 79px auto;
}

精灵图的优点

采用了精灵图这一技术可以缓解加载时间过长从而影响用户体验的这个问题。
在一定程度上减少了页面的加载速度，也一定程度上缓解了服务器的压力。
使用精灵图可以有效减少服务器接收和发送请求的次数，从而达到提高页面的加载性能。

content属性

content 属性与 :before 及 :after 伪元素配合使用，来插入内容。

`[class=^value]`选择器

为value开头的类属性定义样式

.local-nav li [class^="local-nav-icon"] {
    width: 32px;
    height: 32px;
    margin-top: 8px;
    background: url(../images/localnav_bg.png) no-repeat 0 0;
    background-size: 32px auto;
}

渐变色

语法：

background: linear-gradient(起始方向,颜色1,颜色2,...);
background: -webkit-linear-gradient(left,#FA5A55,#fa994d);
background: -webkit-linear-gradient(left top,#FA5A55,#fa994d);

背景渐变必须添加浏览器私有前缀
起始方向可以是：方位名词或者度数，如果省略就默认是top

nth-child()

奇数和偶数是可以作为关键字使用用于相匹配的子元素，其索引是奇数或偶数（该索引的第一个子节点是1）。在这里，我们为奇数和偶数p元素指定两个不同的背景颜色：

p:nth-child(odd)
{
    background:#ff0000;
}
p:nth-child(even)
{
    background:#0000ff;
}

使用公式（an+ b）.描述：a代表一个循环的大小，N是一个计数器（从0开始），以及b是偏移量。在这里，我们对所有索引是3的倍数的p元素指定了背景颜色：

p:nth-child(3n+0)
{
    background:#ff0000;
}

flex布局