#微信小程序-计算题

已知父容器宽度是600rpx，里面有三个子容器分别为元素一、元素二、元素三宽度都为100rpx。当父容器设置为flex布局时，定义相关的容器属性flex-direction:row,flex-wrap:wrap,相关的justify-content属性为space-around时,请分别计算元素一到主轴起点的距离，元素三到主轴终点的距离，以及元素一二、元素二三之间的距离。

space-around，只有 flex 元素之间的空间是相等的，第一个 flex 元素和最后一个 flex 元素和容器的空间是 flex 元素间空间的一 半 .
通俗说就是 flex元素之间 均分 因为 每个 100px 一共三个就是 300px 600-300=300px
所以 一和二 ，二和三 就是 各 100 .那么 第一个元素和 最后一个 平分 100px 就是 50

你可以写出来 看看 。

元素一到主轴起点的距离 50px
元素三到主轴终点的距离 150px
元素一二距离 100
元素二三之间距离 100

这个是效果图：

img

<!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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .parent{
            width: 600px;
            display: flex;
            flex-direction:row;
            flex-wrap:wrap;
            justify-content: space-around;

            border: 1px solid royalblue;
        }
        .child{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
</html>

img