关于html:新版flex布局总结详解

78次阅读

共计 3515 个字符,预计需要花费 9 分钟才能阅读完成。

1. 容器的布局方向和排列方向

???? flex-direction 管制主轴是哪一根同时管制主轴的方向(排列形式)

row:从左往右的 x 轴

row-reverse:从右往左的 x 轴

column:从上往下的 y 轴

column-reverse:从下往上的 y 轴

2. 富裕空间的治理

???? 只决定富裕空间的地位,不会给项目区调配空间

???? 主轴 :justify-content

flex-start:在主轴的正方向

flex-end: 在主轴的反方向

center:在两边

space-between:在我的项目之间

space-around:在我的项目两边

???? 侧轴 : align-items 治理单行的富裕空间 垂直于主轴的轴

flex-start:在侧轴的正方向

flex-end:在侧轴的反方向

center:在两边

baseline: 基线对齐

stretch: 等高布局(我的项目没有高度)space-around

space-evently

3. 弹性空间的治理

flex-grow:弹性因子(默认值为 0)

4. flex 容器(CSS3 新增)

???? flex-wrap 管制侧轴的方向 可选值:wrap-reverse、wrap、nowrap

nowrap 不换行

wrap 侧轴方向由上而下(flex-shrink 生效)wrap-reverse 侧轴方向由下而上(flex-shrink 生效)

???? align-content 多行多列时, 富裕空间的治理,会把所有行、列看成一个整体

???? 侧轴富裕空间的治理总结:

单行单列
align-items

align-self(优先级高)
多行多列
align-content(多行时以它为基准)

????flex-flow :flex-direction 和 flex-wrap 的简写属性,实质上管制了主轴和侧轴别离是哪一根,以及他们的方向。
????flex-grow: 将主轴上的富裕空间按比例调配到我的项目上! 属于定义弹性盒子 (flex-item) 的弹性因子, 默认值为 0
???? 代码示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #wrap{
                width: 400px;
                height: 300px;
                border: 1px solid;
                margin:100px auto;
                display:flex;
                /*flex-direction: row;*/
                /*flex-wrap: wrap-reverse;*/
                flex-flow:row  wrap-reverse;
                justify-content: flex-start;
                align-items: flex-start;
                   align-content: flex-end;            
            }
            #wrap > .item{
                width: 50px;
                height: 50px;
                background: pink;
                text-align: center;
                line-height: 50px;
                flex-grow: 1;
            }    
            #wrap > .item:nth-child(1){
                align-self: center;
                flex-grow: 4;
                           order:3;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
        </div>
    </body>
</html>

5.flex 布局——我的项目新增

order: 管制我的项目的排列程序,order 越大我的项目越后
align-self:我的项目本身富裕空间的治理
flex-shrink:膨胀因子(默认值为 1);起作用前提:flex-wrap 为 nowrap;我的项目的总宽度超出容器时,进行伸缩
flex-basis:(默认值为 auto)伸缩规定计算的基准值(默认拿主轴 width 或 height 的值)
伸缩规定

????flex-grow 拉伸因子规定 以下面 demo 为例

可用空间 = (容器大小 - 所有相邻我的项目 flex-basis 的总和)

             400 - 50*5 =150

可扩大空间 = (可用空间 / 所有相邻我的项目 flex-grow 的总和) // 一个 flex-grow 所要占据的空间

             150/(1*4+4)=18.75

每项伸缩大小 = (伸缩基准值 flex-basis + (可扩大空间 * flex-grow 值))

             50+18.75*1=68.75 50+18.75*4=125
             

????flex-shrink 膨胀因子规定

①. 计算膨胀因子与基准值乘的总和

var a = 每一项 flex-shrink*flex-basis 之和

a = 1*200+1*4*50=400

②. 计算膨胀因数

膨胀因数 =(我的项目的膨胀因子 * 我的项目基准值)/ 第一步计算总和

var b = (flex-shrink*flex-basis)/a

b = (1*200)/400=1/2 b'=(1*50)/400=1/8

③移除空间的计算

移除空间 = 我的项目膨胀因数 x 负溢出的空间

var c = b * 溢出的空间

c = 1/2*|(100-400)| = 150 c' =1/8*300 =37.5

剩下的空间→ 我的项目 1:200-150=50 其余我的项目:50-37.5=12.5

注:外部是个递归循环,如果其中某个我的项目内容增多,比方内容>12.5,它会把宽度减去 12.5,剩下的值依照规定让其余四个再来承当,重新分配空间

代码示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #wrap{
                width: 100px;
                height: 400px;
                border: 1px solid;
                display:flex;
            }
            
          .item{
            width: 50px;
            height: 50px;
            background: pink;
            text-align: center;
            flex-shrink: 1;
              }
           .item:nth-child(1){width: 200px;}
            
        </style>
    </head>
    <body>
        <div id="wrap">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
        </div>
    </body>
</html>

6.flex 的简写属性

flex:1 (flex-basis:0% flex-grow:1 flex-shrink:1)

等分布局剖析
flex-basis 为 0,则可用空间就等于容器的大小;
flex-grow 为 1,将主轴上富裕空间平均分配到每个我的项目上;
fle-shrink 的值影响不大
flex 能够设置弹性元素所有的三个款式:flex 增长 缩减 根底
   initial "flex: 0 1 auto".  
   auto  "flex: 1 1 auto"     
   none "flex: 0 0 auto" 弹性元素没有弹性   

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #wrap{
                width: 400px;
                height: 300px;
                border: 1px solid;
                margin:100px auto;
                
                display: flex;
            }
            #wrap > .item{
                height: 50px;
                background: pink;
                text-align: center;
                line-height: 50px;
                
                /*flex-shrink: 1;
                flex-grow: 1;
                flex-basis: 0;*/
                flex: 1;
            }            
        </style>
    </head>
    <body>
        <div id="wrap">
            <div class="item">11</div>
            <div class="item">222</div>
            <div class="item">3333</div>
            <div class="item">44444</div>
            <div class="item">555555</div>
        </div>
    </body>
</html>    

以上是集体对于 flex 布局的学习总结,欢送多多交换和学习!如需转载,请分割作者~

正文完
 0