弹性盒子

最新推荐文章于 2023-06-16 14:25:52 发布

我是你要找的bug

最新推荐文章于 2023-06-16 14:25:52 发布

阅读量168

点赞数

分类专栏： CSS3 文章标签：弹性盒子

本文链接：https://blog.csdn.net/XUYIGE/article/details/103163622

版权

CSS3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

弹性盒子基础的属性：display: flex
给一个元素添加该属性，则这个元素就会变成弹性盒子模式
在父元素中添加：display:flex; display:-webkit-flex; 那么所有的子元素会自动横向排列。
祖先元素添加:direction:ltr/rtl 则子元素排列方向为：左到右/右到左
例如：一个盒子中三个小盒子1、2、3 ，它们的排列方向是横向从右到左排列，代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
      body{
            direction: rtl;
        }
        .box{
            height:300px;
            display:flex;
            display:-webkit-flex;
           /* flex-direction:column-reverse;*/
            /*justify-content:space-around;*/
        }
        .box>div{
            width:300px;
            height:300px;
            background: yellowgreen;
            border:solid 1px #000;
        }
    </style>
</head>
<body>
<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
</body>
</html>

子元素排列方式 :(在父元素中添加）
flex-direction:row/row-reverse/column/column-reverse
（分别表示：横向从左到右排列/ 横向从右到左排列/纵向从上到下排列/纵向从下到上排列）
justify-content:flex-start/flex-end/center/space-between/space-around
（分别表示：在右/在左/居中/ 左右两边贴边，中间间距等分，类似text-align:justify/项目两端距离相等，设置了项目左右两端的距离相等）
子元素垂直对齐方式：(在父元素中添加）
align-items:flex-start/flex-end/center/baseline/stretch
（分别表示：顶端/底端/居中/基线/默认auto）
子元素换行方式：（在父元素添加）
flex-wrap:nowarp/wrap/wrap-reverse/initial/inherit
单行（不换行，会溢出）/多行，自动换行/换行，反转排列/初始化默认效果相似/默认（不换行）
align-content 设置行对齐方式：（添加到父元素中）
前提条件是flex-wrap为wrap时才可以用
align-content:stretch/flex-start/flex-end/center/space-between/space-around
默认/顶端、底端、居中、两端、平均分布
子元素顺序：（在子元素添加）
order：1，值越小越靠前可以为负值
子元素对齐（在子元素添加）
margin:auto;对象自动留白

子元素纵向对齐：（在子元素添加）
align-self:
auto/flex-start/flex-end/center/baseline/stretch
有父元素按align-items值走，无父元素按stretch走/靠顶端/靠底端/居中/基线/以父元素为参考点走
按比例分配元素：（在子元素添加）
flex:比例值
如：
div>div*3
子元素按顺序添加flex:1 flex:3 flex:1 结果：1：3：1

keyframe动画
定义动画
@keyframe name{
//方法1
from{}
to{}
//方法2
0%{}
50%{}
100{}
}
调用：
animation:延迟时间动画名称动画运行时间频率循环结束后反向运行
eg:
animation:2s move 3s linear infinite alternate;
下面是一个动画代码片段：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width:100px;
            height:100px;
            background: pink;
            animation:2s move 3s linear infinite alternate;
          /*  animation-direction: reverse;*/
        }
        @keyframes move {
            0%{}
            20%{
                transform: translateX(200px);
                background: yellow;
                border-radius:20px;
                
            }
            60%{
                transform: translate(200px,200px) rotate(360deg);
                background: red;
                border-radius:50%;
            }
            100%{
                transform:translate(100px,200px);
                background: blueviolet;
            }
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>