css flex 延展性合理布局详解

日期：2021-03-01 类型：科技新闻我要分享

关键词：开发一个小程序多少钱，凡科轻站小程序，微信群抽奖小程序，小程序登录页面，微信小程序微店

实例基本合理布局

html

    <ul class="box">
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
    </ul>

css

        .box{
            display: -webkit-flex;
            display: flex;
        }
        .item{
            width: 200px;
            height: 300px;
            background: red;
            border: 1px solid #ccc;
            font-size: 50px;
            text-align: center;
            line-height: 300px;
            color:#fff;
        }

由于flex关键便捷与挪动端合理布局，因此检测以谷歌仿真模拟挪动端看实际效果：

由于应用 flex 合理布局，子元素默认设置是横向排序，因此不必须float，也不起功效；

父盒子特性研究

flex-direction

flex-direction 表明子元素的排序方位温柔序；默认设置 row （横排，左到右）； row-reverse 表明横排右到左

.box{
            display: -webkit-flex;
            display: flex;
            flex-direction:row-reverse;    
        }

假如每一个把每一个 li 设定为 width：3000px;(当今显示屏宽度980px),实际效果：

子元素宽度超过，不仅沒有换行，会全自动融入尺寸，均分为 25%；

上面的均分只是在 row 的情况下会均分，假如是换为竖向排序：

flex-direction: column;

元素不容易被挤压了，有着3000px宽；可是要留意，它并不是由于不足室内空间而换行了，只是column 值要求了它竖向排序

下面的值能够调剂为倒序竖向排序

flex-direction: column-reverse; //表明元素垂直 反方向排

flex-wrap

flex-wrap 默认设置 nowrap：不换行。上面的3000px 子元素更是由于这个竖向默认设置是不容易换行的，因此上面设定3000px宽，不容易换行；

一样的编码，假如加多1句

.box{
            display: -webkit-flex;
            display: flex;
            flex-direction: row-reverse;
            flex-wrap: wrap;    //换行，第1行在上方。
        }

能够发现，设定为能够换行之后，子元素宽度变成100%显示屏宽了；这就像1个延展性盒子塞到了比自身小的盒子中，延展性盒子全自动收拢了自身的宽度。

假如这样写：

.box{
            display: -webkit-flex;
            display: flex;
            flex-direction: row-reverse;
            flex-wrap: wrap-reverse;    //换行，第1行在正下方。
        }

flex-flow

flex-flow特性是flex-direction特性和flex-wrap特性的简写方式，默认设置值为row nowrap。

flex-flow：row wrap  ===  flex-direction:row; flex-wrap: wrap

编码又改1下：

.box{
      display: -webkit-flex;
      display: flex;
      flex-direction: row-reverse;
      flex-wrap: wrap-reverse;
    }
    
  能够写成

.box{
      display: -webkit-flex;
      display: flex;
      flex-flow:row-veverse wrap-reverse
    }

justify-content

它有5个值，在其中假如把 item 比做word文本文档的文本的话, flex-star 能够看作是左对齐， flex-end：右对齐； flex-center：垂直居中；

关键详细介绍值 space-around:均分內容空闲室内空间，每一个新项目两边的间距相同;
设空闲室内空间为 area，有子元素 k个，每一个子元素等于提升了是多少margin？==> area/2k

本事例：

.item{
    width:200px;
}
.box{
       display: -webkit-flex;
       display: flex;
       justify-content: space-around;
}

值得留意的是，新项目之间的间距比新项目与边框的间距大1倍。

space-between：两边对齐，新项目之间的间距都相同。不给

align-items

align 字样基础就了解它是对于竖直方位的了；

.box{
            display: -webkit-flex;
            display: flex;
            justify-content: space-between;
            height: 1760px;
            align-items: center;

        }

记得给父加1个高宽比；这模样能够看出元素竖直垂直居中了

别的的类似的特性就已不11写了

flex-start：交叉式轴的起始点对齐。
flex-end：交叉式轴的终点站对齐。
stretch（默认设置值）：假如新项目未设定高宽比或设为auto，将占满全部器皿的高宽比。

看 baseline特性: 新项目的第1写作字的基准线对齐。

这个特性较为新颖，能够试试：

.box{
     align-items: baseline;
     }
     
    <ul class="box">
        <li class="item" style="height: 150px;line-height: 150px">1</li>
        <li class="item" style="height: 500px;line-height: 500px">2</li>
        <li class="item" style="height: 250px;line-height: 250px">3</li>
        <li class="item" style="height: 170px;line-height: 170px">4</li>
    </ul>

上面我给每一个item 都设定了不一样的高宽比和 line-height;

能够看到器皿以便让文本对齐而调剂自身的部位；

align-content

界定了多根轴线的对齐方法。假如新项目仅有1根轴线，该特性不起功效。

.box{
            height: 1760px;   //高宽比要撑开
            display: -webkit-flex;
            display: flex;
            justify-content: space-between;
            flex-flow: row wrap; //横排 换行；造成多轴

        }
        
        
<ul class="box">
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
        <li class="item">7</li>
        <li class="item">8</li>
        <li class="item">9</li>
    </ul>

尝试加上编码

align-content: flex-end;

align-content:space-around;

