弹性布局-1

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

sunset0827

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

阅读量235

点赞数

分类专栏： H5学习文章标签： H5 弹性布局

本文链接：https://blog.csdn.net/Mr_Sunset/article/details/80992468

版权

H5学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

弹性布局内容很多，以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>

sunset0827

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
弹性布局-1

弹性布局内容很多，以vscode代码显示比较鲜明&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scal
复制链接

扫一扫

专栏目录