欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

flex项目的6个属性学习总结

程序员文章站 2022-03-06 17:33:33
...

flex项目的6个属性学习总结flex项目属性

属性单词 属性介绍
flex-basis 项目宽度: 项目分配主轴剩余空间之前, 项目所占据的主轴空间宽度
flex-grow 项目的宽度扩展: 将主轴上的剩余空间按比例分配给指定项目
flex-shrink 项目的宽度收缩: 将项目上多出空间按比例在项目间进行缩减
flex 是上面三个属性的简化缩写: flex: flex-grow flex-shrink flex-basis
align-self 单独自定义某个项目在交叉轴上的对齐方式
order 自定义项目在主轴上的排列顺序,默认为0,书写顺序,值越小位置越靠前

flex项目的6个属性学习总结案例练习

  • HTML页面

    <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>flex项目属性</title>
 <style>
     .container {
         width: 400px;
         height: 100px;
         outline: 2px dashed gray;
         background-color: lightgray;
     }
     .container > .item {
         width: 100px;
         height: 60px;
         outline: 2px dashed red;
         background-color: wheat;
         text-align: center;
         line-height: 60px;
         font-size: 2rem;
     }
     .container {
         /*转为flex容器*/
         display: flex;
     }
 </style>
</head>
<body>
 <div class="container">
     <div class="item">1</div>
     <div class="item">2</div>
     <div class="item">3</div>
 </div>
</body>
</html>

    flex项目的6个属性学习总结

  • flex-basis 项目宽度
     flex-basis: auto; 默认值 auto:项目的原始宽度
     属性值：可以是长度单位，也可以是百分比，百分比是按照父元素的width为标准。
     注：显示宽度flex-basis > 原始宽度width

    .container > .item {
         /*项目宽度150*3 =450；父元素width:400;*/
         flex-basis: 150px;
     }

    flex项目的6个属性学习总结
    显示宽度大于父元素宽度是，项目自动缩减

    .container > .item {
         /*1.项目宽度：项目再分配主轴剩余空间之前,项目所占的主轴空间的宽度*/
         /*flex-basis: auto;*/
         /*flex-basis: 80px;*/
         flex-basis: 30%;   /*每个像素显示宽度120px;原始宽度100px;*/
     }

    flex项目的6个属性学习总结
    设置最小宽度min-width时，按min-width宽度显示
    flex项目的6个属性学习总结

  • flex-grow 项目的扩展: 将主轴上的剩余空间分配给项目
    flex-grow: 0;  默认值0：不扩展
    属性值：0-1 按比例分配剩余空间

    .container > .item:nth-child(1) {
         /*此时项目1 140px,项目2,3各100px， 剩余空间 = 400 - 140 - 100 - 100 = 60px*/
         flex-basis: 140px;
         flex-grow: 1;  /*项目1实际分配剩余空间20px + 140px = 160px宽度*/
     }
     .container > .item:nth-child(2) {
         flex-grow: 2;  /*项目2实际分配剩余空间100px + 20px * 2 =140px;*/
     }

    flex项目的6个属性学习总结
    属性值：>=1 按份分配剩余空间

    .container > .item {
         /*每个项目分配到剩余空间的100 / 3 = 33.333+ 占据空间100 = 133.333px*/
         flex-grow: 1;
     }

    flex项目的6个属性学习总结
    当项目设置宽度140px时；剩余空间：400-100-100-140=60px

    .container > .item {
         /*每个项目分配到剩余空间的100 * 0.2 = 20 + 占据空间100 = 120px*/
         flex-grow: 0.2;
     }

    flex项目的6个属性学习总结

  1. flex-shrink 项目的宽度收缩: 将项目上的多出来的空间按比例在项目之间进行缩减
    默认值1：空间不足时按比例进行缩小

    .container > .item:nth-child(1) {
          /*只设置一个项目收缩值时，没有设置的项目全部按1进行计算*/
          /*收缩比例值=100/（6+1*4） = 10 */
          /*第一个项目收缩10*6=60px;剩下四个项目每个收缩10px*/
         flex-shrink:6;
     }

    flex项目的6个属性学习总结
    项目flex-shrink值的总和小于1 则收缩尺寸不完全

    .container > .item:nth-child(-n+4) {
          /*每个项目收缩22.222*/
         flex-shrink: 2;
     }
     .container > item:last-child {
         /*项目收缩值为4*2+1 = 9； 最后一个项目收缩值=100/9*1=11.111 显示宽度88.88px*/
         flex-shrink: 1;
     }

    flex项目的6个属性学习总结
    项目flex-shrink值总和大于1 按比例收缩

    .container > .item {
         /*0.1*5个项目 = 0.5;每个项目收缩100*0.1=10px;*/
         flex-shrink: 0.1;
     }

    flex项目的6个属性学习总结
    只设置一个项目flex-shrink值时，其他项目按1进行计算

    .container > .item {
         flex-shrink:1;
     }

    flex项目的6个属性学习总结


      2. flex项目的6个属性学习总结导航页代码

      <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <link rel="stylesheet" href="public-header.css">    <link rel="stylesheet" href="font/iconfont.css">    <title>导航</title></head><body><div class="public-header">    <a href="">网站首页</a>    <a href="">专题</a>    <a href="">网站导航</a>    <a href="">二手商品</a>    <a href="">讨论区</a>    <span>        <a href=""><i class="iconfont icon-huiyuan2"></i>登录</a>        <a href="">免费注册</a>    </span></div><!--大标题--><div class="public-headline">    <span>二手交易</span></div></body></html>
      /*引入公共初始化样式表*/@import "reset.css";/*头部导航*/.public-header {    height: 44px;    background-color: black;    padding: 0 20px;    display: flex;    flex-flow: row nowrap;}.public-header a {    line-height: 44px;    color: #ccc;    padding: 0 10px;}.public-header a:hover {    background-color: #fff;    color: black;}.public-header > span {    margin-left: auto;}.public-header > span i {    font-size: 16px;    color: #cccccc;    padding-right: 10px;}/*大标题*/.public-headline {    padding: 30px;    text-align: center;}.public-headline span {    font-size: 30px;    font-weight: bolder;    padding-bottom: 7px;    border-bottom: 3px solid red;}

      flex项目的6个属性学习总结

      上一篇： 购物车、结算页面制作

      下一篇： flex实现手机端首页

      推荐阅读