Flex布局 – 老张家阿妞

   银河娱乐

Flex是Flexible 方框的缩写,意为”柔韧的规划”,用于为盒训练粮食最大的柔韧性。。他日设置为Flex规划,子元素的floatclearvertical-align属性将未兑的。

若干一副都可以装设为Flex规划。。

#box{
display: flex;
width: 500px;
height: 300px;
border: 10px solid red;
}

一:六岁属性设置在框父一副上。,把持子元素的显示。;分可能:

  • flex-direction   设置主轴校直  默许 row 从左到右X轴;
  • flex-wrap   子元素行代替的的办法 弃权NORRAP ;
  • flex-flow   flex-direction和flex-wrap的缩短 弃权行 nowrap;
  • justify-content 子元素指示  默许flex-start  左指示
  • align-items   
  • align-content

  1、flex-direction 主轴校直趋势的决定,使分开有四个一组之物属性。:       

  • row(默许值):主轴是程度的。,无的在左派的。。   
  • row-reverse:主轴是程度的。,无的在右面。。
  • column:主轴铅直。,无的在上慢慢向前移动。。
  • column-reverse:主轴铅直。,无的鄙人慢慢向前移动。。
  • #box{
            display: flex;
            flex-direction: row;
    }
    .inner{
            width: 100px;
            height: 100px;
            background: #8a4182;
            margin: 10px;
    
    }
    <div id="box"><div class="inner">div><div class="inner">div><div class="inner">div>div>

      

        比如,上面的密码。,主轴与X轴程度。;无的在左派的。,从左到右等级。;

2.  flex-wrap :限界共同的中间的子元素。,若何使变酸形成河道,使分开有三个属性。:

  • nowrap(默许值):弃权不可更改。   
  • wrap:换行,居第二位的行较低的第共同的。,从左到右
  • wrap-reverse:换行,居第二位的行在第共同的。,从左到右;

     nowrap:不换行,假定子元素超越父元素的宽度或高处,它将在主轴趋势上自发的紧缩。

   上面的围住,主轴为X轴。,弃权不可更改,不管怎样父元素的宽度是500。,子元素尖锐地大于父元素宽度,默许形势下,宽度将减少。;

#box{
        display: flex;
        flex-direction: row;
        width: 500px;
        border: 1px solid red;
}

     wrap:换行,经常地羊栏         

#box{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
}

    wrap-reverse 居第二位的行在第共同的的压在上面的。;        

#box{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap-reverse;
}

3. flex-flow:是flex-direction 和flex-wrap的缩短形状,默许是 row  nowrap

    flex-flow:flex-direction|flex-wrap ;

4. justify-content: 主轴中间的子元素指示

  • flex-start(默许值):左指示
  • flex-end:右指示
  • center: 居中
  • space-between:两端指示,展现中间的步骤是相当的。。
  • space-around:每个展现在两边都有相当的步骤。。因而,展现中间的步骤是展现和居第二位的展现中间的两倍大。。

    flex-start和flex-end,这三个谷粒绝对比较地复杂。,首要区域是空的中间和四周的空的。;

    space-between:两端指示,

    

   space-around:

  

5  align-items:若何指示横坐标轴?,假定flex-direction:row和row-reverse  和横坐标轴是Y轴。,假定是列和列反向,则横坐标轴为X轴。

  • flex-start:穿插轴的校直。
  • flex-end:横坐标轴端指示。
  • center:十字轴中间的职位。
  • baseline: 展现第共同的的垒线指示。
  • stretch(默许值):假定项未设置为高处或设置为自发的,将居住全体数量箱的高处。。

    垒线:将说法与要素肉体美元素指示。

    

拉紧:子元素不设置高处,高处将被全体数量父元素染上或粘上。

     

6. 指示容量:属性限界多个轴的指示方法。。假定展现不料一点钟轴,这样地属性不起功能。。

  • flex-start:与穿插轴的校直。
  • flex-end:与横坐标轴端指示。
  • center:与十字轴中间的职位。
  • space-between:横坐标轴指示,轴间刻薄的步骤。
  • space-around:每个轴的安博是等距离的。。因而,轴中间的步骤是轴和轴中间的两倍大。。
  • stretch(默许值):轴居住全体数量横坐标轴。。

二   在子元素项上设置了六岁属性。:     

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

1.  order 子元素的地位按HTML的次等级。,HTML建筑学坐下默许的后面。;次的功能是使变酸子元素的次。

     order:默许值(0) 估价越小,越亲。,

<div id="box"><div class="inner item">1div><div class="inner">2div><div class="inner">3div><div class="inner">4div><div class="inner">5div>div>
第n个孩子(5){
        order: -1;
}

 膨胀面积 默许值为0。   当有拉长说空的的时辰,估价越大,膨胀乘以越大。

   flex-grow:0

 第n个孩子(1){
      flex-grow: 1;
    }

:减少面积 默许值为1。  估价越大,面积越小,它就越小。;

第n个孩子(5){
       order: -1;
       flex-shrink:24;
 }

 

属性限界了残余物空的的散布。,工程占有的主轴空的(主) 维)。由于此属性的浏览图书报刊者,计算主轴无论有富余的空的。。它的默许值是auto,就是,展现的原始级别。。

  flex-basis:200px  ,假定展现有额定的空的,设置为200像素。它会膨胀到200的宽度。;

5. flex属性是flex-growflex-shrink 和 flex-basis的缩短,默许值为0 1 auto。后两个属性是可选的。。

属性容许单独地项与那个项具有变化多的的指示方法。,可掩护align-items属性。默许值为auto,表现争吵的父元素align-items属性,假定无父元素,相当于stretch

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

  不计AutoT,它等比中数争吵父元素。,其余者的与指示展现相同的。。

  充当顾问文档:    

没有评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注