1 Flex使用前了解

怎么使用？采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
使用步骤：
- 在容器选择器上开启flex，然后设置容器属性
- 在项目选择器上设置相应的项目属性
  使用例子：(这时看不懂没关系，看看效果和使用就好)
```
.box{
/*容器中开启display:flex;*/
    display: flex;
}
.box .item:nth-child(2){
/*项目自己的位置设置*/
    align-self: center;
}
.box .item:nth-child(3){
    align-self: flex-end;
}
例子只写了布局样式，.item是色子的点，.box是色子的面
```

效果例图：
在这里插入图片描述
也可以理解为一个盒子是容器，盒子里的物品就是项目，物品的大概摆放形状由盒子决定，而物品自己的位置可由自己决定。

任何一个容器都可以指定为 Flex 布局。

/*普通容器指定Flex布局*/
.box{
  display: flex;
}
/*行内元素指定Flex布局*/
.box{
  display: inline-flex;
}
/*Webkit 内核的浏览器，必须加上-webkit前缀*/
.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

做个区分：
flex：将对象作为弹性伸缩盒显示

inline-flex：将对象作为内联块级弹性伸缩盒显示
就是Flex Box 容器没有设置宽度大小限制时，当display 指定为 flex 时，FlexBox 的宽度会填充父容器(容器的上一级，比如body)，当display指定为 inline-flex 时，FlexBox的宽度会包裹子Item(相当于宽度被子元素撑开)

inline-block: 将对象呈现为inline对象，但是对象的内容作为block对象呈现。

容器默认存在两根轴水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
属性浏览
- 容器属性有：
  - flex-direction ：项目的(主轴)排列方向
  - flex-wrap ：一条轴线排不下时，如何换行
  - flex-flow ：flex-direction属性和flex-wrap属性的简写形式
  - justify-content ：项目在主轴上的对齐方式
  - align-items ：项目在交叉轴上的对齐方式
  - align-content ：多根轴线时的对齐方式
- 项目属性
  - order ：定义项目的排列顺序。
  - flex-grow ：如果存在剩余空间，定义项目的放大比例
  - flex-shrink ：如果空间不足，定义了项目的缩小比例
  - flex-basis ：定义了在分配多余空间之前，项目占据的主轴空间
  - flex ：flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。
  - align-self ：允许单个项目有与其他项目不一样的对齐方式，会覆盖原align-items属性。

下面将细讲这些个属性😁

2. 容器属性

flex-direction(项目的排列方向)

属性值：

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。使用：
先把模板代码放出，然后在flex-direction中放入属性值，一个一个看效果。

