弹性盒子

最新推荐文章于 2024-07-14 10:25:44 发布

gentry-jh

最新推荐文章于 2024-07-14 10:25:44 发布

阅读量215

点赞数 1

分类专栏： flex 文章标签： css

本文链接：https://blog.csdn.net/webblock/article/details/108562968

版权

flex 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

弹性布局与传统布局响应对比

传统布局

<style>
      *{
          margin: 0;
          padding: 0;
      }
      main{
          position: relative;
          height: 100vh;
      }
      main nav{
          width: 80px;
          position: absolute;
          left: 0;
          top: 0;
          bottom:0;
          background-color: blue;
      }
      main article{
          background-color: #ccc;
          padding-left: 90px;
          background-clip: content-box;
          //规定背景的绘制区域为内容区
          height: 100vh;
      }
</style>
<body>
   <main>
       <nav></nav>
       <article>
           ccc
       </article>
   </main>
</body>

效果如下
在这里插入图片描述
弹性布局

 <style>
       *{
         margin: 0;
         padding: 0;
       }
       main{
        display: flex;
        height: 100vh;

       }
       main nav{
        background:blue;
        width: 80px;
       }
       main article{
        background:#ddd;
        flex:1;
       }
</style>
<body>
    <main>
        <nav>
            111
        </nav>
        <article>
            ddd
        </article>
    </main>
</body>

效果如下
在这里插入图片描述
显然弹性布局与传统布局相比代码更少，页面效果也更美观。

布局微信客户端界面

传统方式布局

<style>
      *{
          margin: 0;
          padding: 0;
      }
      main{
          height:100vh;
          background-color: #ddd;
      }
      footer{
          position: fixed;
          bottom: 0;
          width: 100vw;
          height: 50px;
          background-color: red;
          border-top:solid 1px #ddd;
      }
      footer div{
          float:left;
          /* width: 33%; */
          width: 25%;
          height: 100%;
          box-sizing: border-box;
          text-align: center;
          line-height:3em;
          color:#555;
      }
      footer div:nth-child(n+2){
          border-left:solid 1px blue;
      }
</style>
<body>
    <main></main>
    <footer>
        <div>你好</div>
        <div>我好</div>
        <div>他好</div>
        <div>他好</div>
    </footer>
</body>

效果如下
在这里插入图片描述

弹性布局

<style>
        *{
            margin: 0;
            padding: 0;
        }
        /* head{
           display: block;
           height: 30px;
           outline:solid 1px red;
        } */
        body{
            height: 100vh;
            display:flex;
            flex-direction: column;
        }
        main{
            background-color: #ddd;
            flex:1;
        }
       footer{
           background-color: red;
           height: 50px;
           display: flex;
            justify-content: space-evenly;
       }
       footer div{
            flex:1;
            text-align: center;
            line-height: 3em;
            color:#555;
       }
       footer div:nth-child(n+2){
           border-left: solid 1px #ccc;
       }
</style>
<body>
    <main>
        rr
    </main>
    <footer>
        <div>后盾人</div>
        <div>直播</div>
        <div>教程</div>
        <div>教程</div>
        <div>教程</div>
        <div>教程</div>
        <div>教程</div>
    </footer>
</body>

效果如下：
在这里插入图片描述
相比与传统布局，弹性布局的底部栏可以随意的增加选项而不影响整体的结构。而传统方式的布局下的底部栏若要增加选项则要改变选项的宽度，比较费时，也不易修改，影响开发效率。

下面正式开始学习弹性盒子

声明弹性盒子的几种方式

display:flex;
//针对块元素
display:inline-flex;
//针对行内块元素

改变弹性元素方向

flex-direction:row;
//默认的弹性元素水平由左向右排列
flex-direction:row-reverse;
//反转 弹性元素水平自右向左排列
flex-direction:column;
//弹性元素由上向下排列
flex-direction:column-reverse;
//反转 弹性元素由下向上排列

控制弹性元素溢出换行处理
如果弹性盒子的宽度小于弹性元素的总宽，弹性元素可以换行排列。

flex-wrap:wrap;
//换行
flex-wrap:nowrap;
//不换行默认值
flex-wrap:wrap-reserve;
//换行，但是方向是相反的

统一设置元素排列方式与换行

flex-flow:row wrap;
flex-flow:row nowrap;
flex-flow:row wrap-reserve;
flex-flow:row-reserve wrap;
flex-flow:row-reserve nowrap;
flex-flow:row-reserve wrap-reserve;
//弹性元素水平排列的换行
flex-flow:column wrap;
flex-flow:column nowrap;
flex-flow:column wrap-reserve;
flex-flow:column-reserve wrap;
flex-flow:column-reserve nowrap;
flex-flow:column-reserve wrap-reserve;
//弹性元素垂直排列的换行

主轴与交叉轴详解

flex-direction:row;
flex-wrap:wrap;
//主轴方向由左向右
//交叉轴方向由上向下
flex-direction:row;
flex-wrap:wrap-reserve;
//交叉轴方向由下向上
flex-direction:row-reserve;
flex-wrap:wrap;
//主轴方向自右向左
//交叉轴方向由上向下
flex-direction:row-reserve;
flex-wrap:wrap-reserve;
//交叉轴方向由下向上

flex-direction:column;
flex-wrap:wrap;
//主轴方向由上向下
//交叉轴方向由左至右

主轴元素的多种排列方式

justify-content:flex-start;
justify-content:flex-end;
justify-content:center;
justify-content:space-between;
justify-content:space-around;
justify-content:space-evenly;

交叉轴元素的多种排列方式

align-items:flex-start;
align-items:flex-end;
align-items:center;
align-items:stretch;
//拉抻
//指定尺寸之后拉抻无效

水平居中的方法

