03 flex弹性布局父项常见属性总结

技术交流QQ群:1027579432，欢迎你的加入！

欢迎关注我的微信公众号：CurryCoder的程序人生

1.常见父项属性

• 以下有6个属性是对父元素设置的：
  • flex-direction: 设置主轴的方向
  • justify-content: 设置主轴上的子元素排列方式
  • flex-wrap: 设置子元素是否换行
  • align-content: 设置侧轴上的子元素的排列方式(多行)
  • align-items: 设置侧轴上的子元素排列方式(单行)
  • flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

2.flex-direction设置主轴的方向[重点]

• 主轴与侧轴：在flex布局中，是分为主轴和侧轴两个方向。同样的叫法有：行和列、x轴和y轴。
  • 默认的主轴方向是x轴方向，水平向右；
  • 默认的侧轴方向是y轴方向，水平向下；
    ![默认的主轴和侧轴方向].png](https://upload-images.jianshu.io/upload_images/13407176-60af17420c1a45a8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
• 属性值：flex-direction属性决定主轴的方向(即项目的排列方向)。注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，那剩下的就是侧轴。而我们的子元素是跟着主轴来排列的。
  
  flex-direction属性值.png

3.justify-content设置主轴上的子元素排列方式[重点]

• justify-content属性定义了项目在主轴上的对齐方式，注意：使用这个属性之前一定要确定好哪个是主轴。
  
  justify-content属性值.png

4.flex-wrap设置子元素是否换行

• 默认情况下，项目都排在一条线(又称为轴线)上，flex-wrap属性定义，flex布局中默认是不换行的。
  
  flex-wrap属性值.png

5.align-items设置侧轴上子元素的排列方式(单行)

• 该属性是控制子元素在侧轴(默认是y轴)上的排列方式，在子元素为单项(单行)时使用。
  
  align-items属性值.png

6.align-content设置侧轴上子元素的排列方式(多行)

• 该属性设置子项在侧轴上的排列方式，并且只能用于子项出现换行的情况(多行)，在单行下是没有效果的。
  
  align-content属性值.png

7.align-content和align-items对比

• align-items适用于单行情况下，只有上对齐、下对齐、居中和拉伸。
• align-content适用于换行(多行)的情况下(单行情况下无效)，可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
• 总结：单行找align-items,多行找align-content。

8.flex-flow

• flex-flow属性是flex-direction和flex-wrap属性的复合属性。

  flex-flow: row wrap;
  

9.资料下载

• 笔记及代码，欢迎star,follow,fork......