欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Flex之 justify-content 和 flex-direction 的应用

程序员文章站 2022-06-17 09:36:21
...


flex 简介：

采用Flex布局的元素，被称为Flex容器(flex container)，简称"容器"。其所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称"项目"


Flex-direction调整主轴方向（默认为水平方向）
包括row、column、row-reverse、column-reverse


https://www.cnblogs.com/wangyawei/p/9103573.html




要点1：
justify-content: space-between;
使元素各分部两端。

要点2：
flex-direction: row | column;
使元素 横向 或 纵向 排列 






<!doctype html>
<html>
<head>

    <style>
    
        body {
            padding:50px 200px;
        }
    
        .item {
            width: 300px;
            padding: 10px 20px;
            background: #f5f6f8;
        }
        
        .title-node {
            display: -webkit-flex;
            display: flex;
            -webkit-flex-direction: row;
            flex-direction: row;
            -webkit-justify-content: space-between;
            justify-content: space-between;
        }

        .title-left {
            display: -webkit-flex;
            display: flex;
            -webkit-flex-direction: column;
            flex-direction: column;
        }

        .title-right {
            display: -webkit-flex;
            display: flex;
            -webkit-flex-direction: row;
            flex-direction: row;
        }
        
        .t-txt {
            color: #39a;
            font-weight: bold;
        }
        .t-sub{
            color: #888;
        }
        .icon{
            line-height: 36px;
        }
    
    
    </style>

</head>
<body>

    <div class="title-node item">

        <div class="title-left">
            <div class="t-txt">
                This is a list item title
            </div>
            <div class="t-sub">
                item(0)
            </div>
        </div>
        
        <div class="title-right">
            <span class="icon">icon</span>
        </div>

    </div>


<body>
</html>
























--
相关标签： flex

上一篇： Flink流处理API——Sink

下一篇： Flink流处理API之Sink

推荐阅读