Flex布局

1.容器属性

  1. 设置主轴方向
  2. 设置主轴对齐方式
  3. 设置侧轴对齐方式（单行）
  4. 设置项目是否换行显示
  5. 设置侧轴对齐方式（多行

2.项目属性

  1. 项目的缩放
  2. 项目单独的侧轴对齐方式
  3. 项目的排放顺序

1.1给父盒子设置display:flex

  • 父盒子就变成了弹性盒子（Flexbox），一般称为容器
  • 子元素就变成了一个全新的盒子（不能使用float、clear、vertical-align ），一般称为项目
  • 给父盒子或子元素添加属性，目的：控制子盒子的大小和位置

1.3容器属性-设置主轴方向

  • 主轴默认是水平方向，侧轴默认的是垂直方向
  • 属性：flex-dirretion
  • 值: | 属性值 | 作用 | | :—-: | :—-: | | row | 行，水平（默认值） | | column | 列，垂直 | | row-revers | 行，从右向走 | | coulumn-revers | 列，从下向上 |

1.4.2 容器属性 - 设置主轴对齐方式 *

  1. /*弹性盒子设置在父元素上，作用是更好的控制子元素的分布(排列)*/
  2.     justify-content
  3. /*控制主轴上子元素的对齐方式
  4.  flex-start-主轴开始的位置对齐
  5.  flex-end-主轴结束的位置对齐
  6.  center-主轴居中对齐
  7.  space-between-两端对齐中间等距
  8.  space-around-两边是中间等距的一半 
  9.  space-evenly两边和中间的距离 */
属性值 作用
flex-start 默认值, 起点开始依次排列
flex-end 重点开始依次排列
center 沿主轴居中排列
space-around 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-between 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间
space-evenly 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等

1.4.3 容器属性 - 设置侧轴对齐方式（单行）

  1. 属性: align-items

  2. 值： | 属性值 | 作用 | | :—-: | :—-: | | flex-start | 默认值, 起点开始依次排列 | | flex-end | 重点开始依次排列 | | center | 沿侧轴居中排列 | | stretch | 默认值, 弹性盒子沿着主轴线被拉伸至铺满容器 |


align-items：设置子元素在侧轴上的对齐方式。属性值可以是：

  • flex-start 从侧轴开始的方向对齐
  • flex-end 从侧轴结束的方向对齐
  • baseline 基线 默认同flex-start
  • center 中间对齐
  • stretch 拉伸

1.4.4 容器属性 -设置项目是否换行显示

  1. 属性: flex-wrap

  2. 值： | 属性值 | 作用 | | :—-: | :—-: | | nowrap | nowrap | | wrap | 换行 | | wrap-reverse | 换行，并且和侧轴方向相反 |

  1. 注意： 换行的条件有两个（缺一不可）

    1. flex-wrap: wrap

    2. 项目的宽度之和要大于容器的宽度

1.4.5 容器属性 - 设置侧轴对齐方式（多行）

  1. 属性: align-content

    1. 值： | 属性值 | 作用 | | :—-: | :—-: | | align-content | 默认值, 起点开始依次排列 | | flex-end | 重点开始依次排列 | | center | 沿侧轴居中排列 | | stretch | 默认值, 弹性盒子沿着主轴线被拉伸至铺满容器 | | space-around | 弹性盒子沿侧轴均匀排列, 空白间距均分在弹性盒子两侧 | | space-between | 弹性盒子沿侧轴均匀排列, 空白间距均分在相邻盒子之间 | | space-evenly | 弹性盒子沿侧轴均匀排列, 弹性盒子与容器之间间距相等 |
  1. display: flex;
  2.             /* 多行换行
  3.             nowrap 不换行
  4.             wrap  换行 */
  5.             flex-wrap: nowrap;
  6.             /* 控制子元素多行侧轴对齐 
  7.             staeth 拉伸
  8.             flex-start 侧轴开始的位置对齐
  9.             flex-end 侧轴结束的位置对齐
  10.             center 侧轴居中对齐*/

