|flex布局父元素属性有哪些？

文章图片

文章图片

我们继续上节课的flex布局父元素属性进行讲解：
1、flex布局父元素属性：1）flex-wrap 。主要作用是确定主轴的子元素是否换行。主要有2个值：
①flex-wrap: nowrap;意思是按照主轴方向不换行，有多少排多少（一般为默认不换行）：
如下图父元素的宽度为500像素，子元素盒子加起来宽度大于500 ，会直接撑大盒子并且不换行：

②flex-wrap: wrap;意思是按照主轴方向换行，当父元素盒子盛不下，就会换行显示：

2）align-items主要作用是确定副轴的子元素排列的位置。可以配合主轴排列（justify-content）一起使用，主要有3个值：
①align-items: flex-start;意思是按照副轴方向上或者向左对齐：
【|flex布局父元素属性有哪些？】若主轴方向为x轴，那么副轴即为y轴上向上对齐；若主轴方向为y轴，那么副轴即为x轴上向左对齐：
②align-items: flex-end;意思是按照副轴方向下或者向右对齐：
若主轴方向为x轴，那么副轴即为y轴上向下对齐；若主轴方向为y轴，那么副轴即为x轴上向右对齐：
③align-items: center;意思是按照副轴方水平或者垂直居中如下图实现了水平垂直居中效果：

注意：align-items这个属性只对单行的子元素有效，对于换行的子元素无效，下节课我们继续讲一下多行元素如何排列。