<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>实现flex布局中，单独某个元素挪到右侧、底部</title> <style> ul { position: absolute; margin: 0; padding: 0; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-wrap: wrap; } li { list-style: none; width: 100px; height: 100px; background: lightgray; margin: 50px; } li:last-of-type { text-align: center; line-height: 100px; color: white; background: red; margin: 0; /*【关键代码】----------------------------------------*/ /*右侧*/ margin-left: auto; /*底部*/ align-self: flex-end; /*----------------------------------------*/ } </style> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li>右侧底部</li> </ul> </body> </html>
另外也可以用
align-self: auto | flex-start | flex-end | center | baseline | stretch;
