CSS Flexbox

flex box各种属性总结

如果不想详细看各种例子可以直接看这篇：css flex容器属性总结

使用显示：可弯曲以定位两个框

使用交替的质询样式来展示如何使用CSS灵活地定位元素。

将CSS属性display: flex;放在元素上可让您使用其他flex属性来构建响应页面。

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

  #box-container {
    height: 500px;
    display:flex;
  }

使用flex-direction属性创建一行

添加display: flex到元素会将其变成flex容器。这样就可以将该元素的所有子元素对齐到行或列中。您可以通过将flex-direction属性添加到父项并将其设置为行或列来完成此操作。创建一行将使子代水平对齐，创建一列将使子代垂直对齐。

其他选项flex-direction是row-reverse和column-reverse。

注意：该flex-direction属性的默认值为row。

  #box-container {
    display: flex;
    height: 500px;
    flex-direction:row-reverse;
  }

• 将flex-direction属性应用于在Tweet嵌入中创建行

  footer {
    display: flex;
    flex-direction:row;
  }

• 使用flex-direction属性创建列

  #box-container {
    display: flex;
    height: 500px;
    flex-direction:column;
  }

使用justify-content属性对齐元素

有时，伸缩容器中的伸缩项不会填充容器中的所有空间。通常要告诉CSS如何以某种方式对齐和间隔flex项目。幸运的是，该justify-content属性有几个选项可以执行此操作。但是首先，在审查这些选项之前，需要了解一些重要的术语。

这是有用的图像，其中显示了一行以说明以下概念。

回想一下，将flex容器设置为一行，将flex项从左到右并排放置。设置为列的伸缩容器将伸缩项目从上到下垂直放置。对于每种挠性物品的排列方向称为主轴。对于一行，这是一条横穿每一项的水平线。对于一列，主轴是穿过项目的垂直线。

关于如何沿作为主轴线的行间隔弹性项目，有几种选择。最常用的一种是justify-content: center，它将所有flex项目与flex容器内的中心对齐。其他选项包括：

• flex-start：将项目与flex容器的开头对齐。对于一行，这会将项目推到容器的左侧。对于列，这会将项目推到容器的顶部。如果未justify-content指定，则这是默认对齐方式。
• flex-end：将项目与flex容器的末端对齐。对于一行，这会将项目推到容器的右侧。对于列，这会将项目推到容器的底部。
• space-between：将项目与主轴中心对齐，在项目之间放置额外的空间。第一个和最后一个项目被推到flex容器的最边缘。例如，连续将第一个项目靠在容器的左侧，最后一个项目靠在容器的右侧，然后将剩余空间平均分配到其他项目中。
• space-around：类似于space-between但第一个和最后一个项目未锁定到容器的边缘，该空间分布在所有项目周围，在flex容器的两端各占一半的空间。
• space-evenly：在flex项之间平均分配空间，在flex容器的任一端都有一个完整的空间

一个示例有助于说明此属性的作用。将CSS属性添加justify-content到#box-container元素，并为其赋予值center。

  #box-container {
    background: gray;
    display: flex;
    height: 500px;
    justify-content:center;
  }

使用align-items属性对齐元素

该align-items属性类似于justify-content。回想一下，该justify-content属性使弹性项沿主轴对齐。对于行，主轴是一条水平线，对于列，主轴是一条垂直线。

柔性容器还具有与主轴相反的横轴。对于行，交叉轴是垂直的，对于列，交叉轴是水平的。

CSS提供了align-items使弹性项目沿交叉轴对齐的属性。对于一行，它告诉CSS如何在容器内上下推整行中的项目。对于列，如何在容器内向左或向右推动所有项目。

可用的不同值align-items包括：

• flex-start：将项目与flex容器的开头对齐。对于行，这会将项目与容器的顶部对齐。对于列，这会将项目对齐到容器的左侧。
• flex-end：将项目与flex容器的末端对齐。对于行，这会将项目与容器的底部对齐。对于列，这使项目在容器的右侧对齐。
• center：将项目与中心对齐。对于行，这将垂直对齐项目（项目上方和下方的等距空间）。对于列，这将使它们水平对齐（项目左右两边的间距相等）。
• stretch：拉伸物品以填充弹性容器。例如，行项目被拉伸以从上到下填充flex容器。如果未align-items指定任何值，则为默认值。
• baseline：将项目与其基准对齐。基线是一个文本概念，可将其视为字母所在的行。

使用flex-wrap属性包装行或列

