CSS | свойство align-content

Опубликовано: 1 Марта, 2022

Свойство align-content изменяет поведение свойства flex-wrap. Он выравнивает гибкие линии. Он используется для указания выравнивания между линиями внутри гибкого контейнера. Это свойство определяет, как каждая гибкая линия выравнивается внутри гибкого бокса, и применимо только в том случае, если применяется flex-wrap: wrap, т.е. если присутствует несколько строк элементов гибкого бокса.

Список свойств align-content:

  • центр
  • потягиваться
  • гибкий старт
  • гибкий конец
  • пространство вокруг
  • пространство между

Описание стоимости недвижимости с примером

    center: линии помещаются в центр гибкого контейнера.

  • Синтаксис:
    выровнять контент: центр;
  • Example:
    <!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>                    
  • Output:

stretch: The line stretched to take the remaining space of flex container. It is the default value.

  • Syntax:
    align-content: stretch;
  • Example:
    <!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>                    
  • Output:

flex-start: Displays the lines at the start of the flex container.

  • Syntax:
    align-content: flex-start;
  • Example:
    <!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>                    
  • Output:

flex-end: Displays the flex lines at the end of the flex container

  • Syntax:
    align-content: flex-end;
  • Example:
    <!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>                    
  • Output:

space-around: By using space-around property space will be distributed equally around the flex lines.

  • Syntax:
    align-content: space-around;
  • Example:
    <!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>                    
  • Output:

space-between: Displays the flex lines with equal space between them.