Flex之justify-content 和 flex-direction

基础知识:

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

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

 

 

要点1:

justify-content: space-between;

使元素分布到容器两端。类似于 float left , float right 的功能。

 

要点2:

flex-direction: row | column;

使元素按行 或 按 列表 进行排列。

 

效果:

Flex之justify-content 和 flex-direction

 

代码:

<!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>

  

 

 

 

 

 

 

 

 

 引用:

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

-

 

上一篇:CSS – Flex


下一篇:Python游戏开发,pygame模块,Python实现贪吃蛇小游戏