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 主轴公开支持方面的决定,使杰出有4属性。:       

  • 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,它打算继续进行父元素。,其余的的与成一条线发射等于。。

  顾及文档:    

没有评论

发表评论

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