CSS flexbox具有一项功能，可将弹性项目拆分为多行（或多列）。默认情况下，弹性容器会将所有弹性项目放在一起。例如，一行将全部在一行上。

但是，使用该flex-wrap属性会告诉CSS包装项目。这意味着多余的项目会移到新的行或列中。包装发生的断点取决于物品的大小和容器的大小。

CSS还提供了环绕方向的选项：

• nowrap：这是默认设置，不包装项目。
• wrap：如果项目是连续的，则从左到右包装，如果是一列，则是从上到下。
• wrap-reverse：如果项目是连续的，则从右到左包装，如果是一列，则是从下到上。

当前布局的一行有太多的框。将CSS属性添加flex-wrap到#box-container元素，并为其赋予值wrap。

  #box-container {
    background: gray;
    display: flex;
    height: 100%;
    flex-wrap:wrap;
  }

使用flex-shrink属性缩小项目

到目前为止，所有属性都适用于flex容器（flex项的父项）。但是，弹性项目有几个有用的属性。

首先是flex-shrink。使用时，如果flex容器太小，则允许项目收缩。当父容器的宽度小于其内所有flex项的组合宽度时，项会收缩。
该flex-shrink属性将数字作为值。与容器中的其他项目相比，**数字越大，收缩幅度越大**。例如，如果一个项目的flex-shrink值为1而另一个项目的flex-shrink值为3，则值为3`的项目将缩小为另一个项目的三倍。

将CSS属性添加flex-shrink到#box-1和#box-2中。给出#box-1的值1和#box-2的值2。

<style>
  #box-container {
    display: flex;
    height: 500px;
  }
  #box-1 {
    background-color: dodgerblue;
     100%;
    height: 200px;
    flex-shrink:1;
  }

  #box-2 {
    background-color: orangered;
     100%;
    height: 200px;
    flex-shrink:2;
  }
</style>

使用flex-grow属性扩展项目

flex-shrink相反的是flex-grow。记得flex-shrink在容器收缩时控制项目的大小。flex-grow当父容器展开时，该属性控制项目的大小。

使用上一个挑战中的类似示例，如果一项flex-grow值为1，而另一项flex-grow值为3，则值为3将增长为另一项的三倍。

<style>
  #box-container {
    display: flex;
    height: 500px;
  }

  #box-1 {
    background-color: dodgerblue;
    height: 200px;
    flex-grow:1;
  }

  #box-2 {
    background-color: orangered;
    height: 200px;
    flex-grow:2;
  }
</style>

使用flex-basis属性设置项目的初始大小

该flex-basis属性指定CSS之前用flex-shrink或调整项目的初始大小flex-grow。

由使用的单位flex-basis属性是相同的其他尺寸特性（px，em，%等等）。该值auto根据内容确定项目的大小。

使用设置盒子的初始尺寸flex-basis。将CSS属性添加flex-basis到#box-1和#box-2中。给出#box-1的值10em和#box-2的值20em。

<style>
  #box-container {
    display: flex;
    height: 500px;
  }

  #box-1 {
    background-color: dodgerblue;
    height: 200px;
    flex-basis:10em;
  }

  #box-2 {
    background-color: orangered;
    height: 200px;
    flex-basis:20em;
  }
</style>

使用flex速记属性

有一个快捷方式可用于一次设置多个flex属性的flex-grow，flex-shrink和flex-basis特性都可以通过设置共同flex财产。

例如，flex: 1 0 10px;将设置项flex-grow: 1，flex-shrink: 0和flex-basis: 10px。

默认属性设置为flex: 0 1 auto。

使用order属性重新排列项目

该order属性用于告知CSS弹性项目在flex容器中的显示顺序。默认情况下，项目将以与它们在源HTML中相同的顺序出现。该属性将数字作为值，并且可以使用负数。

将CSS属性添加order到#box-1和中#box-2。给出#box-1一个值，2给出#box-2一个值1。

<style>
  #box-container {
    display: flex;
    height: 500px;
  }
  #box-1 {
    background-color: dodgerblue;
    order:2;
    height: 200px;
     200px;
  }

  #box-2 {
    background-color: orangered;
    order:1;
    height: 200px;
     200px;
  }
</style>

使用align-self属性

弹性商品的最终属性为align-self。此属性使您可以单独调整每个项目的对齐方式，而不必一次全部设置它们。因为使用其他常用的调节技术的CSS属性。这是有用的float，clear和vertical-align不同的值。

align-self接受与align-items该align-items属性相同的值，并将覆盖该属性设置的任何值。