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

Lixh1986

浏览: 1115856 次

最近访客更多访客>>

Z865785437029

akingde

ningzong

蕃薯耀

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

flex

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>

分享到：

java 将文件夹所有的文件合并到指定的文件 ...

2021-12-23 19:39
浏览 435
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

CSS之页面元素飞入效果

CSS之垂直居中

Sass之&引用父选择器

HTML5之canvas之粒子效果

CSS之导航栏设计之 ul 之 li 标签排成一行

HTML5/CSS3鼠标滑过图片滤镜动画效果

CSS之提示框实现

Responsive Web Design（自响应式网页设计）

css 之 linear-gradient 之 进度条（progress bar）

在 css 中使用 @font-face

jQuery之mouseover,mouseover,mouseout,mouseleave

css:flex布局

网站页面配色

BootstrapCSS之Select

CSS样式之带边框的 Anchor（超链接）

bootstrap css之响应式导航栏

CSS之 white-space : pre

CSS - li 元素显示在一行____ a 元素没有下横线

CSS - table 圆角 border radius

[css - hr ] border color 横线高度和颜色

最近访客更多访客>>

css 之 linear-gradient 之进度条（progress bar）