Flex之justify-content 和 flex-direction

一、Flex 基础知识

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

1、两端布局

justify-content: space-between;

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

2、排列元素

调整主轴方向（默认为水平方向），使元素按行 或 按 列表 进行排列。

flex-direction: row | row-reverse | column | column-reverse;

二、效果

img

三、代码

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

上一篇：CSS之Flex布局

https://www.cnblogs.com/eddyz/p/16280424.html

Ref:

posted @ 2021-12-23 19:48  炎黄子孙，龙的传人  阅读(341)  评论(0)    收藏  举报