彻底理解flex弹性布局，看这一篇就够了！

Flex布局是什么？

Flex是Flexible Box的缩写，意为 弹性布局 ，用来为盒状模型提供最大的灵活性。

---

基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称容器。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称项目, 上代码理解理解
任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。

<div class="box">
    <div class="item one">项目1</div>
    <div class="item two">项目2</div>
    <div class="item three">项目3</div>
    <div class="item four">项目4</div>
</div>

.box {
   
    width: 300px;
    height: 300px;
    background: aqua;
    display: flex;
}

.item {
   
    width: 50px;
    height: 50px;
    background: rgb(243, 62, 92);
    font-size: 13px;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center