弹性盒子常用属性

弹性盒子常用属性

display设置为flex属性

flex-direction属性:设置子元素的排列方式，同时设置主轴，默认的情况下x轴为主轴

flex-direction: row | column | row-reverse | column-reverse

• row:设置子元素为x轴正向排列（默认）此时主轴为x轴，侧轴为y轴
• row-reverse：设置子元素为x轴从右往左排列 此时主轴为x轴，侧轴为y轴
• column：设置子元素为y 轴正向排列 ，当设置了这个属性后，主轴变成y轴，侧轴变成x轴
• column-reverse：设置子元素为y 轴反向排列 ，当设置了这个属性后，主轴变成y轴，侧轴变成x轴
• 注意：主轴的方向并不是不变的，它是相对于这个属性而变化

---

justify-content属性:设置主轴的排列方式，此属性作用于父元素上

justify-content: center | flex-start | flex-end | space-around | between-around

• space-around:子元素平均分布于父元素的主轴上
• between-around：首位两个子元素贴着父元素的边，其余的子元素平均分布

---

align-items属性:设置侧轴的排列方式，此属性作用于父元素上

align-items: center | flex-start | flex-end | space-around | between-around

• space-around:子元素平均分布于父元素的主轴上
• between-around：首位两个子元素贴着父元素的边，其余的子元素平均分布

---

align-self属性:弹性子元素的属性，用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。

align-content: center | flex-start | flex-end | space-around | between-around

• space-around:子元素平均分布于父元素的主轴上
• between-around：首位两个子元素贴着父元素的边，其余的子元素平均分布

---

align-self属性:弹性子元素的属性，用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。

align-content: center | flex-start | flex-end | space-around | between-around

• space-around:子元素平均分布于父元素的主轴上
• between-around：首位两个子元素贴着父元素的边，其余的子元素平均分布

---

flex-wrap属性:当多个子元素的宽超过父元素时，设置是否换行

flex-wrap: wrap | no-wrap | wrap-reverse(反转)

---

可参考网址： http://www.runoob.com/css3/css3-flexbox.html