flex

flex布局

---

基础概念的理解

1. 容器 container

2. 项目 item

   

容器属性

1. flex-dirrction

2. flex-wrap

3. justify-content

4. align-items

5. align-content

   1. flex-dirrction 排列顺序属性

   

   2. flex-wrap item是否换行（子元素是否换行）

   

   3. justify-content横向对齐的方式

4. align-items 纵向对其方式

5. align-content 换行情况下 每行跟每行的排列顺序

---

项目属性

1. order

2. flex-grow

3. flex-shrink

4. flax-basis — 我认为蛋用没有不用学

5. flex（2,3,4的简写形式）

6. flex-self

   order

   

   flex-grow

   

   flex-shrink

   

   flex-self ( 覆盖父级配备的align-item属性 )

   

学习与https://www.bilibili.com/video/BV1t7411E7tn?t=2256 B站的耕耕技术宅图片出处也是这里