伸缩布局之是否换行

来源：互联网发布：程序员面试题库编辑：程序博客网时间：2024/05/13 02:22
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        * {            margin: 0;            padding: 0;            list-style: none;        }        body {            background-color: #999999;        }        section {            width: 800px;            margin: 30px auto;        }        ul {            background-color: white;            border: 1px solid #000;            overflow: hidden;        }        li {            width: 150px;            height: 150px;            background-color: pink;            margin: 10px;        }        section:nth-child(1) ul li {            float: left;        }        section:nth-child(2) ul {            display: flex;            justify-content: flex-end;            flex-wrap: wrap;        }    </style></head><body><section>    <h3>正常布局</h3>    <ul>        <li>1</li>        <li>2</li>        <li>3</li>    </ul></section><section>    <h3>伸缩布局,justify-content: flex-end;行内结束位置对齐</h3>    <ul>        <li>1</li>        <li>2</li>        <li>3</li>        <li>1</li>        <li>2</li>        <li>3</li>        <li>1</li>        <li>2</li>        <li>3        <li>1</li>        <li>2</li>        <li>3</li>        <li>1</li>        <li>2</li>        <li>3</li>        <li>1</li>        <li>2</li>        <li>3</li>        <li>1</li>        <li>2</li>        <li>3</li>        <li>1</li>        <li>2</li>        <li>3</li>    </ul></section></body></html>
0 0