弹性布局-1

最新推荐文章于 2024-03-14 00:02:38 发布

原创最新推荐文章于 2024-03-14 00:02:38 发布 · 294 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#H5 #弹性布局

H5学习专栏收录该内容

17 篇文章

订阅专栏

本文通过一个HTML示例详细介绍了如何在VSCode中利用Flex布局来调整元素的位置。包括设置display属性为flex以启用弹性布局，使用flex-direction确定布局的方向，justify-content和align-items分别控制子元素沿主轴和交叉轴的对齐方式。

弹性布局内容很多，以vscode代码显示比较鲜明

此篇讲flex布局，影响弹性布局元素的子元素的布局方式

笔记都记在注释中了，自我感觉挺细节的！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #container{
            border: 1px solid red;
            
            /* flex布局，会影响本元素的子元素的布局方式 */
            /* flex布局的元素中，子元素不再使用原有的流式布局，而是参与flex布局，flex布局中无论块元素还是行元素，都会按照flex方向进行布局 */
            display: flex;

            /* flex-direction,设置flex布局方向，默认为row，从左往右，row-reverse从右往左，column,从上往下 */
            flex-direction: row;

            /* 如果flex布局的父元素设置了垂直于布局方向上的长度，而子元素没有设置，则子元素的长度等于父元素长度 */
            height: 100px;

            /* justify-content，设置flex布局子元素在布局方向上的对齐方式 */
            /* flex-start，布局开始方向对齐，flex-end布局结束方向对齐 */
            /* center表示居中 */
            /* space-between:前后贴边，间距平分 */
            /* space-around:间距平分 */
            justify-content: center;

            /* align-items：表示flex子元素在垂直于布局方向上的对齐方式，样式值和justify-content一样 */
            align-items: center;
        }
        .box{
            border: 1px solid #000;

            height: 50px;

            /* flex-basis:设置元素在布局方向上的长度 */
            flex-basis: 200px;
        }

        .second{
            /* 设置flex某个子元素自己的对齐方式 */
            align-self: flex-end;
        }
    </style>
</head>
<body>
    <!-- flex布局 -->

    <section id="container">
        <div class="box">第1块</div>
        <div class="box second">第2块</div>
        <div class="box">第3块</div>
        <div class="box">第4块</div>        
    </section>
</body>
</html>