HTML入门（flex布局）————DAY6

最新推荐文章于 2023-05-02 21:28:23 发布

好吃的都给你呀

最新推荐文章于 2023-05-02 21:28:23 发布

阅读量118

点赞数

分类专栏：前端杂文文章标签： HTML flex布局

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_39565202/article/details/102601035

版权

前端杂文专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!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>
        .box{
            background-color: antiquewhite;
            border:5px solid gray;
            height: 60px;
            text-align: center;
            /* 把行高设置与容器高度一样，然后再有center属性，会显示在正中间 */
            line-height: 60px;
            /* 设置不呢元素在父元素flex布局方向的长度 */
            flex-basis: 100px;
        }

        #main{
            height: 200px;
            border: solid 2px rebeccapurple;
            /* 设置该元素为flex布局 ，会影响其子元素的排列方式，在flex布局中，块元素不再单独占一行，宽高都取决于内容 */
            display:flex;

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

            /* justify-content：设置子元素在布局方向上的对齐方式，对齐方式由上面flex-direction所决定
            flex-start；对齐开始位置
            flex-end:对齐结束位置
            center:居中
            space-around:间距平分
            space-between:两侧贴边，间距平分 */
            justify-content: center ;
            justify-content:  space-around ;

            /* align-items设置布局的子元素在垂直于布局方向上的对齐方式 */
            align-items:center;
        }
    </style>
</head>
<body>

    <!-- flex布局 ，又叫做弹性布局 是HTML5(CSS3)中新出的布局方式，主要用于替代传统的float布局 -->

    <!--上次学的emmet输入法 section#main>div.box*3{第$块}*3 -->
    <section id="main">
        <div class="box">第1块</div>
        <div class="box">第2块</div>
        <div class="box">第3块</div>
    </section>
</body>
</html>