flex项目属性及PC端、移动端布局方案 - CSS

首页 > 博客列表 > flex项目属性及PC端、移动端布局方案

博主信息

博文 13

粉丝 2

访问量 13808

专题推荐

更多>

1.弹性子元素属性及含义

元素属性	属性说明
Order <integer>	控制弹性容器里子元素的顺序,数值小的排在前面，可以为负值
flex-grow <number>	设置弹性子元素的扩展比率，不允许为负值，默认值为0，根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。
flex-shrink <number>	设置弹性子元素的收缩比率，不允许为负值，默认值为1，根据弹性盒子元素所设置的扩展因子作为比率来收缩空间。
flex-basis	指定弹性子元素伸缩前的默认大小值，相当于width和height属性。
Flex	flex- grow, flex- shrink和flex- basis属性的复合属性，设置弹性子元素如何分配空间。
align-self	允许独立的弹性子元素覆盖弹性容器的默认对齐设置(align-items)侧轴对齐方式。

     .container {
        width: 500px;
        display: flex;
      }
      .container > .item {
        width: 80px;
        flex-grow: 0;
        flex: 1;
        flex: auto;}
      .container > .item:first-of-type {
        flex-grow: 2;
        flex-grow: 0.5;}
   </style>

    <style>
      .container {
        width: 300px;
        display: flex;}
      .container > .item {
        width: 160px;
        flex-shrink: 0;
        flex-shrink: 1;}
      .container > .item:first-of-type {
        flex-shrink: 0.5;}
    </style>

    <style>
      .container {
        width: 300px;
        display: flex;}
      .container > .item {
        width: 60px;
        flex: 0 1 auto;
        flex: 1 1 auto;
        flex: 1;
        flex: auto;
        flex: 0 0 auto;
        flex: none;
        /* flex: 0; */
        flex: 0 0 0%;}

2.PC端布局的通用解决方案

    <style>
      /* 初始化 */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;}
      a {color:black;
        text-decoration: none;}
      /* 将body转为flex */
      body {min-width: 660px;
        display: flex;
        /* 主轴垂直方向,不换行 */
        flex-flow: column nowrap;}
      header,footer {
        height: 60px;
        border: 1px solid #000;
        background-color: cornsilk;}
      /* 将页眉转为flex */
      header {
        display: flex;
        /* 所有项目在交叉轴方向上居中显示 */
        align-items: center;}
      header > a {
        flex: 0 1 100px;
        text-align: center;}
      /* Logo */
      header > a:first-of-type {
        margin-right: 50px;}
      header > a:last-of-type {
        margin-left: auto;}
      /* 鼠标悬停时忽略logo */
      header > a:hover:not(:first-of-type) {
        color: coral;}
      .container {
        min-height: 400px;
        margin: 10px auto;
        display: flex;
        justify-content: center;}
      .container > aside,
      .container > main {
        border: 1px solid #000;
        padding: 10px;}
      .container > aside {
        flex: 0 0 200px;
        background-color: darkseagreen;}
      .container > main {
        flex: 0 0 600px;
        margin: 0 10px;
        background-color: dimgray;}
      footer {
        display: flex;
        flex-flow: column nowrap;
        text-align: center;}
    </style>
  </head>
  <body>
    <!-- 页眉 -->
    <header>
      <a href=""><img src="252.jpg"></a>
      <a href="">首页</a>
      <a href="">宣传栏</a>
      <a href="">信息公开</a>
      <a href="">法律法规</a>
      <a href="">登录</a>
    </header>
    <!-- 主体 -->
    <div class="container">
      <!-- 左边栏 -->
      <aside>左边栏</aside>
      <!-- 主体内容区 -->
      <main>主体内容区</main>
      <!-- 右边栏 -->
      <aside>右边栏</aside>
    </div>
    <!-- 页脚 -->
    <footer>
      <p>
        小白社区网 ©版权所有   (2020-2022) | 备案号:
        <a href="">鄂ICP-17********</a>
      </p>
      <p>中国.湖北省XXX是100号| 电话：027-6681888**</p>
    </footer>
  </body>

