使用CSS灵活的盒子

对于许多应用程序,灵活的块盒模型提供了一个改进模型,它不使用浮动,flex容器的利润率也不崩溃边缘的内容。

许多设计师会发现flexbox模型更易于使用。在flexbox子元素可以在任何方向,可以灵活的适应显示空间维度。因此更容易定位子元素,可以实现复杂的布局更简单和更清洁的代码,作为显示元素的顺序在源代码中独立于他们的订单。这种独立性故意只影响视觉呈现,使得演讲顺序和导航基于源顺序。

注意:对每个属性的兼容性状态。

灵活的盒子的概念

flex布局的定义方面是能够改变其商品的宽度和/或高度最好填补任何显示设备上的可用空间。 flex容器扩展项目来填补可用空闲空间,防止溢出或收缩。

direction-agnostic flexbox布局算法而不是块布局,vertically-biased,或内联的布局,这是horizontally-biased。块布局适用于页面,它缺乏足够的定义来支持应用程序组件,改变方位,调整,伸展,或缩小用户代理的变化,从垂直,水平翻转,等等。 Flexbox布局是最适合应用程序的组件,和小规模的布局,(新兴)网格布局适用于大规模布局。都是一个更广泛的努力的一部分CSS工作组提供的更大的互操作性的web应用程序有不同的用户代理,不同的写作模式和其他要求的灵活性。

灵活的盒子的词汇

,这意味着flex项目遵循对方整个主轴水平根据既定的写作模式,元素的文本的方向流动,在这种情况下,从左到右。

使用CSS灵活的盒子

Flex容器

财产。

Flex项目

每个孩子的flex容器变成一个flex项目。文本直接包含在flex容器包装在一个匿名的flex项目。

轴

。

属性建立主轴。
属性定义了flex项目布局沿主轴在当前行。
属性定义了默认的flex项目的布局方式沿着十字轴在当前行。
属性定义了一个flex项目在十字架上轴对齐,并覆盖默认了align-items.

方向

(从左到右,从右到左,等等)。

财产分配顺序组织和确定哪些元素出现。
属性来布置flex项目。

行

属性,该属性控制十字轴的方向和新线路的方向堆积。

维

分别遵循的主要轴,十字轴flex容器。

属性初始值为0。
属性建立flex项目的灵活性。

指定一个灵活的盒子

属性如下:

display : flex

或

display : inline-flex

价值使得flex容器原子inline-level元素。

注意:。

Flex项目注意事项

。

绝对定位的孩子安置一个flex容器使其静态位置确定参考的主要内容框角落开始flex容器。

。

W3C灵活的框布局模型规范的更多细节。

~~为更多的细节。~~

财产。

属性不影响演讲或导航序列。因此,开发人员必须照顾正常秩序元素在源,以免损坏文档的可访问性。

灵活的框属性

order

属性不会影响灵活的盒子

因为灵活盒使用不同的布局算法,一些性质在flex容器:做没有意义

column-*没有影响flex项目。
float。
vertical-align对齐的flex项目没有影响。

例子

基本的flex的例子

这个基本的例子展示了如何将“灵活性”应用到一个元素和兄弟元素如何在一个灵活的状态。

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>

   .flex
   {
      /* basic styling */
      width: 350px;
      height: 200px;
      border: 1px solid #555;
      font: 14px Arial;

      /* flexbox setup */
      display: -webkit-flex;
      -webkit-flex-direction: row;

      display: flex;
      flex-direction: row;
   }

   .flex > div
   {
      -webkit-flex: 1 1 auto;
      flex: 1 1 auto;

      width: 30px; /* To make the transition work nicely.  (Transitions to/from
                      "width:auto" are buggy in Gecko and Webkit, at least.
                      See http://bugzil.la/731886 for more info.) */

      -webkit-transition: width 0.7s ease-out;
      transition: width 0.7s ease-out;
   }

   /* colors */
   .flex > div:nth-child(1){ background : #009246; }
   .flex > div:nth-child(2){ background : #F1F2F1; }
   .flex > div:nth-child(3){ background : #CE2B37; }

   .flex > div:hover
   {
        width: 200px;
   }
   
   </style>
    
 </head>
 <body>
  <p>Flexbox nuovo</p>
  <div class="flex">
    <div>uno</div>
    <div>due</div>
    <div>tre</div>
  </div>
 </body>
</html>

圣杯布局的例子

这个例子演示了如何flexbox能够动态改变布局不同的屏幕分辨率。下面的图表说明了转换。

使用CSS灵活的盒子

说明这是情况下,页面布局适合智能手机的浏览器窗口必须优化窗口。不仅必须元素减少在大小,但他们的顺序提出了必须改变。 Flexbox使得这个非常简单。

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>

  body {
   font: 24px Helvetica;
   background: #999999;
  }

  #main {
   min-height: 800px;
   margin: 0px;
   padding: 0px;
   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;
   }
 
  #main > article {
   margin: 4px;
   padding: 5px;
   border: 1px solid #cccc33;
   border-radius: 7pt;
   background: #dddd88;
   -webkit-flex: 3 1 60%;
           flex: 3 1 60%;
   -webkit-order: 2;
           order: 2;
   }
  
  #main > nav {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 1;
           order: 1;
   }
  
  #main > aside {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 3;
           order: 3;
   }
 
  header, footer {
   display: block;
   margin: 4px;
   padding: 5px;
   min-height: 100px;
   border: 1px solid #eebb55;
   border-radius: 7pt;
   background: #ffeebb;
   }
 
  /* Too narrow to support three columns */
  @media all and (max-width: 640px) {
  
   #main, #page {
    -webkit-flex-flow: column;
            flex-direction: column;
   }