<h2> align-self </h2> ※align-itemsにはflex-startを指定。 <h3> auto(初期値。align-itemsの値を継承。) </h3> <div class="wrapper auto"> <div class="box a">A</div> <div class="box b">B</div> <div class="box c">C</div> <div class="box d">D</div> <div class="box e">E</div> <div class="box f">F</div> </div> <h3> stretch </h3> <div class="wrapper stretch"> <div class="box a">A</div> <div class="box b">B</div> <div class="box c">C</div> <div class="box d">D</div> <div class="box e">E</div> <div class="box f">F</div> </div> <h3> flex-start </h3> <div class="wrapper flex-start"> <div class="box a">A</div> <div class="box b">B</div> <div class="box c">C</div> <div class="box d">D</div> <div class="box e">E</div> <div class="box f">F</div> </div> <h3> flex-end </h3> <div class="wrapper flex-end"> <div class="box a">A</div> <div class="box b">B</div> <div class="box c">C</div> <div class="box d">D</div> <div class="box e">E</div> <div class="box f">F</div> </div> <h3> center </h3> <div class="wrapper center"> <div class="box a">A</div> <div class="box b">B</div> <div class="box c">C</div> <div class="box d">D</div> <div class="box e">E</div> <div class="box f">F</div> </div> <h3> baseline </h3> <div class="wrapper baseline"> <div class="box a">A</div> <div class="box b">B</div> <div class="box c">C</div> <div class="box d">D</div> <div class="box e">E</div> <div class="box f">F</div> </div>
body { padding: 20px; padding-bottom:100px; font-family: Helvetica; } .wrapper { display: flex; background-color:#eee; margin-bottom:10px; border:1px solid #CCC; height:150px; align-items:flex-start; } .auto > .box { align-self: auto; } .stretch > .box { align-self: stretch; } .flex-end > .box { align-self: flex-end; } .center > .box { align-self: center; } .baseline { .box { align-self: baseline; } .a { height:70px; } .b { font-size:3rem; } .c { font-size:0.5rem; padding:1rem; } } .box { background-color: #20262e; color: #fff; border-radius: 3px; padding: 20px; margin:10px; font-size: 14px; }