<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body ul{ margin: 0; padding: 0; min-height: 100vh; } ul{ background-color: blue; /* flex 控制内部元素的布局 */ display: flex; /* flex-direction 调整当前flex元素主轴方向 */ /* flex-direction: row-reverse; */ /* flex-direction: column-reverse; */ /* flex-wrap 当内部的所有flex元素一行内容不下的时候换行 */ /* flex-flow 是 flex-direction flex-wrap 的缩写*/ /* flex-flow: row-reverse wrap; */ /* justify-content: flex-end; */ /* justify-content: space-around; */ /* flex-direction: row-reverse; */ /* align-items: center; */ /* flex-wrap: wrap; align-content: flex-end; */ } li{ list-style: none; /* width: 100px; */ flex-basis: 100px; height: 100px; background-color: orangered; margin: 10px; /* float: left; */ color: #fff; text-align: center; line-height: 100px; /* flex-grow: 1; */ } li:nth-child(3){ /* order: -1; */ /* flex-grow: 1; */ /* flex-shrink: 0; */ align-self: flex-end; } </style> </head> <body> <!-- <a href="https://www.runoob.com/w3cnote/flex-grammar.html">flex 文档</a> --> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <!-- <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> --> </ul> </body> </html>