flex 换主轴后子元素占满_flex设置主轴上子元素的排列方式.html

设置主轴上的子元素的排列方式

div {

display: flex;

width: 80%;

height: 300px;

background-color: pink;

/* 设置主轴方向 */

/* flex-direction: row; */

flex-direction: column;

/* 设置子元素在主轴上的排列方式：justify-content属性 */

/* 从左到右 */

/* justify-content: flex-start; */

/* 从右到左 */

/* justify-content: flex-end; */

/* 居中 */

/* justify-content: center; */

/* 平分剩余空间 */

/* justify-content: space-around; */

/* 俩边贴边，再分配剩余空间 */

justify-content: space-between;

}

span {

width: 15%;

height: 100px;

background-color: skyblue;

}

1

2

3

4

一键复制

编辑

Web IDE

原始数据

按行查看

历史