HTML ????: ??? ?? ??, ?? ??, ?? ?? ????? ?? Flexbox? ???? ??, ?? ?? ??? ?????.

??:
?? ? ????? ????? ?? ??? ?????. ?? ?? ???? ???? ?? ???? ??, ???? ?? ???? ??? ?? ??? ??? ??? ??? ????? ?????? ??? ?????. Flexbox(??? ?? ????)? ??? ??? ???? ?? ??? ?? ??? ? ?? ?? ??? ?????. ? ????? Flexbox? ???? ??? ???? ??? ? ??? ??? ?? ? ??? ???? ?? ??? ?????.

1. ?????? ??????
Flexbox? ????? ??? ?? ??? ?? ??? ????? ???? ??CSS3? ???? ?????. Flexbox? ???? ??? ????, ?? ?? ????, ?? ?? ????, ?? ?? ???? ? ??? ?? ???? ?? ??? ?? ??? ? ????.

2. ??? ????? ?? Flexbox? ???? ??
??? ????? ??? ??? ???? ?? ??? ??? ?? ??? ??? ???? ??? ? ??? ?????. Flexbox? ???? ??? ????? ???? ?? ?? ?????. ?? ????? Flex ????? ????? ????? display:flex ??? ???? ???. ?? ?? flex-grow ??? ???? ????? ??? ??? ???? ?? ??? ?? ??? ??? ??? ? ????. ??? ?? ?????.

<style>
    .container {
        display: flex;
    }

    .item {
        flex-grow: 1;
        margin: 10px;
        padding: 10px;
        background-color: #ccc;
    }
</style>

<div class="container">
    <div class="item">元素1</div>
    <div class="item">元素2</div>
    <div class="item">元素3</div>
</div>

? ????? display:flex? ???? .container? Flex ????? ??? ?? flex-grow:1? .item?? ?????. ?? .item ??? ???? ?????. ?? ??? ??? ?? ??? ???? ????. ??? ?? ??? ??? ???? ??? ??? ???? ?????.

3. Flexbox? ???? ??? ?? ????? ???? ??
??? ????? ????? ?? ? ??? ??? ????? ?????. Flexbox? ???? ?? ????? ?? ??? ? ????. ?? .container? Flex ????? ???? ???. ?? ?? align-items ??? ???? ????? ??? ?? ??? ??? ? ????. ??? ?? ?????.

<style>
    .container {
        display: flex;
        align-items: stretch;
    }

    .item {
        margin: 10px;
        padding: 10px;
        background-color: #ccc;
    }
</style>

<div class="container">
    <div class="item">元素1</div>
    <div class="item">元素2</div>
    <div class="item">元素3</div>
</div>

? ????? align-items:stretch? ???? ????? ??? ?? ??? ?????. ?? ??? ??? ???? ???? ????? ??? ?? ?????. .

4. Flexbox? ???? ?? ?? ????? ???? ??
?? ?? ????? ????? ?? ? ??? ??? ????? ?????. Flexbox? ???? ??? ????? ?? ??? ? ????. ????? .container? Flex ????? ???? ???. ?? ?? flex-basis ??? ???? ???? ??? ?? ??(?? ?? ? ?? ???)? ??? ? ????. ??? ?? ?????.

<style>
    .container {
        display: flex;
    }

    .item {
        flex-basis: 33.33%;
        margin: 10px;
        padding: 10px;
        background-color: #ccc;
    }
</style>

<div class="container">
    <div class="item">元素1</div>
    <div class="item">元素2</div>
    <div class="item">元素3</div>
</div>

? ????? flex-basis:33.33%? ???? ???? ??? ?? ??? ???? ????? ??? ??? ???? ?????.

5. Flexbox? ???? ??? ????? ???? ??
??? ????? ????? ?? ? ??? ????? ?????. Flexbox? ???? ??? ??? ????? ?? ?? ? ????. ????? .container? Flex ????? ???? ???. ?? ?? justify-content ??? ???? ????? ?? ??? ??? ? ????. ??? ?? ?????.

<style>
    .container {
        display: flex;
        justify-content: space-between;
    }

    .item {
        margin: 10px;
        padding: 10px;
        background-color: #ccc;
    }
</style>

<div class="container">
    <div class="item">元素1</div>
    <div class="item">元素2</div>
    <div class="item">元素3</div>
</div>

? ????? justify-content:space-between? ???? ????? ?? ??? ???? ?? ??? ??? ???? ??? ??? ?????.

??:
Flexbox? ???? ??? ????, ?? ?? ????, ?? ?? ????, ?? ?? ???? ? ??? ??? ???? ?? ??? ?? ??? ? ????. ? ??? ??? ?? ??? ?? ???? Flexbox? ?? ???? ?????? ????. ? ?? ? ????? ???? ??? ?? ????? ??? ??? ????.

? ??? HTML ????: ??? ?? ??, ?? ??, ?? ?? ????? ?? Flexbox? ???? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!