上海市|flex布局常用属性（二）在线教育

文章图片

文章图片

文章图片

文章图片

文章图片

文章图片

我们继续上节课的flex布局父元素属性进行讲解：
1、flex布局父元素属性：1）justify-content 。主要作用是确定主轴的子元素的排列位置。主要有五个值：
①justify-content: flex-start;意思是按照主轴方向从上到下或者从左到右排列：
若主轴方向为x轴， justify-content: flex-start为子元素从左到右依次排列（由于默认是x轴为主轴因此在下面的例子中省略了）：

若主轴方向为y轴， justify-content: flex-start为子元素从上到下依次排列：

②justify-content:flex-end;意思是按照主轴方向从下到上或者从右到左排列：
若主轴方向为x轴， justify-content: flex-end;为子元素从右到左依次排列；若主轴方向为y轴， justify-content: flex-end;为子元素从下到上依次排列；
【上海市|flex布局常用属性（二）】

③justify-content:center;意思是按照主轴方向水平或者垂直居中：
若主轴方向为x轴， justify-content: center;为子元素水平；否则垂直居中：

④justify-content:space-around;意思是按照主轴方向平均分配空间：
若主轴方向为x轴， justify-content: space-around;为子元素水平平均分配；否则垂直平均分配：

⑤justify-content:space-between;意思是按照主轴方向最左边和最右边元素靠边对齐，其他子元素平均分配空间：
若主轴方向为x轴， justify-content: space-between;为子元素水平平均分配；否则垂直平均分配：