flex常用属性总结及示例

一、flex常用属性

1.容器上的属性

属性	描述	常用值
display	定义元素为弹性容器	flex
flex-flow	定义容器的主轴方向	row、column、nowrap、wrap
place-content	定义项目在主轴上的位置	start、end、center、space-between、space-around、space-evenly
place-items	定义项目在交叉轴上的位置	stretch、start、end、center

2.项目上的属性

属性	描述	常用值
flex	定义项目是否允许放大或缩小以及默认值	flex: 1 0 auto;
order	定义项目在容器类的排序	order: 0;
place-self	定义某个项目在交叉轴上的位置	用法和place-items一样、会覆盖掉place-items

二、示例

效果图

html部分

<body>
    <div class="main">
        <div class="login">
            <a href="">登录</a>丨
            <a href="">注册</a>
        </div>
        <div class="slogan">PHP中文网 - 程序员梦开始的地方！</div>
    </div>
</body>

CSS部分

<style>
    .main {
        /* 定义“flex”为一个弹性容器 */
        display: flex;
        /* 定义“flex”容器内的所有项目执行横向、不换行 */
        flex-flow: row nowrap;
        /* 定义“flex”容器内的所有剩余可用空间，在两个项目的中间位置 */
        place-content: space-between;
        /* 定义“flex”容器内的所有项目的宽和高 以及背景色 */
        width: 100%;
        height: 60px;
        background-color: blueviolet;
        /* 定义“flex”容器内所有项目在交叉轴上的位置 */
        place-items: center;
    }
    .main>div {
        /* 定义“flex”容器内所有项目的高度以及背景色 */
        width: 100px;
        height: 20px;
        background-color: blue;
    }
    .main * {
        /* 字体颜色设为蓝绿色 , a标签去除下划线*/
        color: cyan;
        text-decoration: none;
    }
    .main>.slogan {
        /* 定义“slogan”项目的排序位置提前 */
        order: 0;
        /* 定义“solgen”项目可随视觉窗口变大而变大 */
        flex: 1 0 auto;
        /* 为了能能够更直观的看清“solgen”项目的变化，给它换个背景色 */
        background-color: orange;
        /* 我们再让“solgen”项目在交叉轴上的位置在开始端 */
        place-self: start;
    }
    .main>.login {
        /* 定义“login”项目内的内容居右显示 ,及排序位置靠后*/
        text-align: right;
        order: 999;
    }
</style>

flex常用属性总结及示例

flex常用属性总结及示例

一、flex常用属性

二、示例

相关文章