Hello! The align-content property does not work for me Here it works. It does not work for me. Here is the code.

 * { margin: 0; padding: 0; } html { overflow-y: scroll; } .super { height: 600px; margin: 10px; border: 1px solid #F00; } .main { height: 100px; border: 1px solid #00F; } .a1, .a2, .a3 { height: 50px; width: 50px; padding: 10px; color: #FFF; } .a1 { background-color: #ff6600; } .a2 { background-color: #8ccb58; } .a3 { background-color: #2b689c; } .fl-container-wrap { /*многострочный Ρ€Π΅ΠΆΠΈΠΌ*/ flex-wrap: wrap; /*Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ, Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² многострочном Ρ€Π΅ΠΆΠΈΠΌΠ΅*/ align-content: center; } .fl-container { display: flex; /*Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Π³Π»Π°Π²Π½ΠΎΠΉ оси*/ flex-direction: row; /*Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π³Π»Π°Π²Π½ΠΎΠΉ оси*/ justify-content: flex-start; /*Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΠΏΠΎΠΏΠ΅Ρ€Π΅Ρ‡Π½ΠΎΠΉ оси*/ align-items: flex-start; } 
 <div class="super fl-container-wrap"> <div class="main fl-container"> <div class="a1">1</div> <div class="a2">2</div> <div class="a3">3</div> </div> <div class="main fl-container"> <div class="a1">1</div> <div class="a2">2</div> <div class="a3">3</div> </div> <div class="main fl-container"> <div class="a1">1</div> <div class="a2">2</div> <div class="a3">3</div> </div> </div>

Three blocks should be centered on align-content: center; but nothing happens.

enter image description here

If anyone encountered this problem, tell me. Thank you in advance.

    1 answer 1

     * { margin: 0; padding: 0; box-sizing: border-box; } html { overflow-y: scroll; } .super { height: 600px; margin: 10px; border: 1px solid #F00; } .main { height: 200px; border: 1px solid #00F; } .a1, .a2, .a3 { height: 200px; width: 50px; padding: 10px; color: #FFF; } .a1 { background-color: #ff6600; } .a2 { background-color: #8ccb58; } .a3 { background-color: #2b689c; } .fl-container-wrap { display: flex; /*многострочный Ρ€Π΅ΠΆΠΈΠΌ*/ flex-flow: row wrap; } .fl-container { display: flex; width: 100%; } 
     <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>New Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π°</title> <link href="css/style.css" rel="stylesheet" /> </head> <body> <div class="super fl-container-wrap"> <div class="main fl-container"> <div class="a1">1</div> <div class="a2">2</div> <div class="a3">3</div> </div> <div class="main fl-container"> <div class="a1">1</div> <div class="a2">2</div> <div class="a3">3</div> </div> <div class="main fl-container"> <div class="a1">1</div> <div class="a2">2</div> <div class="a3">3</div> </div> </div> </body> </html>

    Second example

     * { margin: 0; padding: 0; box-sizing: border-box; } html { overflow-y: scroll; } .super { height: 600px; margin: 10px; border: 1px solid #F00; } .a1, .a2, .a3 { padding: 10px; color: #FFF; } .a1 { background-color: #ff6600; } .a2 { background-color: #8ccb58; } .a3 { background-color: #2b689c; } .fl-container-wrap { display: flex; flex-flow: row wrap; } 
     <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>New Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π°</title> <link href="css/style.css" rel="stylesheet" /> </head> <body> <div class="super fl-container-wrap"> <div class="a1">1</div> <div class="a2">Opportunity is missed by most people because it is dressed in overalls and looks like work.</div> <div class="a3">3</div> <div class="a1">1</div> <div class="a2">2</div> <div class="a3">Work is a necessary evil to be avoided. Mark Twain</div> <div class="a1">1</div> <div class="a2">2</div> <div class="a3">3</div> </div> </body> </html>

    • Dear stackanon, this is a multi-line mode flex-wrap: wrap; and about vertical alignment in multiline mode using the align-content: center property; In my question I even gave a link to the site where it is shown. - Anton
    • Could you attach a picture of the desired end result? Link to the site does not provide clarity. - stackanon
    • @Anton at .fl_container put align-items: center; and there will be elements in your center vertically - Vasily Barbashev
    • @Anton changed the example. Added .fl-container-wrap display: flex and flex-flow: column wrap; - stackanon
    • html5.by/blogdemo/flexbox/flex-direction-multiline.html - Anton