精华内容
参与话题
问答
  • flex

    千次阅读 2011-08-04 15:54:07
    通过Adobe Flex 4.5 SDK发行版,开发人员可以将Flex用于多屏幕应用程序开发,进一步改进Flex 4中引入的Spark架构和组件集,并对核心Flex基础结构作出大量改进以简化大型应用程序开发。开发人员可以使用Adobe Flex ...
    Adobe Flex 4.5是用于构建和维护在所有主要浏览器、桌面和操作系统一致地部署的极具表现力的Web应用程序的高效率的开放源码框架。通过Adobe Flex 4.5 SDK发行版,开发人员可以将Flex用于多屏幕应用程序开发,进一步改进Flex 4中引入的Spark架构和组件集,并对核心Flex基础结构作出大量改进以简化大型应用程序开发。开发人员可以使用Adobe Flex Builder 4.5软件来显著促进开发。

    Flex的技术专题,从入门到开发、学习教程下载、常见问题探讨、Flex的优势与实例…… 资源很丰富啊!跟大家分享一下!有时间浏览一下肯定会学到很多知识的哦!
    http://www.cn-java.com/www1/flex.php/
    展开全文
  • Flex

    千次阅读 2017-03-05 16:51:48
    Flex应运而生,它可以简便、完整、响应式地实现各种页面布局。 Chrome 21,FF22,IE 10,Safari 6.1及以上的浏览器都支持FlexFlex布局将成为未来布局的首选方案。基本概念任何一个容器都可以指定为Flex

    传统的网页布局基于盒装模型,使用display,position,float属性来达成各种布局。
    对于一些特殊的布局使用这些来实现不是很方便,比如垂直居中。
    Flex应运而生,它可以简便、完整、响应式地实现各种页面布局。
    Chrome 21,FF22,IE 10,Safari 6.1及以上的浏览器都支持Flex。
    Flex布局将成为未来布局的首选方案。

    基本概念

    任何一个容器都可以指定为Flex布局。
    块级元素:

    .box{
      display: -webkit-flex; /* Safari chrome*/
      display: flex;
    }

    行内元素:

    .box{
      display: -webkit-inline-flex;
      display: inline-flex;
    }

    设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
    采用Flex布局的元素,称为Flex容器(flex container)。它的所有子元素自动成为容器成员,称为Flex项目(flex item)。
    容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。
    项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

    容器的属性

    以下6个属性设置在容器上,用来控制容器中项目的排列方式和位置:

    • flex-direction
    • flex-wrap
    • flex-flow
    • justify-content
    • align-items
    • align-content

    flex-direction

    flex-direction属性决定主轴的方向(即项目的排列方向)。

    .box {
      flex-direction: row | row-reverse | column | column-reverse;
    }

    它可能有4个值。

    • row(默认值):主轴为水平方向,起点在左端。
    • row-reverse:主轴为水平方向,起点在右端。
    • column:主轴为垂直方向,起点在上沿。
    • column-reverse:主轴为垂直方向,起点在下沿。

    flex-wrap

    默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

    .box{
      flex-wrap: nowrap | wrap | wrap-reverse;
    }

    它可能取三个值

    • nowrap(默认):不换行。
    • wrap:换行,第一行在上方,或者第一列在左
    • wrap-reverse:换行,第一行在下方,或者第一列在右

    flex-flow

    flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

    justify-content

    justify-content属性定义了项目在主轴上的对齐方式。注意,主轴可能是水平的也可能是垂直的。

    .box {
      justify-content: flex-start | flex-end | center | space-between | space-around;
    }

    它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右,其他方向类比即可:

    • flex-start(默认值):左对齐
    • flex-end:右对齐
    • center: 居中
    • space-between:两端对齐,项目之间的间隔都相等。
    • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

    align-items

    align-items属性定义项目在交叉轴上如何对齐,交叉轴是和主轴垂直的轴

    .box {
      align-items: flex-start | flex-end | center | baseline | stretch;
    }
    • flex-start:交叉轴的起点对齐。
    • flex-end:交叉轴的终点对齐。
    • center:交叉轴的中点对齐。
    • baseline: 项目的第一行文字的基线对齐。
    • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

    align-content

    align-content属性定义了多根轴线的对齐方式。这个和之前的align-items不太一样,后者是规定元素相对本轴线的行为,

    .box {
      align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    }

    该属性可能取6个值:

    • flex-start:与交叉轴的起点对齐。
    • flex-end:与交叉轴的终点对齐。
    • center:与交叉轴的中点对齐。
    • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
    • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴与边框的间隔大一倍。
    • stretch(默认值):轴线占满整个交叉轴。

    项目的属性

    以下6个属性设置在项目上,用来设置项目的大小,对齐,次序等:

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

    order

    order属性定义项目的排列顺序。数值越小,排列越靠前,当然,这个前是相对于主轴顺序来说的,默认值为0。

    .item {
      order: <integer>;
    }

    flex-grow

    flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
    如果所有项目的flex-grow属性都为x,则它们将等分剩余空间(如果有的话,值为0的元素不参加等分)。如果一个项目的flex-grow属性为2x,其他项目都为x,则前者占据的剩余空间将比其他项多一倍。

    flex-shrink

    flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
    如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

    flex-basis

    flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
    它可以设为跟width(主轴横向)或height属性一样的值,则项目将占据固定空间。

    flex

    flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
    该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
    建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。这点一定要注意,你设置flex-grow:1和flex:1效果不一样的。

    align-self

    align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

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

    该属性可能取6个值,除了auto,其他都与align-items属性完全一致。

    实例

    骰子布局

    我们的骰子和骰子上的点的结构是这样的:

    <div class="one-container">
        <div class="point"></div>
        <div class="point"></div>
        <!--...-->
    </div>

    骰子的公共样式:

    div{
      display: flex;
      width:104px;
      height:104px;
      margin:16px;
      padding:4px;
      background-color: #e7e7e7;
      box-shadow:
              inset 0 5px white,
              inset 0 -5px #bbb,
              inset 5px 0 #d7d7d7,
              inset -5px 0 #d7d7d7;
      border-radius: 10%;
      .point{
        width: 24px;
        height: 24px;
        border-radius: 50%;
        margin: 4px;
        background-color: #333;
        box-shadow: inset 0 3px #111, inset 0 -3px #555;
      }
    }

    左上一个点

    Flex布局默认就是首行左对齐,所以啥都不用写,里面放一个point就好。

    中上一个点

    设置项目在主轴上的对齐方式可以调整点的水平位置:

    .one-container{
      //top center
      justify-content:center;
    }

    右上一个点

    同理

    .one-container{
      //top right
      justify-content:flex-end;
    }

    中间行,下行一个点

    设置项目在交叉轴上的对齐方式,可以将点移到中间行和最下行,再配合刚才的justify-content,9个位置的单独点就都可以达成了。

    .one-container{
      //top left
    
      //top center
      justify-content:center;
    
      //top right
      justify-content:flex-end;
    
      //center left
      align-items:center;
    
      //center center
      align-items:center;
      justify-content:center;
    
      //center right
      align-items:center;
      justify-content:flex-end;
    
      //bottom left
      align-items:flex-end;
    
      //bottom center
      align-items:flex-end;
      justify-content:center;
    
      //bottom right
      align-items:flex-end;
      justify-content:flex-end;
    }

    两个点

    当有两个项目的时候,我们先来看看一行上放两个点,两个点排在一行的两端。
    使用justify-content,你有两个选择,space-around和space-between。
    一个两边不留空等分间距,一个两边留空

    .two-container{
     justify-content:space-between;
    }

    竖着排列:

    .two-container{
      //row two sperad
      justify-content:space-between;
      //column
      flex-direction: column;
    }

    我们知道骰子的两个点是斜着排列的,那怎么办呢,这时align-self就起作用了:

    .two-container{
      //row two sperad
      justify-content:space-between;
      //column
      flex-direction: column;
      .point:nth-child(2) {
        align-self: flex-end;
      }
    }

    三个点

    这里主轴水平,第2个和第3个点使用align-self放到中间行和最下行,这里注意调整一下项目在主轴上的分布,这样3个点就会在水平的中央不偏了。

    .third-container{
      justify-content:space-between;
      .point:nth-child(2) {
        align-self: center;
      }
      .point:nth-child(3) {
        align-self: flex-end;
      }
    }

    四个点

    骰子的4个点是分布在四个角上的这个有两种实现方法
    如果你的骰子是固定大小的,给第一第三个点增加一个右外边距使得一行只能容下两个点:

    .four-container{
      justify-content:space-between;
      align-content: space-between;
      flex-wrap:wrap;
      .point:nth-child(2n+1) {
        margin-right:40px;
      }
    }

    或者你使用两个flex布局嵌套:

    <div class="four-container-other">
        <div class="row">
            <div class="point"></div>
            <div class="point"></div>
        </div>
        <div class="row">
            <div class="point"></div>
            <div class="point"></div>
        </div>
    </div>
    .four-container-other{
      align-content:space-between;
      flex-wrap: wrap;
      .row{
        width:100%;
        display: flex;
        justify-content:space-between;
      }
    }

    五个点

    由四个点递推,第一个方法不行了,只能使用第二个办法。

    <div class="five-container">
        <div class="row">
            <div class="point"></div>
            <div class="point"></div>
        </div>
        <div class="row">
            <div class="point"></div>
        </div>
        <div class="row">
            <div class="point"></div>
            <div class="point"></div>
        </div>
    </div>
    .five-container{
      align-content:space-between;
      flex-wrap: wrap;
      .row{
        width:100%;
        display: flex;
        justify-content:space-between;
      }
      .row:nth-child(2) {
        justify-content: center;
      }
    }

    六个点

    这个反倒简单了,因为3个点自己就会排满一行:

    <div class="six-container">
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
    </div>
    .six-container{
      flex-wrap: wrap;
      align-content:space-between;
      justify-content:space-between;
    }

    网格布局

    基本网格布局

    最简单的网格布局,就是平均分布。在容器里面平均分配空间。只要给项目设置了相同的flex-basis(不能是auto),flex-grow和flex-shrink,不管是多少个项目都会均分空间。或者你干脆设置一个flex:1,这样浏览器会自动推算出:

    flex-basis: 0px;
    flex-grow: 1;
    flex-shrink: 1;

    如果你只设置了flex-grow是不行的,虽然flex-shrink默认就是1可以不管,但是由于flex-basis默认为auto,所以内容比较多的元素会占比较大的主轴空间。

    <div class="row even">
        <div class="cell">
            <div class="cell">1/2</div>
        </div>
        <div class="cell">
            <div class="cell">1/2</div>
        </div>
    </div>
    <div class="row even">
        <div class="cell">
            <div class="cell">1/3</div>
        </div>
        <div class="cell">
            <div class="cell"></div>
        </div>
        <div class="cell">
            <div class="cell">1/3</div>
        </div>
    </div>
    .row{
      display: flex;
      flex-wrap: nowrap;
      margin: -1em 0 1em -1em;
      .cell{
        padding: 1em 0 0 1em;
        text-align: center;
        flex: 1;
        //flex-basis: 0px;
        //flex-grow: 1;
        //flex-shrink: 1;
        color:white;
        display: flex;
        .item{
          background-color: hsla(31,15%,50%,.2);
          border-radius: 4px;
          padding: .8em 1em 0;
          width:100%;
          &:after {
            content: '\00a0';
            display: block;
            margin-top: 1em;
            height: 0;
            visibility: hidden;
          }
        }
      }
    }

    这里设置了flex=1。
    你会注意到,这里的cell只是一个容器,项目的样子是由cell里的item设置的,cell之所以设置了display:flex是为了使cell里的item的高度利用align-items的默认值stretch填充满cell,即使没有内容或内容不够。
    还有这里的row的margin、cell的padding、item的伪元素是有讲究的,是为了在flex布局嵌套时互相抵消用的,这个会在下面解释

    百分比布局

    某个网格的宽度为固定的百分比,其余网格平均分配剩余的空间。
    平均分配剩余空间的项目其实还是靠的flex都为相同的值,对于那个要占固定位置的,通过给flex-basis一个百分比来设置它占主轴多宽,flex-shrink和flex-grow都设为0来保证其大小不会自适应的调整。如果你的项目是有margin的,那么这个百分比是不准的,和width一样,所以项目之间的间距最好使用padding来达成。

    <div class="row fix-precentage">
        <div class="cell c-100">
            <div class="item">full</div>
        </div>
        <div class="cell">
            <div class="item">nowhere to go</div>
        </div>
    </div>
    <div class="row fix-precentage">
        <div class="cell c-50">
            <div class="item">full</div>
        </div>
        <div class="cell">
            <div class="item">even rest</div>
        </div>
        <div class="cell">
            <div class="item">even rest</div>
        </div>
        <div class="cell">
            <div class="item">even rest</div>
        </div>
    </div>
    .c-100{
      flex: 0 0 100%;
    }
    .c-50{
      flex: 0 0 50%;
    }

    响应式布局

    利用媒体查询加flex就可以做到响应式的布局咯:

    .row.responsive{
      flex-wrap: wrap;
      @media all and (max-width: 768px)  {
        .cell {
          flex:0 0 100%;
        }
      }
    }

    网格布局嵌套

    在一个flex项目div中再嵌套一个row的时候,row的左上负margin会和div的padding抵消。
    row下面的正margin-bottom会和div的伪元素的margin-top重合。
    这样一个row就正常的放在了div里,没有任何多于的边距。

    <div class="row nest">
        <div class="cell">
            <div class="item">
                <div class="row">
                    <div class="cell">
                        <div class="item">1/2</div>
                    </div>
                    <div class="cell">
                        <div class="item">
                            <div class="row">
                                <div class="cell">
                                    <div class="item">1/2</div>
                                </div>
                                <div class="cell">
                                    <div class="item">1/2</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="cell">
            <div class="item">responsive</div>
        </div>
        <div class="cell">
            <div class="item">responsive</div>
        </div>
    </div>

    圣杯布局

    圣杯布局指的是一种最常见的网站布局。页面从上到下,分成三个部分:头部(header),躯干(body),尾部(footer)。其中躯干又水平分成三栏,从左到右为:导航、主栏、副栏。
    我们使用一个总的垂直的flex布局,放上header,body,footer。
    其中header和footer固定高度,flex:none
    body自动拉伸,在内容不够时配合整个容器的最小高度100vh使footer处于页面最底;在内容多时拉伸配合内容,flex:flex: 1 0 auto;

    .HolyGrail{
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      //height:100%;
      header,
      footer {
        flex: none;
      }
      .HolyGrail-body {
        display: flex;
        flex: 1 0 auto; /* 2 */
      }
    }

    在body中,flex水平布局,左右边栏固定宽度,中间内容随屏幕铺开:

    .HolyGrail-content {
      flex: 1;
    }
    .HolyGrail-nav, .HolyGrail-ads {
      /* two aside fix to 12em */
      flex: 0 0 12em;
    }

    nav放在最左侧:

    .HolyGrail-nav {
      /* nav left */
      order: -1;
    }

    在屏幕宽度太小时,body中内容竖直排列比较合适

    @media all and (max-width: 768px) {
      .HolyGrail-body {
        flex-direction: column;
        flex: 1;
      }
      .HolyGrail-nav,
      .HolyGrail-ads,
      .HolyGrail-content {
        flex: auto;
      }
    }

    输入框布局

    我们常常需要在输入框的前方添加提示,后方添加按钮。
    我们想让这个提示或按钮是固定宽度的,然后input填满剩下的宽度,但是在以前这并不容易,现在有了 flex一切就变得简单了

    <!-- appending -->
    <div class="InputAddOn">
        <input class="InputAddOn-field">
        <button class="InputAddOn-item">Submit</button>
    </div>
    
    <!-- prepending -->
    <div class="InputAddOn">
        <span class="InputAddOn-item">Hint:</span>
        <input class="InputAddOn-field">
    </div>
    
    <!-- both -->
    <div class="InputAddOn">
        <span class="InputAddOn-item">Hint:</span>
        <input class="InputAddOn-field">
        <button class="InputAddOn-item">Submit</button>
    </div>

    核心就两个

    .InputAddOn {
      display: flex;
    }
    
    .InputAddOn-field {
      flex: 1;
    }

    不过当然要美化一下啦~

    .InputAddOn {
      margin:1em;
      display: flex;
    }
    .InputAddOn-field:first-child, .InputAddOn-item:first-child {
      border-radius: 2px 0 0 2px;
    }
    .InputAddOn-field:not(:last-child), .InputAddOn-item:not(:last-child) {
      border-right: 0;
    }
    .InputAddOn-field:last-child, .InputAddOn-item:last-child {
      border-radius: 0 2px 2px 0;
    }
    .InputAddOn-field, .InputAddOn-item {
      border: 1px solid hsla(31,15%,50%,.25);
      padding: .5em .75em;
    }
    .InputAddOn-field {
      flex: 1;
    }
    .InputAddOn-item {
      background-color: hsla(31,15%,50%,.1);
      color: #666;
      font: inherit;
      font-weight: 400;
    }

    悬挂式布局

    左边是头像,右边是文章的布局用flex实现也很合适:

    <div class="media">
        <img class="media-figure" src="kitten.jpg" />
        <div class="media-body">
            <h3>Media Object Title</h3>
            <p>Phasellus vel felis purus. Aliquam consequat pellentesque dui, non mollis erat dictum sit amet. Curabitur non quam dictum, consectetur arcu in, vehicula justo.</p>
        </div>
    </div>
    .media {
      display: flex;
      align-items: flex-start;
    }
    
    .media-figure {
      margin-right: 1em;
    }
    
    .media-body {
      flex: 1;
    }

    可以套用刚才的grid系统实现多列和嵌套:

    <div class="hang-layout grid">
        <div class="row nest">
            <div class="cell c-50">
                <div class="item">
                    <div class="media">
                        <img class="media-figure" src="kitten.jpg" />
                        <div class="media-body">
                            <h3>Media Object Title</h3>
                            <p>Phasellus vel felis purus. Aliquam consequat pellentesque dui, non mollis erat dictum sit amet. Curabitur non quam dictum, consectetur arcu in, vehicula justo.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cell">
                <div class="item">
                    <div class="media">
                        <img class="media-figure" src="kitten.jpg" />
                        <div class="media-body">
                            <h3>Media Object Title</h3>
                            <p>Phasellus vel felis purus. Aliquam consequat pellentesque dui, non mollis erat dictum sit amet. Curabitur non quam dictum, consectetur arcu in, vehicula justo.</p>
                            <div class="row nest">
                                <div class="cell">
                                    <div class="item">
                                        <div class="media">
                                            <img class="media-figure" src="kitten.jpg" />
                                            <div class="media-body">
                                                <h3>Media Object Title</h3>
                                                <p>Phasellus vel felis purus. Aliquam consequat pellentesque dui, non mollis erat dictum sit amet. Curabitur non quam dictum, consectetur arcu in, vehicula justo.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    .hang-layout{
      display: flex;
      flex-wrap: wrap;
      background-color: white;
      .media{
        display: flex;
        flex-basis: 50%;
        align-items: flex-start;
        padding:10px;
        text-align: left;
        color: #2b2d2f;
        .media-figure {
          margin-right: 1em;
          width:50px;
        }
        .media-body {
          flex: 1;
        }
      }
    }

    流式布局

    即每行的项目数固定,自动分行,以前是用float实现的。
    主要就是设置项目的flex-grow,flex-shrink,flex-basis。

    <div class="flowLayout">
        <div class="flowItem"></div>
        <div class="flowItem"></div>
        <div class="flowItem"></div>
        <div class="flowItem"></div>
        <div class="flowItem"></div>
    </div>
    .flowLayout{
      display: flex;
      flex-wrap: wrap;
      .flowItem{
        border: 2px solid red;
        padding:2em;
        flex: 0 0 25%;
      }
    }

    垂直居中

    这个一直是网页布局的噩梦,如果你想垂直居中一个大小不定的元素,还有一些hack的办法,如果你想垂直一组大小不定,数目不定的元素。。。。good luck
    而使用flex,这实在太轻松了,使用align-items,align-self,justify-content你可以居中任何东西!

    <div class="vertical">
        <div class="item">
            <h3>We are Centered Anyway</h3>
            <p contenteditable="true">click me and try</p>
        </div>
        <div class="item">
            <h3>We are Centered Anyway</h3>
            <p contenteditable="true">click me and try</p>
        </div>
        <div class="item">
            <h3>We are Centered Anyway</h3>
            <p contenteditable="true">click me and try</p>
        </div>
    </div>
    .vertical{
      background-color: hsla(31,15%,50%,.1);
      /*only these importent*/
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      /*only these importent*/
      padding:1em;
      min-height: 900px;
      .item{
        background-color: hsla(31,15%,50%,.1);
        max-width:50%;
        padding:1em;
        margin: 1em;
        border-radius: 4px;
      }
    }
    展开全文
  • Flex 4实战》.pdf

    千次下载 热门讨论 2013-01-07 16:43:10
    Flex 4实战》主要内容简介:Flex已经从原来构建flash应用程序的一种方式发展成为一个丰富的体系。Flex4中引入了新的ui组件,提供了更好的性能监控,并且大大提高了编译速度。《Flex 4实战》是一本全面的指南,为...
  • Flex从入门到实践.pdf

    千次下载 热门讨论 2010-05-02 22:59:18
    本书循序渐进地介绍了Flex从基础知识到高级应用。书中的每一个章节都使用了实例来说明,并穿插了大量的说明、注意事项和操作技巧。本书共分为24章,分别介绍了Flex语言基础、交互设计、布局导航、行为样式、数据通信...
  • flex4.6-api.chm

    千次下载 热门讨论 2012-07-23 13:04:19
    我见到过的最好用的flex4 chm api,非常完整,超级帮 最新Flex4.6中文API,离线帮助文档,无js错误
  • Flex布局

    千次阅读 2017-11-13 11:46:32
    Flex布局常用的布局方式有3种: display:css内联和块级布局。 position:绝对、相对定位布局。 float:浮动布局。 传统的布局方式存在一个很明显的问题,那就是垂直居中不易实现。flex:弹性盒子布局,可以更好的实现...

    Flex布局

    常用的布局方式有3种:

    • display:css内联和块级布局。
    • position:绝对、相对定位布局。
    • float:浮动布局。

    传统的布局方式存在一个很明显的问题,那就是垂直居中不易实现。

    flex:弹性盒子布局,可以更好的实现响应式布局。

    Flex的使用

    Flex容器

    任何容器都可以flex布局。Flex容器的所有子元素也自动成为容器的成员,成为Flex项目Flex容器默认存在2根轴线(水平主轴和垂直交叉轴),布局就是根据这2根轴来排列项目显示的。

    块级元素:display:flex;

    内联元素:display:inlne-flex;

    使用了flex布局后,项目的float、clear、vertical-align都将失去效果。

    Flex容器属性

    1.flex-direction

    设置项目的排列方向。

    flex-direction: row | row-reverse | column | column-reverse;
    
    • row(默认值):主轴为水平方向,起点在左端。

      从左往右排。如果超出容器宽度,容器会根据项目的宽度进行等比缩放

    • row-reverse:主轴为水平方向,起点在右端。

      从右往左排,如果超出容器宽度,容器会根据项目的宽度进行等比缩放

    • column:主轴为垂直方向,起点在上沿。

      从上往下排。

    • column-reverse:主轴为垂直方向,起点在下沿。

      从下往上排。

    2.flex-wrap

    设置项目是否换行排列。

    flex-wrap: nowrap | wrap | wrap-reverse;
    
    • nowrap(默认值):不换行。
    • wrap:换行,第一行在上方。
    • wrap-reverse:换行,第一行在下方。

    3.flex-flow

    flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

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

    4.justify-content

    设置项目的水平对齐方式。

    justify-content: flex-start | flex-end | center | space-between | space-around;
    
    • flex-start(默认值):左对齐
    • flex-end:右对齐
    • center: 居中
    • space-between:两端对齐,项目之间的间隔都相等。
    • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

    5.align-items

    设置项目垂直方向对齐方式。

    align-items: flex-start | flex-end | center | baseline | stretch;
    
    • flex-start:交叉轴的起点对齐。
    • flex-end:交叉轴的终点对齐。
    • center:交叉轴的中点对齐。
    • baseline: 项目的第一行文字的基线对齐。
    • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

    6.align-content

    当项目定义了横竖2根轴的时候生效,相当于justify-contentalign-items的简写。

    Flex项目属性

    a.order

    定义项目的排列顺序,值越小越考前,默认为0。

    order: <integer>;
    

    b.flex-grow

    定义项目的放大比例,默认为0(不放大),大于0则自动填充剩余区域,大于0的时候照数值大小的倍数填充相应区域。例如2个平级div,一个flex-grow:1,另一个flex-grow:2,则第一个div是第2个div的2倍宽度,且2个div共同填充满剩余宽度。如果数值都相等且大于0,那么久平分剩余区域。

    flex-grow: <number>; 
    

    c.flex-shrink

    定义项目的缩小比例,默认为1,如果空间不足将自动缩小。

    不能和flex-wrap共用,如果项目换行,那么缩小的计算方式将无法生效。

    flex-shrink: <number>; 
    

    d.flex-basis

    定义项目主轴空间,相当于设置width,默认为auto。

    flex-basis: <length> | auto;
    

    e.flex

    flex属性是flex-grow, flex-shrinkflex-basis的简写,默认值为0 1 auto。后两个属性可选。

    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    

    flex:auto => flex:1 1 auto;
    flex:none =>flex:0 0 auto;
    flex:1 => flex:1 1 0%;
    当设置 flex:1时,如果子元素宽度的和大于了父元素的宽度,将自动缩小子元素,若果子元素宽度的和小于父元素宽度,则自动放大子元素。
    所以如果遇到了定宽的子元素,一样要单独设置flex-shrink:0,否则它将随父元素改变而改变。

    f.align-self

    定义项目的对齐方式。可覆盖align-items。默认值:auto。

    align-self: auto | flex-start | flex-end | center | baseline | stretch;
    
    展开全文
  • Flex下拉框

    千次阅读 2014-10-29 21:56:19
    xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="initHandler(event)
    <?xml version="1.0" encoding="utf-8"?>
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    			   xmlns:s="library://ns.adobe.com/flex/spark" 
    			   xmlns:mx="library://ns.adobe.com/flex/mx" 
    			   creationComplete="initHandler(event)"
    			   width="100%" height="100%" fontSize="12"
    			   fontFamily="微软雅黑">
    	<s:layout>
    		<s:BasicLayout/>
    	</s:layout>
    	<fx:Script>
    		<![CDATA[
    			import mx.collections.ArrayCollection;
    			import mx.controls.Alert;
    			import mx.events.FlexEvent;
    			import mx.events.ItemClickEvent;
    			
    			import spark.events.IndexChangeEvent;
    			
    			[Bindable]
    			private var comArray:ArrayCollection = new ArrayCollection([
    				{dateType:"日",areaDesc:"北京"},
    				{dateType:"月",areaDesc:"上海"},
    				{dateType:"日",areaDesc:"深圳"},
    				{dateType:"月",areaDesc:"武汉"},
    				{dateType:"日",areaDesc:"兰州"},
    				{dateType:"月",areaDesc:"天津"}
    			]);
    
    			/**
    			 * 初始化函数
    			 */
    			protected function initHandler(event:FlexEvent):void
    			{
    				
    			}
    
    			/**
    			 * 改变下拉框
    			 */
    			protected function comboBox_changeHandler(event:IndexChangeEvent):void
    			{
    				for each(var com:Object in comArray)
    				{
    					if(com.dateType == "日")
    					{
    						date.visible = true;
    						month.visible = false;
    					}
    					else if(com.dateType == "月")
    					{
    						date.visible = false;
    						month.visible = true;
    					}
    				}
    			}
    
    			/**
    			 * 
    			 */
    			protected function radio_itemClickHandler(event:ItemClickEvent):void
    			{
    				
    			}
    
    		]]>
    	</fx:Script>
    	<fx:Declarations>
    		<s:RadioButtonGroup id="radio" itemClick="radio_itemClickHandler(event)"/>
    	</fx:Declarations>
    	
    	<mx:VBox width="100%" height="100%" paddingTop="20" paddingBottom="10" paddingLeft="10" 
    			 paddingRight="20">
    		<mx:HBox width="100%" height="60" verticalAlign="middle" borderColor="0x000000" borderStyle="solid"
    				 horizontalAlign="center">
    			<s:Label text="日期类型:"/>
    			<s:RadioButton id="dayStr" groupName="radio" label="日"/>
    			<s:RadioButton id="monthStr" groupName="radio" label="月"/>
    			<mx:DateField id="date" formatString="YYYY-MM-DD" width="200"/>
    			<s:Label width="50"/>
    			<mx:DateField id="month" formatString="YYYY-MM" width="200"/>
    			<s:Label width="50"/>
    			<s:Label text="地域:"/>
    			<s:ComboBox id="comboBox" width="200" dataProvider="{comArray}" labelField="areaDesc" selectedIndex="0"
    						change="comboBox_changeHandler(event)"/>
    		</mx:HBox>
    	</mx:VBox>
    	
    </s:Application>
    

    展开全文
  • Flex Dashboard

    千次阅读 2010-03-22 19:50:00
    今天用了一个下午的时间,终于将flex3版本的dashboard成功升级到了flex4,深感欣慰。
  • flex布局

    千次阅读 多人点赞 2019-04-25 17:19:34
    flex布局flex布局flex布局flex布局flex布局flex布局
  • Flex4 权威代码指南(清晰中文版)pdf+目录+含源代码

    千次下载 热门讨论 2012-11-14 10:50:35
    Flex4 权威代码指南》(中文版)PDF清晰版,含code源代码  本书是Adobe公司的官方教程,手把手教你贯通Flex4开发,是Flex技术入门首选。本书以课程的形式逐步讲解了如何用Flex 4开发一个完整的网上杂货商店应用...
  • Flex通信篇——Flex键盘组合键

    千次阅读 2009-12-30 14:37:00
    Flex中的键盘事件 要在Flex中响应键盘输入,只需注册keyDown事件即可。 xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" keyDown="OnKeyDown(event)"> private function OnKeyDown(event:Keyboard
  • 复杂的flex datagrid ,在datagrid 中添加树 xmlns:s="library://ns.adobe.com/fle
  • 转:http://zhidao.baidu.com/question/114531385.html 1.ComboBox 添加数据 2.ComboBox 的label 3.list数据动态添加 <s:Application xmlns:fx="http://ns
  • flex布局(一劳永逸的搞定)

    万次阅读 多人点赞 2017-04-27 14:49:54
    寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到float属性不由得感觉眼前一亮,顺理成章的联想到 Word 文档排版中用到的的左对齐、右...
  • flex 自定义类 调用类 静态方法 Test.as package com.actionscriptas { import mx.controls.Alert; public class Test { public function Test()
  • CSS - flex

    2018-06-24 19:00:01
    CSS2.1定义了四种布局方式,由一个盒与其兄弟,祖先盒的关系决定其尺寸...CSS3引入的flex布局,主要思想是让容器有能力控制子项目的高度,宽度(设置顺序)。以最佳方式填充可用空间(主要是为了适应所有类型的显示...
  • Flex知识目录

    千次阅读 2012-03-28 23:11:09
    这两个月总结了不少Flex相关知识点,在此做个目录,以后更新文章也会更新目录,方便自己查看。  Flex事件  Flex事件机制(一):事件的介绍以及处理事件的方式。  Flex事件机制(二):使用事件在父子组件之间传递...
  • CSS Flex布局

    千次阅读 2017-09-14 11:07:30
    flex 布局   2009年,W3C 提出了一种新的方案—-Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。通过学习,编写了flex...
  • flex的sdk 3.5.0

    千次下载 热门讨论 2012-04-03 06:58:57
    flex的sdk版本为3.5.0,解压缩后放在相应的目录就可以使用了。
  • 点击这里使用RSS订阅本Blog:<!-- main_sub="c1s67";more_subs="";--> 摘自http://blog.csdn.net/zzr173/archive/2008/07/05/2613156.aspx一,概述 二,使用MXML组件构建用户界面 三,数据绑定 四,界面布局和导航 ...
  • Flex数据类型

    千次阅读 2013-09-28 12:55:08
    Flex数据类型分类
  • flexcss.css /* CSS file */ @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; /* globa
  • RIA编程-神奇的FLEX实战

    千人学习 2016-10-22 13:12:12
    而且FLEX的大优势是采用RPC模式,比AJAX速度更快。 在浏览器中播放视频,FLEX编程占据了垄断地位; FLEX还有push模式开发,是非常重要的技术! 这套 视频的开发环境是:myEclipse10+Flash builder4.6
  • Flexbox布局方式在web端比较流行,仔细研读该文,发现布局方式是盒子模型的概念,好奇之下又...然后不知怎么的又发现了一个YogaKit的封装实现(Swift的),叫做FlexLayout,看了它的使用Demo,一时无语凝噎,相见恨晚。
  • Flex开发实战(一)--Flex的详细介绍

    万次阅读 2015-06-24 00:01:25
    无论是做web还是桌面应用,相信大家对于界面的要求已经越来越高,界面趋于大图标,扁平化,要求不断提高用户体验度高,把握好人机交互。相应的技术也层出不穷,例如:Flex,JQuery,Ajax,HTML5+CSS3等等吧。
  • flex4兼容flex3

    千次阅读 2011-05-11 18:20:00
    flex4与差别还是挺大的,今天在flex4中遇到一问题,导入外部CSS文件貌似不起作用,图片透明貌似也没效果。这些在flex3中都可以实现,在flex4中都无。 解决方法:右键项目--properties--flex compiler,...
  • 在MDN上有关Flex布局的属性中。 对于flex-basis、flex-grow、flex-shrink三个属性结合起来测试。 附链接,直接在CodePen中修改测试。 flex-shrink(MDN): ...
  • display:box box-flex 和 display:flex flex 有什么区别?
  • flex整合spring也有很多的例子,其实有很多例子很复杂。我在这就给大家介绍个最简单的,很实用。说明下:flex完全可以代替struts,下面的例子能证明。有人会问了,和其他框架怎么样整合。spring都能整合了,其他框架...

空空如也

1 2 3 4 5 ... 20
收藏数 83,465
精华内容 33,386
关键字:

flex