CSS+DIV,flex 弹性布局
flex 弹性布局 ( 设置主轴子元素排列方式 | justify-content 样式说明 | 子元素从头部开始排列 | 子元素从尾部开始排列 | 居中对齐 | 平均分配 )
一、设置主轴子元素排列方式 : justify-content 样式说明
justify-content 样式 属性值 说明 :
flex-start , 默认值 , 默认 子元素 从头部开始 排列 ;
如果主轴方向是 从左到右 row 方向 , 则子元素 从左到右 排列 ;
如果主轴方向是 从右到左 row-reverse 方向 , 则子元素 从右到左 排列 ;
flex-end , 子元素 从尾部开始 排列 ;
如果主轴方向是 从左到右 row 方向 , 则子元素 从右到左 排列 ;
如果主轴方向是 从右到左 row-reverse 方向 , 则子元素 从左到右 排列 ;
center , 子元素 在主轴方向上 居中对齐 ;
space-around , 平分剩余空间 ;
space-between , 两侧的子元素贴两边 , 其它元素平分剩余空间 ;
设置父容器中 左右两边的子元素盒子贴父容器的左右两侧 , 中间的盒子居中对齐 ;
二、示例展示及代码
1、代码示例 - 子元素从头部开始排列 ,
/* 子元素 从头部开始 排列 默认值 */
justify-content: flex-start;
2、代码示例 - 子元素从尾部开始排列
/* 子元素 从尾部开始 排列 */
justify-content: flex-end;
3、代码示例 - 子元素在主轴方向上居中对齐
/* 子元素 在主轴方向上 居中对齐 */
justify-content: center;
4、代码示例 - 子元素平均分配剩余空间
/* 子元素 子元素平均分配 剩余空间 */
justify-content: space-around;
5、代码示例 - 两侧的子元素贴两边 / 其它元素平分剩余空间
/* 子元素 两侧的子元素贴两边 , 其它元素平分 剩余空间 */
justify-content: space-between;
