CSS布局 | Flexbox的理解与使用

导读：容器属性有：display,flex-direcction,flex-wrap,flex-flow(flex-direction和flex-wrap属性的简写),justify-content,align-items,align-content;子项属性：order,flex-grow,flex-shrink,flex-basis,flex(flex-grow,flex-shrink,flex-basis的简写),align-self

原文链接：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

---

背景

弹性盒模型意在提供一种更有效的方式来布局、排列和分配容器中的子项，即使这些子项是动态的且大小是未知的。
flex布局的核心思想是让容器可以改变其子项的宽度、高度和顺序以便更好地填充可用空间（主要是为了更好地适应各种显示设备和屏幕大小）。一个flex容器扩展其子项来填充可用的空闲空间，或者防止溢出而缩小它们。
更重要的是，flexbox布局与常规布局不同，它是与方向无关的。虽然这些都适用于页面，但是它们缺乏灵活性支持大型或者更复杂的应用程序，特别是涉及到改变方向，改变大小、拉伸和收缩等。
注：flexbox布局最适合用在APP的组件和小规模布局，而grid布局适合大规模布局。

---

基础术语

flexbox是一个完整的模型，不是一个单独的属性，它包含了很多东西包括其全部属性。这些属性其中一部分是要在容器上设置的（父元素，叫”flex 容器”），其他的则在子项上设置（叫”flex 子项”）。
如果说常规布局是基于块和内联流方向，那么flex布局就是基于弹性流方向。请看下面这个解释flex布局主要思想的图

这些子项会沿着主轴或者横轴的方向布局。

• main axis 主轴-主轴是flex容器主要的轴，flex的项目沿着主轴布局。要注意的是，主轴并非一定是水平方向的，主轴的方向取决于flex-direction属性（见下文）。
• main-start | main-end -在容器中的flex项目，沿着主轴开始的位置到结束位置放置。
• main size -一个flex项目的宽度和高度，无论这个项目是否在主维度上，都是这个项目的主要尺寸。flex项目的主尺寸属性是“宽度”还是“高度”，两者都是主要尺寸。
• cross axis 横轴-垂直于主轴的轴叫横轴，横轴的方向取决于主轴的方向
• cross-start | cross-end -flex行被项目填充着，这些放置在容器中的项目从交叉轴的开始位置沿着交叉轴终点放置

• cross size -无论是都在交叉轴维度，flex项目的宽度和高度，都是这个项目的横向尺寸。这个横向尺寸属性是交叉维度中的宽度或高度。

  ---

  属性

  flex container:容器属性

display -这定义了一个flex容器，内敛还是块取决于给定的值。它为所有直接孩子元素提供了一个flex上下文。

display:flex;/* or inline-flex */

需要注意的是，CSS的列对于flex容器无效。

flex-direction -设立主轴，因此定义flex项目放置在flex容器里的方向。
flexbox是一个单向布局概念。可以把flex项目看做放置在水平行或垂直列。

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

• row (default):在ltr（ 代表左到右的排列方式 ）方式下从左到右；在rtl方式下从右到左
• row-reverse:在ltr（ 代表左到右的排列方式 ）方式从右到左；在rtl方式 从左到右
• column: 跟行类似，但从上到下
• column-reverse:跟 row-reverse类似，但从下到上

flex-wrap -默认情况下，flex项目都会挤在同一行上。你可以通过这个属性改变它，允许项目多行排列

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

• nowrap (default):所有的flex项目都会在同一行
• wrap:从上到下，多行排列
• wrap-reverse:从下到上，多行排列
  这里有些 flex-wrap的demo

flex-flow -这是flex-direction和flex-wrap属性的简写，可以定义flex容器的主轴和交叉轴。默认属性值是row nowrap

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

justify-content - 这定义了主轴的对齐方式。这有助于分配额外剩余的空闲空间，一行上flex项目是非弹性或者是弹性但达到他们最大尺寸时。当它们溢出线时，它还是可以控制项目的对齐方式。

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

• flex-start (default):项目从（父容器）始端开始排列
• flex-end:项目从（父容器）始端开始排列
• center:项目放置在中间
• space-between:项目均匀地分布在行上，第一个项目在起点线，最后一个项目在终点线。
• space-around:项目均匀地分布在行上，且项目两侧有相等的空想。需要注意的是，视图上看起来不是均等，所有的项目都有一个一样的空间在两侧。第一个项目和容器边缘间有一个单位的间距，但是项目与项目之间有两个单位的间距。
• space-evenly:边缘与项目、项目与项目之间的间距都相等。

align-items -这定义了flex项目在当前行的交叉轴中如何布局的默认行为。可以把这看做是对于交叉轴对齐的justify-content属性

• flex-start:在交叉轴的起点线外边缘的项目开始于交叉轴的起点线
• flex-end:在交叉轴的终点线外边缘的项目开始于交叉轴的终点线
• center:项目在交叉轴的中心线行
• baseline:项目以基线对齐
• stretch:拉伸至填满整个容器

align-content -当过交叉轴有额外的空间，对齐flex容器行，就像justify-content在主轴上对齐每个项目。
需要注意的是当flex项目只有一行时，这个属性无效

• flex-start:行在容器的始端开始排列
• flex-end:行在容器的末端开始排列
• center:行排列在容器的中部
• space-between:每一行都均匀分配，第一行在容器的始端和最后一行在容器的末端
• space-around:每一行都均匀分配

• stretch (default):行拉伸至占满容器剩余的空间。

  flex items:子项属性

  order-默认的，flex的项目都会按顺序排列。但是，order这个属性可以定义它们在容器中出现的顺序。数值越小，排得越前，默认为0.
  
  flex-grow-这定义了flex项目的放大比例，参数为一个无单位数值。如果所有项目的flex-grow都设为1，容器的剩余空间将平均分配给每个flex项目。如果其中一个项目设为2，那么该项目所占空间比例就是其他项目的2倍。负数无效。
  
  flex-shrink-这定义了flex项目的缩小比例。负数无效。
  flex-basis-这定义了在分配剩余空间之前的默认大小。它可以是一个长度或一个关键字。
  auto：占据的主轴空间
  content：依照项目内容分配大小，这个关键字没有得到很好的支持，所以很难测试和很难了解max-content,min-content和fit-content这些属性。
  如果设为0，则不考虑内容周围的额外空间；如果设为auto，剩余的空间则基于flex-grow的值分配。
  
  flex-flex是flex-grow,flex-shrink和flex-basis的简写，第二个和第三个属性是可选的，默认值为 0 1 auto 。
  推荐用简写的属性，浏览器会推算相关值。
  align-self-允许对单个flex项目覆盖，可以参照 align-items 的参数。
  需要注意的是，float,clear和vertical-align对flex项目无效。
  

---

栗子

<!- -html -->
<ul class="flex-container">
    <li class="flex-item">1li>
    <li class="flex-item">2li>
    <li class="flex-item">3li>
    <li class="flex-item">4li>
    <li class="flex-item">5li>
    <li class="flex-item">6li>
ul>

    .flex-container {
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex;
        -webkit-flex-flow: row wrap;
        justify-content: space-around;
    }

    .flex-item {
        background: tomato;
        padding: 5px;
        width: 200px;
        height: 150px;
        margin-top: 10px;

        line-height: 150px;
        color: white;
        font-weight: bold;
        font-size: 3em;
        text-align: center;
    }

效果图：

效果图flex项目的排列会随屏幕的宽度变化而变化。

第一次翻译文章，如果有误，欢迎指出，谢谢支持~