首页 > 其他分享> 文章详细

Flex之justify-content 和 flex-direction

2021-12-23 20:03:15 阅读：144 来源： 互联网

标签：Flex direction flex content webkit display row

基础知识：

采用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;

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

效果：

代码：

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

标签：Flex,direction,flex,content,webkit,display,row
来源： https://www.cnblogs.com/eddyz/p/15724982.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Flex之justify-content 和 flex-direction