资料
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

布局

flex 设定两列布局

场景：在设定两列布局时，如果给子元素设定 flex:1, 那么当其中一个子元素中的宽度超出时，会导致挤压另一个子元素，导致不是均分的两列布局
解决：使用 width:50%;

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .container{
  10.             height: 500px;
  11.             width: 500px;
  12.             display: flex;
  13.         }
  14.         .left{
  15.             /* flex: 1; */
  16.             width: 50%;
  17.             border: 1px solid black;
  18.         }
  19.         .right{
  20.             /* flex: 1; */
  21.             width: 50%;
  22.             border: 1px solid black;
  23.         }
  25.         .desc-container{
  26.             margin: 100px 0 30px;
  27.         }
  28.         .desc-content{
  29.             width: 100%;
  30.             max-width: 352px;
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35.     <div class="container">
  36.         <div class="left">
  37.             <h2>Fluent Design System</h2>
  38.             <div class="desc-container">
  39.                 <div class="desc-content">
  40.                     Go ahead, pick a platform to get started.
  41.                     Go ahead, pick a platform to get started.
  42.                     Go ahead, pick a platform to get started.
  43.                 </div>
  44.             </div>
  45.         </div>
  46.         <div class="right">
  47.             <img src="https://fluentdesign.blob.core.windows.net/assets/icon-fluent@1x.png" alt="">
  48.         </div>
  49.     </div>
  50. </body>
  51. </html>

延伸写法

  1. 给子元素设定 flex : 1 1 auto;

另一个子元素会进行挤压
image.png

  1. flex : 0 0 auto;

不会进行挤压
image.png

flex 表示的是 flex-grow , flex-shrink, flex-basis 。
其中 flex : 1.表示的就是 flex:1 1 0.
当 flex-basis 设置为0的时候，表示flexbox完全忽略flex子元素的尺寸，告诉 flexbox 所有空间都可以抢占，并按比例分享。

相关问题：当 父元素为 flex 时，给子元素设定 flex:50% 或者 width:50% 都是一样的效果
https://stackoverflow.com/questions/23779144/difference-between-width-50-and-flex-50-in-a-css-flexbox

类似菜单项可换行布局

如下案例

  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.         .container {
  11.             /* width: 500px; */
  12.             display: flex;
  13.             flex-wrap: wrap; //*
  14.         }
  16.         .item {
  17.             box-sizing: border-box;
  18.             width: 25%; //*
  19.             height: 100px;
  20.             border: 1px solid black;
  22.         }
  23.     </style>
  24. </head>
  26. <body>
  27.     <div class="container">
  28.         <div class="item">
  29.             item
  30.         </div>
  31.         <div class="item">
  32.             item
  33.         </div>
  34.         <div class="item">
  35.             item
  36.         </div>
  37.         <div class="item">
  38.             item
  39.         </div>
  40.         <div class="item">
  41.             item
  42.         </div>
  43.         <div class="item">
  44.             item
  45.         </div>
  46.     </div>
  47. </body>
  49. </html>

image.png

同时设定 max-width 与 width

样式

鼠标移动到图片上，呈放大效果

参照：https://didi.github.io/mand-mobile/#/zh-CN/home

知识点：scale

  1. <div class="box">
  2.     box
  3. </div>
  6. .box {
  7.     margin: 10px auto;
  8.     width: 100px;
  9.     height: 100px;
  10.     border: 1px solid black;
  11.     transition: all 0.8s;
  12. }
  14. .box:hover {
  15.     transform: scale(1.2);
  16. }

图标上下浮动的动画

参照：https://didi.github.io/mand-mobile/#/zh-CN/home

知识点：animation 

  1. <div class="trans"></div>
  3. <style>
  4. .trans {
  5.     /* 随便来点样式 */
  6.     height: 200px;
  7.     width: 200px;
  8.     background: red;
  9.     /* END */
  11.     /* 引入动画(1.3s可控制速度) */
  12.     animation: heart 1.3s ease-in-out infinite alternate;
  13.     /* END */
  14. }
  16. @keyframes heart {
  17.     from {
  18.         transform: translate(0, 0)
  19.     }
  21.     to {
  22.         transform: translate(0, 30px)
  23.     }
  25.     /* 下浮高度 */
  26. }
  27. </style>