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,它目的加入父元素。,其他的与注册伸出相反。。

  适用于文档:    

没有评论

发表评论

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