flex布局

**************一***************

<div style="display: flex; justify-content: space-between">

        <div style="width: 100px; height: 100px; background-color: red"/>

        <div style="width: 100px; height: 100px; background-color: green"/>

</div>

***************二*************

<div style="width: 100px; height: 100px; border: 1px solid red;margin-top: 20px;display: flex; justify-content: center; align-items: center">

        <div style="width: 20px; height: 20px; background-color: green"/>

</div>

***************三*************

<div style="width: 100px; height: 100px; border: 1px solid red;margin-top: 20px;display: flex; justify-content: center; align-items: center; flex-direction: column">

        <div style="width: 20px; height: 20px; background-color: green;margin-left: 5px;margin-top: 5px"/>

        <div style="width: 20px; height: 20px; background-color: green;margin-left: 5px;margin-top: 5px"/>

        <div style="width: 20px; height: 20px; background-color: green;margin-left: 5px;margin-top: 5px"/>

        <div style="width: 20px; height: 20px; background-color: green;margin-left: 5px;margin-top: 5px"/>

</div>