2019-07-29 css07完32到完

代码

 <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