实例演示flex容器与项目中常用的属性

实例演示flex容器与项目中常用的属性

  1. dispaly:flex实现了什么?
    将元素属性转换为flex弹性盒子,布局更方便简单。

flex项目在主轴上的排列方式

项目在主轴上默认的是行排列,也就是flex-direction:row-reverse

图示:

每个项目都有最小的宽度,当我们宽度不够的时候可以利用flex-wrap允许换行转为多行容器

图示:

也可以通过flex-direction:row-reverse来改变主轴的方向为垂直

图示:

而所谓的在主轴上对齐即将所剩的空间在项目之间进行分配

在主轴上左对齐:justify-content:flex-start;

图示:

在主轴上右对齐:justify-content:flex-end;

图示:

在主轴上居中对齐:justify-content:center;

图示:

在主轴上两端对齐:justify-content:space-between;

图示:

在主轴上两端对齐:justify-content:space-around;(项目之间为两倍空间)

图示:

在主轴上平均对齐:justify-content:space-evenly;(项目之间空间相等)

图示:

同理,交叉轴上的对齐方式也可以运用
align-items:对齐方式;来进行对齐
以上就是flex项目中常用的一些属性
代码实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局属性
    </title>
</head>
<style>
    *{
        padding: 0;margin: 0;box-sizing: border-box;
        /* 初始化网页格式 */
    }
    :root{
        font-size: 10px;
        /* 初始化网页字体格式 */
    }
    body{
font-size: 1.6rem;
/* 还原body中的字体大小 */
    }
.ys{
    /* 给class为ys的标签添加一个像素的实线边框 */
    border:1px solid;
    /* 给class为ys的标签添加一个高度 */
    height: 50rem;
      /* 给class为ys的标签转为flex布局 */
    display: flex;
    /* 项目在主轴上左对齐 */
    justify-content: flex-start;
    /* 项目在主轴上右对齐 */
    justify-content:flex-end;
     /* 项目在主轴上居中对齐 */
    justify-content:center;
     /* 项目在主轴上两端对齐 */
    justify-content:space-between;
     /* 项目在主轴上分散对齐 */
    justify-content:space-around;
     /* 项目在主轴上平均对齐 */
    justify-content:space-evenly;
}
.ys .itemes{
    width: 10rem;
    border:1px solid;
    background-color:aquamarine;
}
</style>
<body>
    <div class="ys">
    <div class="itemes">itemes1</div>
    <div class="itemes">itemes2</div>
    <div class="itemes">itemes3</div>
    <div class="itemes">itemes4</div>
</div>
</body>
</html>
THE END
喜欢就支持一下吧
点赞9
分享
评论 抢沙发