align-content:space-between;

align-content : center;

能够说，flex合理布局在父元素上对子元素竖直方位的操纵還是十分到位和确立的；

子元素特性研究

order

大约能够了解为子元素的排长队号码，默认设置全是0，越大排长队越后；

<ul class="box">
        <li class="item" style="order:10">1</li>
        <li class="item" style="order:11">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
        <li class="item">7</li>
        <li class="item">8</li>
        <li class="item">9</li>
    </ul>

能够看到，1 号由于 order 设定为10排到了后边；而2号由于更为大的order 而排到最终。

flex-grow 过剩室内空间分派占比

它的值是1个number，默认设置为0；要是有1个同轴元素被设置了flex-grow ，全部过剩室内空间都会依照这个占比分派，并让元素占满整行。这个被分派的室内空间，是算在本身里边的；

<ul class="box">
        <li class="item" style="flex-grow:1;">1</li>
        <li class="item" style="flex-grow:2;">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
        <li class="item">7</li>
        <li class="item">8</li>
        <li class="item">9</li>
    </ul>

盒子宽度增大了，（便是grow啦）

假如子元素有margin，那末会先测算横排是多少个，再决策 flex-grow 分派的室内空间是是多少

比如以下编码，

//沒有设置 flex-grow 时
 <li class="item" style="flex-grow:0;margin: 0 100px;">1</li>
 <li class="item" style="flex-grow:0;">2</li>

//设置了 flex-grow 时
 <li class="item" style="flex-grow:2;margin: 0 100px;">1</li>
 <li class="item" style="flex-grow:1;">2</li>

因此，margin 其实不算过剩室内空间，不容易被再次分派；

flex-shrink

此特性与 flex-grow 有点相反的意思，用于解决不换行时，內容超过显示屏了，应当决策谁来变小；

值越大变小占比越大；默认设置是 1

改1下编码；

.box{
    flex-flow:row nowrap;
}

<ul class="box">
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
    </ul>

此时父盒子要求不可以换行；可是5个item 宽度早已超出显示屏宽了；此时大伙儿是等比变小

下面设定1号 flex-shrink：600

<ul class="box">
        <li class="item" style="flex-shrink:600;">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
    </ul>

能够看到，虽然我把1号设定到放缩十分大了，可是具体宽度并沒有很小；表明访问器会自身决策內容是不是早已充足放下，够了就终止放缩；

<ul class="box">
        <li class="item" style="flex-shrink:600;">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item" style="flex-shrink:200;">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
        <li class="item">7</li>
        <li class="item">8</li>
        <li class="item">9</li>
    </ul>

当內容十分多时，1号就显著被放缩得十分强大，另外我发现，4号虽然设定200，可是它的尺寸跟被设为600的 1号是1样的。

这是由于她们早已放缩到最终只能容下文本的室内空间了；因此就不容易再放缩下去；这跟文本占位1个道理

flex-basis

特性界定了在分派过剩室内空间以前，新项目占有的主轴室内空间（main size）。访问器依据这个特性，测算主轴是不是有过剩室内空间。它的默认设置值为auto，即新项目的原本尺寸。

简易来讲，便是这个值会危害访问器测算的键入值，有4种状况

1，原本就会超过，随后你设置的值比原值低（原值200px每一个item），你的元素会被缩小。

 <ul class="box">
        <li class="item" style="flex-basis:100px;">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item" style="">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
        <li class="item">7</li>
        <li class="item">8</li>
        <li class="item">9</li>
    </ul>

1，原本就会超过，随后你设置的值比原值大，你的元素会被相对性变大些。

<ul class="box">
        <li class="item" style="flex-basis:600px;">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item" style="">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
        <li class="item">7</li>
        <li class="item">8</li>
        <li class="item">9</li>
    </ul>

3 原本不容易超过，你设置的值比原先小，你還是会小1点

 <ul class="box">
        <li class="item" style="flex-basis:100px;">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
    </ul>

4 原本不容易超过，你设置的值比原先大，你就会更大

<ul class="box">
        <li class="item" style="flex-basis:600px;">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
    </ul>

这个值你能够作为宽度看来，当设置为跟原先1样的值得情况下，基础沒有转变

<ul class="box">
        <li class="item" style="flex-basis:200px;">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
    </ul>

align-self

此子元素独立设定竖直方位对齐方法；默认设置auto 表明父亲如何界定就如何来；别的值跟align-items是1样的

<ul class="box">
        <li class="item" style="align-self: center">1</li>
        <li class="item" style="align-self: flex-end">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item" style="align-self: center">5</li>
    </ul>

此特性关键是便捷独特精准定位某个字元素

flex特性

是flex-grow, flex-shrink 和 flex-basis的简写，默认设置值为0 1 auto。后两个特性可选。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该特性有两个便捷值：auto (1 1 auto) 和 none (0 0 auto)。

提议优先选择应用这个特性，而并不是独立写3个分离出来的特性，由于访问器会推算有关值。

最终

挪动端应用flex 合理布局觉得還是十分给力的，而且一般考虑各个显示屏自融入的规定；还有机会還是要多实践活动起来。

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

上一篇：纯css3制做扇动翅膀的胡蝶的示例返回下一篇：没有了