首页 > 博客列表 > 实例演示flex容器与项目中常用的属性

博主信息

博文 8

粉丝 1

访问量 8651

专题推荐

更多>

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

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>

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

vscode的下载和安装以及常用插件的部署和个人对http协议的理解

2021-06-29 00:12:07

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

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

图示：

图示：

图示：

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

图示：

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

图示：

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

图示：

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

图示：

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

图示：

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