CSS align-content用法及代码示例

align-content属性更改flex-wrap属性的行为。它对齐弯曲线。用于指定柔性容器内的线之间的对齐方式。此属性定义如何在flexbox中对齐每个flex线，并且仅在应用flex-wrap：wrap时(即，存在多行flexbox项时)适用。

align-content属性列表：

center
stretch
flex-start
flex-end
space-around
space-between

用示例描述属性值

中央：

用法:
```
align-content:center;
```

例：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>align-content property</title> 
        <style> 
            .main-container { 
                display:flex; 
                height:400px; 
                flex-wrap:wrap; 
                align-content:center; 
                background-color:green; 
            } 
              
            .main-container div { 
                background-color:#f4f4f4; 
                width:100px; 
                margin:10px; 
                text-align:center; 
                font-size:50px; 
            } 
            h2 { 
                text-align:center; 
            } 
            .geeks { 
                font-size:40px; 
                text-align:center; 
                color:#009900; 
                font-weight:bold; 
            }  
        </style> 
    </head> 
    <body> 
        <div class = "geeks">GeeksforGeeks</div> 
        <h2>align-content:center;</h2> 
        <div class="main-container"> 
            <div>1</div> 
            <div>2</div> 
            <div>3</div>  
            <div>4</div> 
            <div>5</div> 
            <div>6</div>  
            <div>7</div> 
            <div>8</div> 
            <div>9</div>  
            <div>10</div> 
        </div> 
    </body> 
</html>

输出：

Stretch：拉伸线以占据flex容器的剩余空间。它是默认值。

用法:
```
align-content:stretch;
```

例：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>align-content property</title> 
        <style> 
            .main-container { 
                display:flex; 
                height:400px; 
                flex-wrap:wrap; 
                align-content:stretch; 
                background-color:green; 
            } 
              
            .main-container div { 
                background-color:#f4f4f4; 
                width:100px; 
                margin:10px; 
                text-align:center; 
                font-size:50px; 
            } 
            h2 { 
                text-align:center; 
            } 
            .geeks { 
                font-size:40px; 
                text-align:center; 
                color:#009900; 
                font-weight:bold; 
            }  
        </style> 
    </head> 
    <body> 
        <div class = "geeks">GeeksforGeeks</div> 
        <h2>align-content:stretch;</h2> 
        <div class="main-container"> 
            <div>1</div> 
            <div>2</div> 
            <div>3</div>  
            <div>4</div> 
            <div>5</div> 
            <div>6</div>  
            <div>7</div> 
            <div>8</div> 
            <div>9</div>  
            <div>10</div> 
        </div> 
    </body> 
</html>

输出：

flex-start：在flex容器的开头显示行。

用法:
```
align-content:flex-start;
```

例：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>align-content property</title> 
        <style> 
            .main-container { 
                display:flex; 
                height:400px; 
                flex-wrap:wrap; 
                align-content:flex-start; 
                background-color:green; 
            } 
              
            .main-container div { 
                background-color:#f4f4f4; 
                width:100px; 
                margin:10px; 
                text-align:center; 
                font-size:50px; 
            } 
            h2 { 
                text-align:center; 
            } 
            .geeks { 
                font-size:40px; 
                text-align:center; 
                color:#009900; 
                font-weight:bold; 
            }  
        </style> 
    </head> 
    <body> 
        <div class = "geeks">GeeksforGeeks</div> 
        <h2>align-content:flex-start;</h2> 
        <div class="main-container"> 
            <div>1</div> 
            <div>2</div> 
            <div>3</div>  
            <div>4</div> 
            <div>5</div> 
            <div>6</div>  
            <div>7</div> 
            <div>8</div> 
            <div>9</div>  
            <div>10</div> 
        </div> 
    </body> 
</html>

输出：

flex-end：在伸缩容器的末尾显示伸缩线

用法:
```
align-content:flex-end;
```

例：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>align-content property</title> 
        <style> 
            .main-container { 
                display:flex; 
                height:400px; 
                flex-wrap:wrap; 
                align-content:flex-end; 
                background-color:green; 
            } 
              
            .main-container div { 
                background-color:#f4f4f4; 
                width:100px; 
                margin:10px; 
                text-align:center; 
                font-size:50px; 
            } 
            h2 { 
                text-align:center; 
            } 
            .geeks { 
                font-size:40px; 
                text-align:center; 
                color:#009900; 
                font-weight:bold; 
            }  
        </style> 
    </head> 
    <body> 
        <div class = "geeks">GeeksforGeeks</div> 
        <h2>align-content:flex-end;</h2> 
        <div class="main-container"> 
            <div>1</div> 
            <div>2</div> 
            <div>3</div>  
            <div>4</div> 
            <div>5</div> 
            <div>6</div>  
            <div>7</div> 
            <div>8</div> 
            <div>9</div>  
            <div>10</div> 
        </div> 
    </body> 
</html>

输出：

space-around：通过使用space-around，属性空间将在柔性线周围平均分布。

用法:
```
align-content:space-around;
```

例：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>align-content property</title> 
        <style> 
            .main-container { 
                display:flex; 
                height:400px; 
                flex-wrap:wrap; 
                align-content:space-around; 
                background-color:green; 
            } 
              
            .main-container div { 
                background-color:#f4f4f4; 
                width:100px; 
                margin:10px; 
                text-align:center; 
                font-size:50px; 
            } 
            h2 { 
                text-align:center; 
            } 
            .geeks { 
                font-size:40px; 
                text-align:center; 
                color:#009900; 
                font-weight:bold; 
            }  
        </style> 
    </head> 
    <body> 
        <div class = "geeks">GeeksforGeeks</div> 
        <h2>align-content:space-around;</h2> 
        <div class="main-container"> 
            <div>1</div> 
            <div>2</div> 
            <div>3</div>  
            <div>4</div> 
            <div>5</div> 
            <div>6</div>  
            <div>7</div> 
            <div>8</div> 
            <div>9</div>  
            <div>10</div> 
        </div> 
    </body> 
</html>

输出：

space-between：显示伸缩线，它们之间的间距相等。

用法:
```
align-content:space-between;
```

例：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>align-content property</title> 
        <style> 
            .main-container { 
                display:flex; 
                height:400px; 
                flex-wrap:wrap; 
                align-content:space-between; 
                background-color:green; 
            } 
              
            .main-container div { 
                background-color:#f4f4f4; 
                width:100px; 
                margin:10px; 
                text-align:center; 
                font-size:50px; 
            } 
            h2 { 
                text-align:center; 
            } 
            .geeks { 
                font-size:40px; 
                text-align:center; 
                color:#009900; 
                font-weight:bold; 
            }  
        </style> 
    </head> 
    <body> 
        <div class = "geeks">GeeksforGeeks</div> 
        <h2>align-content:space-between;</h2> 
        <div class="main-container"> 
            <div>1</div> 
            <div>2</div> 
            <div>3</div>  
            <div>4</div> 
            <div>5</div> 
            <div>6</div>  
            <div>7</div> 
            <div>8</div> 
            <div>9</div>  
            <div>10</div> 
        </div> 
    </body> 
</html>

输出：

支持的浏览器：CSS |下面列出了align-content属性：

谷歌浏览器21.0
Internet Explorer 11.0
Firefox 28.0
Opera 12.1
Safari 9.0、7.0 -webkit-

相关用法

注：本文由纯净天空筛选整理自ManasChhabra2大神的英文原创作品 CSS | align-content property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。