3.移动端常用布局方案

    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        a{
            text-decoration: none;
            color: dimgrey;
        }
        html{
            height: 100px;
            width: 100px;
            font-size: 14px;
            color: darkgrey;
        }
        body{
            min-width: 360px;
            background-color: white;
            display: flex;
            flex-flow: column nowrap;
        }
        body > header{
            color: darkorange;
            background-color: sienna;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: fixed;
            width: 100vw;
        }
        body > .slider{
            height: 225px;
        }
        body > .slider > img{
            height: 80%;
            width: 100%;
            }
            /* 主导航区 */
            nav{
                height: 90px;
                margin-bottom: 30px;
                display: flex;
                flex-flow: row wrap;
                align-content: space-around;
            }
                nav div{
                    width: 25vw;
                    display: flex;
                    flex-flow: column nowrap;
                }
                nav > div > a:first-of-type{
                    text-align: center; 
                }
                nav > div > a:last-of-type{text-align: center;}
                nav > div img{
                    width: 50%;
                }
    /* 每个区域的标题样式 */
      .title {
        margin-top: 10px;
        font-size: 1.2rem;
        font-weight: normal;
        text-align: center;
      }
    /* 包邮商品区 */
        .free-goods {
        border-top: 1px solid #cdcdcd;
        margin-top: 10px;
        font-size: 1rem;
        display: flex;
         /* 水平多行容器 */
        flex-flow: row wrap;
      }
      .free-goods img {
        width: 80%;
      }
      .free-goods > .goods-img{
          padding: 35px;
          box-sizing: border-box;
          flex: 1 2 30vw;
          display: flex;
          flex-flow: column nowrap;
          justify-content: space-between;
      }
      .free-goods > .goods-img > div{
          display: flex;
          justify-content: space-between;
      }
      body > footer {
        color: #666;
        background-color: #efefef;
        border-top: 1px solid #ccc;
        height: 35px;
        position: fixed;
        bottom: 0;
        width: 100vw;
        display: flex;
        justify-content: space-evenly;
      }
      body > footer span {
        margin-top: 10px;
        font-size: 1rem;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        color: brown;
      }
      body > footer a > span:first-of-type {
        font-size: 2rem;
      }
    </style>
</head>
<body>
    <!-- 页眉 -->
    <header>
        <a href=""><img src="font.icon/252.jpg" alt=""></a>
        <span class="iconfont icon icon-shouye" style="font-size: 45px;"></span>
    </header>
    <!-- 轮播图 -->
    <div class="slider">
        <img src="font.icon/10.jpg" alt="">
    </div>
    <!-- 主导航区 -->
    <nav>
        <div>
            <a href=""><img src="font.icon/1.jpg" alt=""></a>
            <a href="">淘宝</a>
        </div>
        <div>
            <a href=""><img src="font.icon/2.jpg" alt=""></a>
            <a href="">天猫</a>
        </div>
        <div>
            <a href=""><img src="font.icon/3.jpg" alt=""></a>
            <a href="">京东</a>
        </div>
        <div>
            <a href=""><img src="font.icon/4.jpg" alt=""></a>
            <a href="">拼多多</a>
        </div>
        <div>
            <a href=""><img src="font.icon/5.jpg" alt=""></a>
            <a href="">唯品会</a>
        </div>
        <div>
            <a href=""><img src="font.icon/6.jpg" alt=""></a>
            <a href="">苏宁</a>
        </div>
        <div>
            <a href=""><img src="font.icon/7.jpg" alt=""></a>
            <a href="">饿了么</a>
        </div>
        <div>
            <a href=""><img src="font.icon/8.jpg" alt=""></a>
            <a href="">美团</a>
        </div>
    </nav>
    <!-- 免运费商品 -->
    <h3>免运费商品<span class="iconfont icon icon-mian" style="color: darkorange;"></span></h3>
    <div class="free-goods">
        <div class="goods-img">
            <a href=""><img src="font.icon/9.jpg" alt=""></a>
            <p>优选
                【田昊验货推荐】亿嘉樱花雪24件套日式雪花釉碗盘套装（双色可选）
                </p>
                <div>
                    <span>89 元</span>
                    <span class="iconfont icon icon-gouwuche"></span>
                </div>
                <a href=""><img src="font.icon/11.jpg" alt=""></a>
                <p>迪奥烈艳蓝金口红唇膏999#滋润/哑光3.5g</p>
                <div>
                    <span>169 元</span>
                    <span class="iconfont icon icon-gouwuche"></span>
                </div>
                <a href=""><img src="font.icon/12.jpg" alt=""></a>
                <p>促销【领券立减】Huawei/华为nova7 SE 5G超级快充40W高清四摄智能手机5g手机</p>
                <div>
                    <span>5999 元</span>
                    <span class="iconfont icon icon-gouwuche"></span>
                </div>
                <a href=""><img src="font.icon/13.jpg" alt=""></a>
                <p>Redmi小爱音箱 Play</p>
                <div>
                    <span>359 元</span>
                    <span class="iconfont icon icon-gouwuche"></span>
                </div>
        </div>
    </div>
    <!-- 页脚 -->
    <footer>
        <span class="iconfont icon con-wodehongbao"></span>
        <span>我的红包</span>
        <span class="iconfont icon icon-wodedingdan"></span>
        <span>我的订单</span>
        <span class="iconfont icon icon-gouwuche"></span>
        <span>购物车</span>
        <span class="iconfont icon icon-shouhuodizhi"></span>
        <span>收货地址</span>
    </footer>
</body>

4.总结

弹性盒子的各元素应用，是内容发生相应变化。
对弹性盒子的掌握还是不够，有些步骤上还是不知道怎么修改。

批改老师：

Guanhui

批改状态：合格

老师批语：还行！

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

phpstudy和Visual studio code编辑器初体验！

2020-06-12 11:58:13