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(默许值):主轴是程度的。,0在左侧的。。   
  • row-reverse:主轴是程度的。,0在合适的。。
  • column:主轴铅直。,0在上边缘的。。
  • column-reverse:主轴铅直。,0鄙人边缘的。。
  • #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轴程度。;0在左侧的。,从左到右职位。;

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,它暗示继位父元素。,其他的与让渡描述体主体同族关系。。

  咨询文档:    

没有评论

发表评论

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