代码
<link rel="stylesheet" href="css/style.css">
<title>Title</title>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
section {
width: 1000px;
height: 300px;
border: 2px solid pink;
margin: 100px auto;
display: flex;
/*justify-content: flex-start;让子元素开始从父容器的开头开始排序，但是盒子顺序不变*/
/*justify-content: flex-end;让子元素从父容器的开头开始排序，但是盒子顺序不变*/
/*justify-content: center;让子元素在父容器中间提示*!*/
/*justify-content: space-between;左右的盒子贴近父盒子, 中间的平均分布空白间距 */
justify-content: space-around; /*相当于给每个盒子添加了左右margin外边距*/
/*垂直对齐*/
/*align-items: flex-start;上对其*/
/*align-items: flex-end;底对其*/
/*align-items: center;垂直居中*/
align-items: stretch; /*相当于height:100%;让子元素的高度拉伸适用父容器(子元素不给高度的前提下)*/
/*规定灵活的项目不拆行不拆列,不换行,则收缩或(压缩)显示 强制一行内显示 */
flex-wrap: nowrap;
/*flex-wrap: wrap;*/
/*flex-wrap: wrap-reverse; 翻转*/
}
div {
width: 250px;
height: 200px;
}
div:first-child {
background-color: pink;
}
div:nth-child(2) {
background-color: purple;
}
div:nth-child(3) {
background-color: blue;
}
div:nth-child(4) {
background-color: green;
}
div:nth-child(5) {
background-color: yellow;
}
结果
image.png
代码
<link rel="stylesheet" href="css/style.css">
<title>Title</title>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</section>
section {
width: 1000px;
height: 600px;
border: 2px solid pink;
margin: 100px auto;
display: flex;
flex-flow: row wrap;/*这家伙必须有，否则下面的不起效果*/
align-content: space-around;
}
div {
width: 250px;
height: 200px;
}
div:first-child {
background-color: pink;
}
div:nth-child(2) {
background-color: purple;
}
div:nth-child(3) {
background-color: blue;
}
div:nth-child(4) {
background-color: green;
}
div:nth-child(5) {
background-color: red;
}
div:nth-child(6) {
background-color: yellow;
}
div:nth-child(7) {
background-color: aqua;
}
div:nth-child(8) {
background-color: brown;
order: -1;
}
结果
image.png