display:flex;
justify-content:center;
align-items:center;

多行元素在交叉轴的排列方式

align-content:flex-start;
align-content:flex-end;
align-content:center;
align-content:space-between;
align-content:space-around;
align-content:space-evenly;

弹性元素在交叉轴控制

align-self:flex-start;
align-self:flex-end;
align-self:center;
align-self:stretch;
//拉抻要配合width/height:auto;使用

元素可用空间分配

不换行情况下，当弹性元素的总宽度小于弹性容器的宽度，有剩余空间。

flex-grow:1;
//属性值可以是任意整数

计算公式：
元素分配多少空间=剩余空间/分配的总份数*元素分配份数

布局小米移动端页面结构

<style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

        }
        header{
            height: 60px;
            background:blue;
        }
        main{
           flex-grow:1;
            background-color: #ddd;
        }
        footer{
            height: 60px;
            background-color: pink;
        }
</style>
<body>
    <header></header>
    <main></main>
    <footer></footer>
</body>

效果如下：
在这里插入图片描述

元素动态缩小的处理技巧
不换行情况下，弹性元素的总宽度大于弹性容器的宽度，各个元素都有一个压缩比例。

flex-shrink:1;
//属性值可以是任意整数

计算公式：
元素缩小多少=((元素的宽 / (元素的宽x素1的缩小比例+元素的宽x元素2的缩小比例))*总的缩小比例)*元素的宽

主轴的基准尺寸

flex-basis:100px;

优先级最大最小尺寸>主轴的基准尺寸>普通尺寸

弹性元素规则组合定义

flex:1 1 100px;
flex:flex-gorw felx-shrink flex-basis;

控制弹性元素的排序

order:1;
//属性值可以是任意整数

数值越大排序越靠后

排序实例

 <style>
        article{
            height: 500px;
            width: 500px;
            border:solid 5px red;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        article section{
            flex:1 0 100px;
            background-color: blue;
            background-clip: content-box;
            padding:10px;
            text-align: center;
            display: flex;
            flex-direction: column;
        }
        article section div{
            flex:1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            color:white;
            font-size: 44px;
        }
       article section span{
           padding:10px;
           background-color: black;
           color:white;
       }
</style>
<body>
    <article>
        <section>
            <div>小明</div>
            <span onclick="up(this)">up</span>
        </section>
        <section>
            <div>小红</div>
            <span onclick="up(this)">up</span>
        </section>
        <section>
            <div>校长</div>
            <span onclick="up(this)">up</span>
        </section>
    </article>

    <script>
        function up(el){
            let order = getComputedStyle(el.parentElement,null).order;
            el.parentElement.style.order = order*1-1;
        }
    </script>
</body>

效果如下：
在这里插入图片描述

单击小红，可以发现小明的位置靠前了

弹性布局也可易操作文本节点，利用 justify-content:center;和align-items:center;可以让文本节点水平垂直居中。

在弹性盒子中，元素使用绝对定位，会丢到原来的空间为。所以在弹性盒子中不使用绝对定位，相对定位不会丢掉原来的空间为，还是可以使用滴。

移动端多级菜单的布局

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height: 100vh;
            display:flex;
            flex-direction: column;

        }
        main{
            flex:1;
            background-color: #ddd;
        }
        footer{
            height: 50px;
            background-color: #ddd;
            display:flex;
            flex-direction: row;
            justify-content: space-between;
            border-top:solid 1px #ccc;
        }
        footer section{
            flex:1;
            border-right: solid 1px #bbb;
            /* background-color: red; */
            display:flex;
            flex-direction: column-reverse;
        }
        footer section:last-child{
            border-right: none;
        }
        footer section h4{
            flex:0 0 50px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            cursor: pointer;
        }
        footer section ul{
            display: flex;
            flex-direction: column;
            border:solid 1px #ccc;
            text-align: center;
            margin-bottom: 5px;
            border-radius: 10px;
        }
        footer section ul li{
            flex:1 0 50px;
            display:flex;
            flex-direction: column;
            justify-content: center;
            border-bottom: solid 1px #ccc;
            cursor: pointer;
            background-color: #ccc;

        }
        footer section ul li:last-child{
            border-bottom: none;
        }
</style>
<body>
    <main></main>
    <footer>
        <section>
            <h4>教程</h4>
            <ul>
                <li>CSS</li>
                <li>JS</li>
                <li>PHP</li>
            </ul>
        </section>
        <section>
            <h4>直播</h4>
        </section>
        <section>
            <h4>软件</h4>
        </section>
    </footer>
</body>

效果如下：
在这里插入图片描述
使用margin自动撑满空间技巧

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        nav{
            margin: 0 auto;
            width: 1200px;
            height: 60px;
            background-color: #f3f3f3;
            box-shadow: 0 0 0 rgba(0,0,0, .3);
            display: flex;
          
        }
        ul{
            list-style: none;
            display: flex;
            align-items: center;
        }
        ul:nth-child(1){
            display:flex;
            margin-right:auto;
           
        }
        ul:nth-child(1)>li{
            margin:0 10px;
        }
        ul:nth-child(2)>li{
            width: 50px;
            height: 50px;
            background-color: #9b59b6;
            border-radius: 50%;
            text-align: center;
            line-height: 50px;
        }
</style>
<body>
    <nav>
        <ul>
            <li>首页</li>
            <li>视频教程</li>
            <li>晚八点直播</li>
        </ul>
        <ul>
            <li>abc</li>
        </ul>
    </nav>
   
</body>

效果如下
在这里插入图片描述

gentry-jh

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
弹性盒子

弹性布局与传统布局响应对比传统布局<style> *{ margin: 0; padding: 0; } main{ position: relative; height: 100vh; } main nav{ width: 80px; position: absolute; left: 0;
复制链接

扫一扫