此文章仅为遗漏知识点补充！！！

Flex布局

image.png

flex item 属性

  • flex-grow 增长比例 ```
    header
    main
    footer

.container{ height:100vh; display:flex; flex-direction:column; } header{ height:100px; background:#add; } footer{ height:100px; background:#add; } main{ flex-grow:1; }

  1. ![image.png](https://cdn.nlark.com/yuque/0/2020/png/1551475/1603895499871-655a9e96-b4d7-44b2-80a7-a4f7f2fb13f6.png#align=left&display=inline&height=416&margin=%5Bobject%20Object%5D&name=image.png&originHeight=832&originWidth=1920&size=118374&status=done&style=none&width=960)
  3. - order        顺序
  5. ![image.png](https://cdn.nlark.com/yuque/0/2020/png/1551475/1603895827845-262f9238-e378-4b05-ae7b-92a073d32efa.png#align=left&display=inline&height=413&margin=%5Bobject%20Object%5D&name=image.png&originHeight=825&originWidth=1920&size=118639&status=done&style=none&width=960)
  7. - align-self    自身对齐方式
111
11
1
22
2
3

.child{ background:white; margin:1px; width:100px; } .container{ display:flex; background:#add; justify-content:space-between; align-items:flex-start; } .child:nth-child(3){ align-self:flex-end; } ``` image.png