<style>
        .direction{
            width: 200px;
            height: 200px;
            background-color: green;
            /*容器绿色背景*/
            display: flex;
            flex-direction:(//未知属性值？待填/）;
        }
        .item{
            background-color: red;
            /*项目为红色背景*/
             width: 90%;
            height: 90%;
            margin: 10px 10px;
            /*各项目之间的间隔*/
        }
    </style>
    <div class="direction">
    /*注意项目1234序号*/
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>

使用flex-direction:row时，项目在容器里按水平方向，从左到右依次排序。效果如下图：
在这里插入图片描述
使用flex-direction: row-reverse时，项目在容器里按水平方向排序，从右到左依次排序，也就是倒序。

使用flex-direction:column时，按垂直方向排序，从上到下依次排序。

使用flex-direction:column-reverse时，按垂直方向排序，排序方向是从下到上排序，也就是垂直方向上倒序。
在这里插入图片描述

flex-wrap(换行)

属性值：

nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。使用：先把模板代码放出，然后在flex-wrap中放入属性值，一个一个看效果。

<style>
        .direction{
            width: 200px;
            height: 200px;
            background-color: green;
            display: flex;
            flex-direction: row;
            /*使用主轴为水平方向从左到右排序来演试换行*/
            flex-wrap: (//未知属性？待填/);
        }
        .item{
            width: 20%;
            height: 30%;
            background-color: red;
            margin: 1px 1px;
        }
    </style>
</head>
<body>
    <div class="direction">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
    </div>
</body>

使用flex-wrap:nowrap时，不换行，全挤在第一行，宽度都会适应缩小(后面说缩小比例分配的属性)
在这里插入图片描述
使用flex-wrap:wrap时，当一行内放不下时就会换行，这个换行是第一行在上方，第二行往下面换行。

使用flex-wrap:wrap-reverse时，当一行内放不下时就会换行，这个换行是第一行在下方，第二行往上面换行。(注意这个属性值时，第一行是放在最底下的，也就是不到换行的条件时，第一行也是在最底部)

在这里插入图片描述

flex-flow（排列和换行的简写）

语法：flex-flow:（direction的属性值）（wrap的属性值）
默认值：flex-flow:row nowrap

flex-direction: row;
flex-wrap: wrap-reverse;
上面两行代码可以写成
flex-flow:row wrap-reverse;

justify-content（项目在主轴上的对齐方式）

属性值：

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。使用：
先把模板代码放出，然后在flex-wrap中放入属性值，一个一个看效果。

<style>
        .direction{
            width: 150px;
            height: 150px;
            background-color: green;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: (//？待写值/);
        }
        .item{
            width: 20%;
            height: 20%;
            background-color: red;
            margin: 1px;
        }
    </style>
</head>
<body>
    <div class="direction">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>

使用justify-content:flex-start时，左对齐效果
在这里插入图片描述
使用justify-content:flex-end时，右对齐效果

使用justify-content:center时，居中效果
在这里插入图片描述

使用justify-content:space-between时，项目之间的间隔都相等，两边贴着边框。
在这里插入图片描述
使用justify-content:space-around时，项目两边有着相同量的空白，两相邻项目之间的空白会叠加，所以项目之间的间距是和边框间距的两倍。

align-items(项目在交叉轴上的对齐方式)

属性值：

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值,下面就不演示了）：如果项目未设置高度或设为auto，将占满整个容器的高度。使用：
先把模板代码放出，然后在align-items中放入属性值，一个一个看效果。

<style>
        .direction{
            width: 200px;
            height: 200px;
            background-color: green;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: (属性值待填？);
        }
        .item{
            width: 30%;
            height: 40%;
            background-color: red;
            margin: 1px;
        }
    </style>
</head>
<body>
    <div class="direction">
        <h1 class="item" >text1</h1>
        <h2 class="item">text2</h2>
        <h3 class="item">text3</h3>
    </div>
</body>

当使用align-items:flex-start时，在交叉轴起点对齐，也就是各项目的顶部都是贴着容器天花板的。
在这里插入图片描述
当使用align-items:flex-end时，以交叉轴终点对齐，也就是项目的底部挨着容器地板。

当使用align-items:center时，以交叉轴的中点对齐。注意了，这个以中点对齐时，中点也是处于各项目的中间位置。也就是项目的中点和容器中点在同一水平线上。
在这里插入图片描述

当使用align-items:baseline时，以项目的第一行文字的基线对齐(文字的底部对齐)。
在这里插入图片描述

align-content(多根轴线时的对齐方式)

可以理解为每根轴线就是一个项目。各项目之间的对齐方式
属性值：

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值，下面就不演示了）：轴线会占满整个交叉轴。使用：
先把模板代码放出，然后在align-content中放入属性值，一个一个看效果。

<style>
        .direction{
            width: 210px;
            height: 210px;
            background-color: green;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-around;
            align-content: (属性值待填？);
        }
        .item{
            width: 60px;
            height: 40px;
            background-color: red;
            margin: 1px 5px;
        }
    </style>
</head>
<body>
    <div class="direction">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>

当使用align-content:flex-start时，与交叉轴的起点对齐。
在这里插入图片描述

当使用align-content:flex-end时，与交叉轴的终点对齐。
在这里插入图片描述

当使用align-content:center时，与交叉轴的中点对齐。
在这里插入图片描述

当使用align-content:space-between时，与交叉轴两端对齐，轴线之间的间隔平均分布。
在这里插入图片描述

当使用align-content:space-around时，每根轴线两侧的间隔都相等。两相邻轴线之间的空白会叠加，所以，轴线之间的间隔比轴线与边框的间隔大一倍。
在这里插入图片描述
注意：单轴线时align-content不会生效，除非加上flex-wrap: wrap,即可换行属性，就能正常生效。

3. 容器成员(项目)属性

order(定义项目的排列顺序)

属性值：任意整数
数值越小，排列越靠前，默认为0。
例子：

<style>
       .direction{
           width: 300px;
           height: 50px;
           background-color: green;
           display: flex;
           flex-direction: row;
       }
       .item{
           width: 40px;
           height: 40px;
           background-color: red;
           margin: 1px 5px;
       }
       .item1{
           order: 1;
       }
       .item2{
           order: -2;
       }
       .item3{
           order: 3;
       }
       .item4{
           order: -1;
       }
       .item5{
           order: 2;
       }
       .item6{
           order: -3;
       }
       .item7{
           order: 0;
       }
   </style>
</head>
<body>
   <div class="direction">
       <div class="item1 item">1</div>
       <div class="item2 item">-2</div>
       <div class="item3 item">3</div>
       <div class="item4 item">-1</div>
       <div class="item5 item">2</div>
       <div class="item6 item">-3</div>
       <div class="item7 item">0</div>
   </div>
</body>

可以看到，上面-3到3是乱序的，根据order的设置后。
效果图：
在这里插入图片描述

flex-grow(定义项目的放大比例)

属性值：任意数值，小数，整数，负数，但是负值无效，默认为0。
默认为0时，即如果存在剩余空间，也不放大。
注意：它的放大比例是项目间比较来的，如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
例子：

<style>
       .direction{
           width: 300px;
           height: 50px;
           background-color: green;
           display: flex;
           flex-direction: row;
       }
       .item{
           width: 40px;
           height: 40px;
           background-color: red;
           margin: 1px 5px;
       }
       .item1{
           flex-grow: 1;
       }
       .item2{
           flex-grow: 2.1;
       }
       .item3{
           flex-grow: 3;
       }
   </style>
</head>
<body>
   <div class="direction">
       <div class="item1 item">1</div>
       <div class="item2 item">2</div>
       <div class="item3 item">3</div>
   </div>
</body>

效果图：
在这里插入图片描述

flex-shrink(定义了项目的缩小比例)

属性值：任意正数值，小数，整数，负值是不被允许的。默认为1
默认为1，即如果空间不足，该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
这是为什么，知道吗？

让我们仔细分析分析下flex-shink的分配运算。说到其的运算，不得不提提加权平均数，其就是通过加权平均数分配的。
加权平均值即将各数值乘以相应的权数，然后加总求和得到总体值，再除以总的单位数。加权平均值的大小不仅取决于总体中各单位的数值（变量值）的大小，而且取决于各数值出现的次数（频数），由于各数值出现的次数对其在平均数中的影响起着权衡轻重的作用，因此叫做权数。因为加权平均值是根据权数的不同进行的平均数的计算，所以又叫加权平均数。

(这里一顿介绍，只是为了让人记住，flex-shink是使用加权平均数的😎，不用深看，下面一讲运算，马上就能学会)

首先，以下面例子为例，容器总宽度为500px,子项a宽300px，子项b宽150px，子项c宽200px，那么子项设置的宽度总和为650px，比容器写死的宽度多了150px，作为弹性盒子，就要把多出来的宽度分担消化掉。
怎么将多出来的宽度分给三个子项呢？通过其的flex-shink值，进行加权平均数运算！
运算公式(简单说下)：
X为flex-shink值，a的是X_a=1, b的是X_b=2, c是X_c=3,f为各子项的宽度，a的是f_a=300px, b的是f_b=150px, c是f_c=200px,就可以计算得到a,b,c分别该缩小的值为

A=((x_a*f_a)/(x_a*f_a+x_b*f_b+x_c*f_c))*150px=37.5px
B=((x_b*f_b)/(x_a*f_a+x_b*f_b+x_c*f_c))*150px=37.5px
C=((x_c*f_c)/(x_a*f_a+x_b*f_b+x_c*f_c))*150px=75px

<style>
       *{
           padding: 0;
           margin: 0;
       }
       .container{
           margin: 10px;
           display: flex;
           width: 500px;
           height: 200px;
           background-color: #eee;
           color: #666;
           text-align: center;
       }
       .a{
           background-color: #f46;
           width: 300px;
           flex-shrink: 1;
           /* 减小37.5px  按(加权运算)多出来的150px */
           /* 300*1+150*2+200*3=1200 */
           /* a减少 300px*1/1200=0.25  150*0.25=37.5 */
           /* b减少 150*2/1200=0.25 150*0.25=37.5 */
           /* c减少 200*3/1200=0.5 150*0.5=75 */
       }
       .b{
           width: 150px;
           background-color: #426983;
           flex-shrink: 2;
           /* 减小37.5px */
       }
       .c{
           width: 200px;
           background-color: #61dafb;
           flex-shrink: 3;
           /* 减小75px */
       }
       .item{
           color: black;
       }
   </style>
</head>
<body>
   <div class="container">
       <div class="item a">尺寸：(原宽度300)现262.5 x 200</div>
       <div class="item b">尺寸：(原宽度150)现112.5 x 200</div>
       <div class="item c">尺寸：(原宽度200)现125 x 200</div>
   </div>
</body>

效果图：

flex-basis(分配多余空间之前，项目占据的主轴空间)

属性值：长度值，和宽度设置一样。项目将占据固定空间。
浏览器根据这个属性(flex-basis优先级是比width高的,会覆盖)，计算主轴是否有多余空间时会考虑basic值，而不是width。它的默认值为auto，即项目的本来大小。

<style>
       .direction{
           width: 200px;
           height: 50px;
           background-color: green;
           display: flex;
           flex-direction: row;
       }
       .item{
           width: 40px;
           /*原来为项目设置的宽度是40px*/
           height: 40px;
           background-color: red;
           margin: 1px 5px;
       }
       .item1{
           flex-basis: 80px;
           /*为item1设置flex-basis为原来的两倍*/
       }
   </style>
</head>
<body>
   <div class="direction">
       <div class="item1 item">1</div>
       <div class="item2 item">2</div>
       <div class="item3 item">3</div>
   </div>
</body>

在这里插入图片描述
可以看到item1的宽度变为了flex-basis设置的那个宽度。

flex(flex-grow, flex-shrink 和 flex-basis的简写)

属性值：（flex-grow属性值 flex-shrink属性值 flex-basis属性值）例如：flex:1 1 100px
默认值为0 1 auto。后两个属性可选，即写一个flex:1 表示同比例flex-grow:1 flex-shrink:1 flex-basis:0%,有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

align-self(允许单个项目有与其他项目不一样的对齐方式)

属性值：

auto：(默认值)表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch：如果项目未设置高度或设为auto，将占满整个容器的高度。所以：除了auto其他都和align-items一模一样，只不过其是专门用于更改单个项目的。
例子：

<style>
       .direction{
           width: 200px;
           height: 200px;
           background-color: green;
           display: flex;
           flex-direction: row;
           justify-content: space-around;
           align-items: center;
       }
       .item{
           width: 30%;
           height: 40%;
           background-color: red;
           margin: 1px;
       }
       .outer{
           align-self:flex-end;
       }
   </style>
</head>
<body>
   <div class="direction">
       <h1 class="item" >text1</h1>
       <h2 class="item outer">text2</h2>
       <!-- 使用.outer选择器把text2放到铁底的位置-->
       <h3 class="item">text3</h3>
   </div>
</body>

效果图：
在这里插入图片描述

4. 应用示例

做一个电商分类侧边栏(这里会做的比较简单，大部分功能到最后小程序实战文章中完成)
预计效果：

代码：

<style>
        *{
            padding: 0;
            margin: 0;
        }
        .container{
            display: inline-flex;
            flex-direction: column;
        }
        .item{
            padding: 10px;
            background-color:#F5F5F5;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
    <!--等下在小程序实战中会重新做，做一个组件-->
        <div class="item">热门推荐</div>
        <div class="item">手机数码</div>
        <div class="item">电脑办公</div>
        <div class="item">家用电器</div>
        <div class="item">计生情趣</div>
        <div class="item">美妆护肤</div>
        <div class="item">个护清洁</div>
        <div class="item">汽车生活</div>
        <div class="item">京东超市</div>
        <div class="item">男装</div>
    </div>
</body>

你会发现使用flex布局能很快轻松的实现。
效果图：
在这里插入图片描述

还可以以画色子的方式练习。
我的色子练习代码
 色子练习显示效果网页

参考文章：阮一峰flex布局语法

感谢阅读，希望大佬提出学习建议,本人也准备在四五月找实习当中，希望有大佬捞捞，想一起学习的小伙伴也可以加我微信一起学习😜
微信号：xieHB-frontend-178

给flex布局做个复习笔记😕

1 Flex使用前了解

2. 容器属性

flex-direction(项目的排列方向)

flex-wrap(换行)

flex-flow（排列和换行的简写）

justify-content（项目在主轴上的对齐方式）

align-items(项目在交叉轴上的对齐方式)

align-content(多根轴线时的对齐方式)

3. 容器成员(项目)属性

order(定义项目的排列顺序)

flex-grow(定义项目的放大比例)

flex-shrink(定义了项目的缩小比例)

flex-basis(分配多余空间之前，项目占据的主轴空间)

flex(flex-grow, flex-shrink 和 flex-basis的简写)

align-self(允许单个项目有与其他项目不一样的对齐方式)

4. 应用示例