CSS align-content属性

2019-11-23 本文已影响0人 Kkite

align-content堆栈（由flex-wrap产生的独立行）对齐

align-content是针对flex容器里面多轴（多行）的情况，align-items是针对一行的情况进行排列。
必须对父元素设置自由盒属性display：flex; 并且设置排列方式为横向排列flex-direction:row; 并且设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用

值	描述
stretch	默认值。项目被拉伸以适应容器。
center	项目位于容器的中心。
flex-start	项目位于容器的结尾。
flex-end	项目位于容器的结尾。
space-between	项目位于各行之间留有空白的容器内。
space-around	项目位于各行之前、之间、之后都留有空白的容器内。

html案例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        section{
            width: 60%;
            height: 600px;
            border: 2px solid pink;
            margin: 100px auto;
            display: flex;
            flex-flow: row wrap;    /*这句话必须有 否则下面的不起效果*/
            /*align-content: stretch;*/
            /*align-content: center;*/
            /*align-content: flex-start;*/
            /*align-content: flex-end;*/
            /*align-content: space-between;*/
            /*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: skyblue;
        }
        div:nth-child(4){
            background-color: hotpink;
        }
        div:nth-child(5){
            background-color: deeppink;
        }
        div:nth-child(6){
            background-color: yellow;
        }
        div:nth-child(7){
            background-color: lightyellow;
        }
    </style>
</head>
<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
    </section>
</body>
</html>