CSS Flexbox(灵活盒子)

  • CSS Flexbox布局模块

    在Flexbox布局模块之前,有四种布局模式:
    • 块(block),用于网页中的部分
    • 内联(inline),用于文本
    • 表(table),用于二维表数据
    • 定位(position),用于元素的显式位置
    Flexbox布局模块,可以更轻松地设计灵活的响应式布局结构,而无需使用浮动或定位。
  • 浏览器支持

    属性 Internet Explorer Chrome FireFox Safari Opera
    属性格式
    flexbox 11.0 29.0 22.0 10.0 48.0
  • Flexbox元素

    要开始使用Flexbox模型,您需要先定义一个Flex容器。
    1
    2
    3
    上面的元素表示一个包含三个flex项目的flex容器(蓝色区域)。
    <div class="flex-container">
       <div>1</div>
       <div>2</div>
       <div>3</div>
     </div>
    
    尝试一下
  • 父元素(容器)

    通过将display属性设置为flex,Flex容器变得灵活:
    .flex-container {
       display: flex;
     }
    
    Flex容器属性有:
    • flex-direction
    • flex-wrap
    • flex-flow
    • justify-content
    • align-items
    • align-content
  • flex-direction属性

    flex-direction属性定义容器要在哪个方向上堆叠弹性项目。
    1
    2
    3
    上面的元素表示一个包含三个flex项目的flex容器(蓝色区域)。 column值堆叠(但从顶部到底部):
    .flex-container {
       display: flex;
       flex-direction: column;
     }
    
    尝试一下
    column-reverse值堆叠(但从底部到顶部):
    .flex-container {
       display: flex;
       flex-direction: column-reverse;
     }
    
    尝试一下
    row值水平堆放(左到右):
    .flex-container {
       display: flex;
       flex-direction: row;
     }
    
    尝试一下
    row-reverse值水平堆放(但从右到左):
    .flex-container {
       display: flex;
       flex-direction: row-reverse;
     }
    
    尝试一下
  • flex-wrap属性

    flex-wrap属性指定flex项是否应该换行。下面的示例有12个fiex项目,以更好地展示flex-wrap属性。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    上面的元素表示一个包含三个flex项目的flex容器(蓝色区域)。 如果有必要使用wrap值:
    .flex-container {
       display: flex;
       flex-wrap: wrap;
     }
    
    尝试一下
    nowrap值指定Flex项目将不会换行(这是默认值):
    .flex-container {
       display: flex;
       flex-wrap: nowrap;
     }
    
    尝试一下
    wrap-reverse值将flex项目倒置:
    .flex-container {
       display: flex;
       flex-wrap: wrap-reverse;
     }
    
    尝试一下
  • flex-flow属性

    flex-flow属性是用于设置flex-directionflex-wrap属性的简写属性。
    .flex-container {
       display: flex;
       flex-flow: row wrap;
     }
    
    尝试一下
  • justify-content属性

    justify-content属性用于对齐flex项:
    1
    2
    3
    center值中心对齐:
    .flex-container {
       display: flex;
       justify-content: center;
     }
    
    尝试一下
    flex-start值从开始对齐:
    .flex-container {
       display: flex;
       justify-content: flex-start;
     }
    
    尝试一下
    flex-end值在末端对齐:
    .flex-container {
       display: flex;
       justify-content: flex-end;
     }
    
    尝试一下
    space-around值对齐:
    .flex-container {
       display: flex;
       justify-content: space-around;
     }
    
    尝试一下
    space-between值对齐:
    .flex-container {
       display: flex;
       justify-content: space-between;
     }
    
    尝试一下
  • align-items属性

    align-items属性用于垂直对齐Flex项。
    .flex-container {
       display: flex;
       height: 200px;
       align-items: center;
     }
    
    尝试一下
    align-items: flex-start值从顶部对齐:
    .flex-container {
       display: flex;
       height: 200px;
       align-items: flex-start;
     }
    
    尝试一下
    align-items: flex-end;值在尾部对齐:
    .flex-container {
       display: flex;
       height: 200px;
       align-items: flex-end;
     }
    
    尝试一下
    align-items: stretch;值对齐:
    .flex-container {
       display: flex;
       height: 200px;
       align-items: stretch;
     }
    
    尝试一下
    align-items: baseline;值对齐: 注意:该示例使用不同的font-size来演示项目是否通过文本基线对齐:
    .flex-container {
       display: flex;
       height: 200px;
       align-items: baseline;
     }
    
    尝试一下
  • align-content属性

    align-content属性用于对齐柔性线。 align-content: space-between;值:
    .flex-container {
       display: flex;
       height: 600px;
       flex-wrap: wrap;
       align-content: space-between;
     }
    
    尝试一下
    align-content: space-around;值:
    .flex-container {
       display: flex;
       height: 600px;
       flex-wrap: wrap;
       align-content: space-around;
     }
    
    尝试一下
    align-content: stretch;值:
    .flex-container {
       display: flex;
       height: 600px;
       flex-wrap: wrap;
       align-content: stretch;
     }
    
    尝试一下
    align-content: center;值对齐:
    .flex-container {
       display: flex;
       height: 600px;
       flex-wrap: wrap;
       align-content: center;
     }
    
    尝试一下
    align-content: flex-start;值对齐:
    .flex-container {
       display: flex;
       height: 600px;
       flex-wrap: wrap;
       align-content: flex-start;
     }
    
    尝试一下
    align-content: flex-end;值对齐:
    .flex-container {
       display: flex;
       height: 600px;
       flex-wrap: wrap;
       align-content: flex-end;
     }
    
    尝试一下
  • 完美居中

    在下面的例子中,我们将解决一个非常常见的样式问题:完美居中。 解决方案:将justify-content和align-items属性设置为居中,flex项目将完美居中:
    .flex-container {
       display: flex;
       height: 300px;
       justify-content: center;
       align-items: center;
     }
    
    尝试一下
  • 子元素(item)

    Flex容器的直接子元素自动变为(flex)项。
    <div class="flex-container">
       <div>1</div>
       <div>2</div>
       <div>3</div>
       <div>4</div>
     </div>
    
    尝试一下
    flex项属性有:
    • order
    • flex-grow
    • flex-shrink
    • flex-basis
    • flex
    • align-self
  • order属性

    order属性指定flex item的顺序。 代码中的第一个flex项不必显示为布局中的第一个项。order值必须是数字,默认值为0。
    <div class="flex-container">
       <div style="order: 3">1</div>
       <div style="order: 2">2</div>
       <div style="order: 4">3</div>
       <div style="order: 1">4</div>
     </div>
    
    尝试一下
  • flex-grow属性

    flex-grow属性指定弹性项目相对于其他弹性项目的增长量。 该值必须是数字,默认值为0。
    <div class="flex-container">
       <div style="flex-grow: 1">1</div>
       <div style="flex-grow: 1">2</div>
       <div style="flex-grow: 8">3</div>
     </div>
    
    尝试一下
  • flex-shrink属性

    flex-shrink属性指定Flex项目相对于其他Flex项目收缩的程度。
    <div class="flex-container">
       <div>1</div>
       <div>2</div>
       <div style="flex-shrink: 0">3</div>
       <div>4</div>
       <div>5</div>
       <div>6</div>
       <div>7</div>
       <div>8</div>
       <div>9</div>
       <div>10</div>
     </div>
    
    尝试一下
  • flex-basis属性

    flex-basis属性指定弹性项的初始长度。
    <div class="flex-container">
       <div>1</div>
       <div>2</div>
       <div style="flex-basis: 200px">3</div>
       <div>4</div>
     </div>
    
    尝试一下
  • flex属性

    flex属性是flex-growflex-shrinkflex-basis属性的速记属性。
    <div class="flex-container">
       <div>1</div>
       <div>2</div>
       <div style="flex: 0 0 200px">3</div>
       <div>4</div>
     </div>
    
    尝试一下
  • align-self属性

    align-self属性指定灵活容器内所选项的对齐方式。align-self属性将覆盖容器align-items属性设置的默认对齐方式。
    <div class="flex-container">
       <div>1</div>
       <div>2</div>
       <div style="align-self: center">3</div>
       <div>4</div>
     </div>
    
    尝试一下
    <div class="flex-container">
       <div>1</div>
       <div style="align-self: flex-start">2</div>
       <div style="align-self: flex-end">3</div>
       <div>4</div>
     </div>
    
    尝试一下
  • flex应用场景

    使用Flex Box制作响应式网站和图库非常方便
  • CSS Flexbox属性

    下表列出了flexbox使用的CSS属性:
    属性 描述
    display 指定用于HTML元素的框的类型
    flex-direction 指定flex容器中可伸缩项目的方向
    justify-content 当项目不使用主轴上的所有可用空间时,水平对齐flex项目
    align-items 当项目不使用横轴上的所有可用空间时,垂直对齐flex项目
    flex-wrap 指定是否应该包装flex项(如果在一行上没有足够的空间容纳它们)
    align-content 修改flex-wrap属性的行为。它类似于对齐项,但是它不是对齐flex项,而是对齐flex行
    flex-flow flex-direction和flex-wrap的简写属性
    order 指定一个flex项相对于同一容器内其他flex项的顺序
    align-self 用于flex项目。覆盖容器的align-items属性
    flex flex-growth、flex-shrink和flex-base属性的简写属性