HTML5基础加强css样式篇（伸缩容器的简介和声明：display:flex||inline-flex）(五十一)

最新推荐文章于 2024-06-07 15:15:00 发布

咸鸭蛋炒饭

最新推荐文章于 2024-06-07 15:15:00 发布

阅读量2.1k

点赞数

分类专栏： HTML5基础篇文章标签： css html5 经验 css3 html

本文链接：https://blog.csdn.net/u010853130/article/details/70569945

版权

HTML5基础篇专栏收录该内容

121 篇文章 7 订阅

订阅专栏

1为什么要有伸缩容器：

1. 使用浮动布局，无法实现等高
2.不能很快的调整DOM的顺序
3.不能很好控制子元素的位置

2.如何声明一个伸缩容器：

display:flex;

注： Webkit内核的浏览器，必须加上-webkit前缀。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .layout-box {
            width: 600px;
            height: 300px;
            background-color: #f0f0f0;

            /*声明一个元素为伸缩盒模型，伸缩容器

                1.伸缩项目 沿主轴排列（start -> end）
                2.所有的伸缩项目（子元素）与父元素等高。
                3.伸缩项目自动升级为块元素。

            */
            display: flex;

        }
        .item1 { background-color: #f00;}
        .item2 { background-color: #ff0;  height: 100px;}
        .item3 { background-color: #00f;}


    </style>
</head>
<body>

<div class="layout-box">
    <!--<div class="item item1">1</div>-->
    <!--<div class="item item2">2222</div>-->
    <!--<div class="item item3">3</div>-->

    <span class="item item1">1</span>
    <span class="item item2">2222</span>
    <span class="item item3">33</span>


</div>
<!--<img src="img/3.gif" alt="">-->

<script type="text/javascript">
</script>
</body>
</html>

行内伸缩容器：

display:inline-flex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .layout-box {
            width: 200px;
            height: 200px;
            background-color: #f0f0f0;

            display: inline-flex;

        }
        .item1 { background-color: #f00;}
        .item2 { background-color: #ff0;  height: 100px;}
        .item3 { background-color: #00f;}
/*
        inline-flex 行内对齐特点

            1.伸缩容器中有文本内容，基于第一个文本的基线对齐
            2.伸缩容器中没有有文本内容，也没有子元素，伸缩容器底边位于一行的基线处。
            3.伸缩容器中没有有文本内容，第一个子元素没有，第一个元素底边位于一行的基线处。
*/

    </style>
</head>
<body>

<div class="layout-box">
    <!--<div class="item item1">1</div>-->
    <!--<div class="item item2">2222</div>-->
    <!--<div class="item item3">3</div>-->

    <!--<span class="item item1">1</span>-->
    <!--<span class="item item2">2222</span>-->
    <!--<span class="item item3">33</span>-->

    <!--World-->
    <!--o-->
    <div style="background-color: #00f; height: 50px; width: 50px;"></div>
</div>Hello
<img src="img/3.gif" alt="">

<script type="text/javascript">
</script>
</body>
</html>

咸鸭蛋炒饭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5基础加强css样式篇（伸缩容器的简介和声明：display:flex||inline-flex）(五十一)

1为什么要有伸缩容器： 1. 使用浮动布局，无法实现等高 2.不能很快的调整DOM的顺序 3.不能很好控制子元素的位置2.如何声明一个伸缩容器： display:flex; .layout-box { width: 600px; height: 300px;
复制链接

扫一扫