<h4>默认 stretch</h4> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <h4>flex-start</h4> <ul id="second"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <h4>flex-end</h4> <ul id="third"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <h4>flex-end</h4> <ul id="forth"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <h4>base-line</h4> <ul id="fifth"> <li>x</li> <li>hello base line </li> <li>3</li> <li>4</li> </ul>
ul { display: flex; width: 400px; height: 80px; padding: 4px; border: 1px solid #ddd; } li { width: 50px; list-style:none; border: 1px solid #ddd; background: #eee; } li + li { margin-left: 10px; } ul#second{ align-items: flex-start; } ul#third { align-items: flex-end; } ul#forth { align-items: center; } ul#fifth { align-items: baseline; }