flex布局基础

- display：flex；设置盒子为flex布局。

• flex弹性布局相对于一般布局方式很方便分为父项、子项，主轴、侧轴的属性设置。
  - flex-direction 设置主轴
  - flex-wrap 设置子项是否换行排列，不划行排列，子项增加时候，自动压缩子项宽度。
  **- justify/align-content：**主/侧轴的属性，flex-start、flex-end、center设置前后中的排列位置，space-around，子项平分剩余宽度，space-between平分宽度，但是不包括两个侧面的位置。
• align-content设置侧轴，在多行的时候生效，单行的时候使用align-item，但是仅有center、end、start属性可设置。
• 子项的属性：flex：number，子项占剩余空间的份数比，如果只有两个子项没有设置宽高，那么分别felx：3 ,
  flex：2,则一个占3/5，一个占2/5。如果再加一个flex:1，则分别占比为 3/6 , 2/6, 1/6 .

思维导图笔记：