CSS伸缩盒子模型

最新推荐文章于 2024-02-02 21:36:31 发布

胡先生的博客

最新推荐文章于 2024-02-02 21:36:31 发布

阅读量510

点赞数

CC 4.0 BY-SA版权

文章标签： css flex css3

本文链接：https://blog.youkuaiyun.com/weixin_47683287/article/details/109321572

本文详细探讨了CSS中的伸缩盒子模型，包括其基本概念、使用场景以及如何配置盒子里元素的布局方式，帮助读者掌握弹性布局的核心技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css伸缩盒子模型

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <style>
            #a{
                width: 400px;
                height: 400px;
                background-color: aquamarine;

                /* 开启弹性盒子 */
                display: flex;
                /* 设置弹性元素的排列方式 */
                /* flex-direction: row; */

                /* 设置弹性元素是否自动换行 */
               /* flex-wrap: wrap; */

               /* 简写flex-flow */
               flex-flow: row wrap;

               /* 设置主轴方向空白分配 */
               justify-content: space-evenly;

               /* 设置侧轴弹性元素的排列 */
               align-items: center;
            }
            .a1{
                width: 100px;
                height: 200px;
                background-color: blue;
                font-size: 40px;
                color: cornsilk;

            }
        </style>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <!-- 
            伸缩盒(弹性盒)模型：是css中一种布局方式，用来代替float(浮动)完成页面的布局
            主轴：弹性容器排列方式
            侧轴：垂直主轴方向

            开启弹性盒容器设置：display:flex(块级) / inline-flex(行内)
            弹性容器样式：
                        flexx-direction:规定弹性元素在容器中的排列方式
                               可选值：row(左对齐 1~3，1紧挨最左边)
                                      row-reverse(反向对齐，就是3~1，1紧挨最右边)
                                      column(垂直排列，1在最上面，同时，元素大小会自动适应成均等平分容器大小大小。)
                                      column-reverse(反向垂直对齐)
                        flex-wrap:规定容器是否换行
                               可选值：nowrap  不换
                                      wrap    换
                        flex-flow: direction wrap  (flexx-direction 和 flex-wrap 的简写无先后顺序)  
                        justify-content:规定主轴空白位置的分配方式方式    
                                可选值：flex-start  (元素紧挨123，1靠最左边)  
                                        flex-end  (元素紧挨123，3靠最右边)
                                        center   (元素紧挨123，居中)
                                        space-between(元素分开，1靠最左边，每两个中间有相同空白，3靠最右边)
                                        space-around(元素分开，每个元素前后有相同空白，相邻两个之间空白会叠加)
                                        space-evenly(元素分开，每个元素之间均等空白)
                        align-items:规定侧轴弹性元素对齐方式    
                                可选值：flex-start  (靠始边)  
                                        flex-end  (靠终边)
                                        center   (居中)
                                        stretch (默认同行长度相同)
                         align-content:规定侧轴空白位置的分配方式方式    
                                可选值：flex-start  (元素紧挨，最上边)  
                                        flex-end  (元素紧挨，最下边)
                                        center   (元素紧挨，居中)
                                        space-between(元素分开，1靠最上边，每两个中间有相同空白，3靠最下边)
                                        space-around(元素分开，每个元素前后有相同空白，相邻两个之间空白会叠加)
                                        space-evenly(元素分开，每个元素之间均等空白)                
            弹性元素：在弹性盒子中的元素
            弹性元素样式：
                        flex-grow：指定元素伸展系数
                        flex-shrink：指定元素收缩系数
                        order:指定排列顺序

         -->


         <div id="a">
             <div class="a1">1</div>
             <div class="a1">2</div>
             <div class="a1">3</div>
             <div class="a1">4</div>
             <div class="a1">5</div>
             <div class="a1">4</div>
             <div class="a1">5</div>

         </div>
        
        <script src="" async defer></script>
    </body>
</html>