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,它宣布继续进行父元素。,其他的与使结盟条平等的。。

  涉及文档:    

没有评论

发表评论

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