Flex

作者: _____西班木有蛀牙 | 来源:发表于2019-06-14 16:01 被阅读0次

CSS基础记录
flex布局 flex， flex-grow，flex-shri
Flex 容器布局
flex 的三个参数 flex:1 0 auto
flex布局的伸缩规则
2018-10-10
flex 布局教程笔记
CSS相关
css3属性
史上最全flex兼容写法整理

Flex中left right margin-left margin-right auto 的影响

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flex</title>
    <style>
        ul, li {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        ul {
            display: flex;
            flex-flow: row-reverse wrap-reverse;
            width: 200px;
        }
        li {
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: #fff;
            font-size: 24px;
            background: red;
            outline: 1px solid #333;
            /* left: 15px; */
            /* position: relative; */
            /* right: 15px; */
            /* margin-left: 15px; */
        }
    </style>
</head>
<body>
    <ul>
        <li style="
            /* left: 15px; */
            /* position: relative; */
            /* right: 15px; */
            /* margin-left: 15px; */
            /* margin-right: 15px; */
            /* margin: 0 auto; */
        ">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li style="
            /* margin: 0 auto; */
            margin-right: auto;
        ">5</li>
        <li style="
            /* margin: 0 auto; */
            margin-left: auto;
        ">6</li>
    </ul>
</body>
</html>