1.5.1 项目属性 - 设置项目所占主轴方向的大小

  1. 属性: flex

  2. 值： | 属性值 | 作用 | | :—-: | :—-: | | auto | 项目既可以放大，也可以缩小（不是默认值！） | | none | 项目不可以缩放 | | 纯数字 | 项目等比例缩放 |

  • 注意：flex的默认值：不放大，但是当父子宽度不够时会缩小

1.5.2 项目属性 -项目单独的侧轴对齐方式

  1. 属性: align-self

  2. 值： | 属性值 | 作用 | | :—-: | :—-: | | auto | 默认值，和大家一样 | | flex-start | 默认值, 起点开始依次排列 | | flex-end | 重点开始依次排列 | | center | 沿侧轴居中排列 | | stretch | 弹性盒子沿着主轴线被拉伸至铺满容器 |

  1. /* 主轴方向
  2.             row  水平方向 默认值
  3.             row-reverse 水平反向
  4.             column 垂直方向  */
  5.             flex-direction: column;
  6.             /* 主轴对齐方向 */
  7.             justify-content: center;
  8.             /* 单行侧轴方向 */
  9.             align-items: center;

1.5.3 项目属性 -项目的排列顺序

  1. 属性：order

  2. 值： | 属性值 | 作用 | | :—-: | :—-: | | 纯数字 | 默认为0，数字越大越靠后 |

Flex布局重点总结

大数据热点案例

  1. 设置Flex布局的属性是什么？

    • display:flex

  2. 容器属性

    • 设置主轴方向的属性
    • 设置主轴对齐方式的属性
    • 设置侧轴对齐方式的属性（单行）

  3. 项目属性

    • 设置项目所占主轴方向的大小

效果图：

3.19-day3-flex布局 - 图1

代码块：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.             box-sizing: border-box;
  14.         }
  16.         body {
  17.             background-color: #333;
  18.         }
  20.         .hot {
  21.             position: relative;
  22.             width: 747px;
  23.             height: 617px;
  24.             background: url(./images/shj.png);
  25.             margin: 0 auto;
  26.         }
  28.         .circle {
  29.             position: absolute;
  30.             top: 180px;
  31.             right: 126px;
  32.             width: 100px;
  33.             height: 100px;
  34.             /* border: 2px solid #fff; */
  35.         }
  37.         .point {
  38.             position: absolute;
  39.             left: 0;
  40.             top: 0;
  41.             right: 0;
  42.             bottom: 0;
  43.             width: 10px;
  44.             height: 10px;
  45.             margin: auto;
  46.             background-color: yellow;
  47.             border-radius: 50%;
  48.         }
  50.         .circle div:nth-child(n+2) {
  51.             position: absolute;
  52.             left: 0;
  53.             top: 0;
  54.             right: 0;
  55.             bottom: 0;
  56.             width: 10px;
  57.             height: 10px;
  58.             margin: auto;
  59.             box-shadow: 0 0 10px 0 yellow;
  60.             border-radius: 50%;
  61.             animation: light 1.2s linear infinite;
  62.             opacity: 0;
  63.         }
  65.         .circle div:nth-child(3) {
  66.             animation-delay: 0.4s;
  67.         }
  69.         .circle div:nth-child(4) {
  70.             animation-delay: 0.8s;
  71.         }
  73.         @keyframes light {
  74.             0% {}
  76.             70% {
  77.                 /* 注意：此次不要用缩放，因为缩放会将盒子所有的东西放大，包含阴影 */
  78.                 /* transform: scale(4); */
  79.                 width: 40px;
  80.                 height: 40px;
  81.                 opacity: 1;
  82.             }
  84.             100% {
  85.                 width: 80px;
  86.                 height: 80px;
  87.                 opacity: 0;
  88.             }
  89.         }
  90.     </style>
  91. </head>
  93. <body>
  94.     <div class="hot">
  95.         <div class="circle">
  96.             <!-- 实心的小点 -->
  97.             <div class="point"></div>
  98.             <!-- 发光的圈圈 -->
  99.             <div></div>
  100.             <div></div>
  101.             <div></div>
  102.         </div>
  103.     </div>
  104. </body>
  106. </html>