HTML/CSS -- 利用flexBox布局

待我称王封你为后i 2022-04-10 05:55 284阅读 0赞

语法规则可参考：[RYF][]

布局1：高度固定，左宽度已知，右边适应

![201812272218492.png][]

<section>
            <style>
                .part2-content-wrap{
                    display: flex;
                    height: 100px;
                }
                .part2-content-left{
                    width: 300px;
                    background: red;
                }
                .part2-content-right{
                    flex: 1;
                    background: yellow;
                    text-align: center;
                }
            </style>
            <article>
                <div class = "part2-content-wrap">
                    <div class = "part2-content-left"></div>
                    <div class = "part2-content-right">
                        <h1>利用flexbox布局</h1>
                        <p>高度固定，左宽度已知，右边适应</p>
                    </div>
                </div>
            </article>
        </section>

同理可以实现，高度固定，右宽度已知，左边适应

布局2：高度固定，左右宽度已知，中间自适应

![20181227221956951.png][]

<section>
            <style>
                .part1-content-wrap{
                    display: flex;
                    flex-wrap: nowrap;
                    height: 100px;
                }
                .part1-content-left{
                     width: 300px;
                     background: red;
                }
                .part1-content-center{
                     flex: 1;
                     background: green;
                     text-align: center;
                }
                .part1-content-right{
                     width: 300px;
                     background: yellow;
                }
            </style>
            <article>
                <div class = "part1-content-wrap">
                    <div class = "part1-content-left"></div>
                    <div class = "part1-content-center">
                        <h1>利用flexbox布局</h1>
                        <p>高度固定，左右宽度已知，中间自适应</p>
                    </div>
                    <div class = "part1-content-right"></div>
                </div>
            </article>
        </section>

布局3：宽度已知，上下高度固定，中间自适应

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70][]

flex是css3推出的布局方法，功能非常强大，缺点是对老版浏览器不友好。

flex布局的强大远不止上面的简单布局，我们可以通过骰子布局来熟悉。

譬如这样的：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 2][]

我们可以把各种各样的都尝试一下，这样就能熟悉flexBox布局

[RYF]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
[201812272218492.png]: /images/20220402/c6d24f465d4843e38048b793331a2ee7.png
[20181227221956951.png]: /images/20220402/b7fcb649da3d472aaf1379cc3fecad75.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70]: /images/20220402/9b6f0a89750147ea9fdefa802715340f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 1]: /images/20220402/bdf944b2120445078259f15beeb2b8a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 2]: /images/20220402/0f2b70d91ffb4694942670e73e59e9fd.png