《Flexbox详解》笔记

Posted 2020-06-25

　　文章地址：Flexbox详解

　属性摘抄：

　　　　flex container :

• display: other values | flex | inline-flex;
• flex-direction: row | row-reverse | column | column-reverse; 主要用来创建主轴，从而定义了伸缩项目放置在伸缩容器的方向。
• flex-wrap: nowrap | wrap | wrap-reverse; 主要用来定义伸缩容器里是单行还是多行显示，侧轴的方向决定了新行堆放的方向。
• flex-flow: <‘flex-direction’> || <‘flex-wrap’>; 这个是“flex-direction”和“flex-wrap”属性的缩写版本。同时定义了伸缩容器的主轴和侧轴。其默认值为“row nowrap”。
• justify-content: flex-start | flex-end | center | space-between | space-around; 这个是用来定义伸缩项目沿着主轴线的对齐方式。当一行上的所有伸缩项目都不能伸缩或可伸缩但是已经达到其最大长度时，这一属性才会对多余的空间进行分配。当项目溢出某一行时，这一属性也会在项目的对齐上施加一些控制。
• align-content: flex-start | flex-end | center | space-between | space-around | stretch; 这个属性主要用来调准伸缩行在伸缩容器里的对齐方式。类似于伸缩项目在主轴上使用“justify-content”一样。
• align-items: flex-start | flex-end | center | baseline | stretch; 伸缩项目在沿着侧轴线的对齐方式。

　　　　flex items :

• order: <integer>; 默认情况下（都为0），伸缩项目是按照文档流出现先后顺序排列。然而，“order”属性可以控制伸缩项目在他们的伸缩容器出现的顺序。
• align-self: auto | flex-start | flex-end | center | baseline | stretch; 用来在单独的伸缩项目上覆写默认的对齐方式。
• flex-grow: <number>; / default 0 / 根据需要用来定义伸缩项目的扩展能力。它接受一个不带单位的值做为一个比例。主要用来决定伸缩容器剩余空间按比例应扩展多少空间。
• flex-shrink: <number>; / default 1 / 根据需要用来定义伸缩项目收缩的能力。[注意：负值同样生效。]
• flex-basis: <length> | auto; / default auto / 这个用来设置伸缩基准值，剩余的空间按比率进行伸缩。
• flex: none | [ <‘flex-grow‘> <‘flex-shrink‘>? || <‘flex-basis‘> ] 这是“flex-grow”、“flex-shrink”和“flex-basis”三个属性的缩写。其中第二个和第三个参数（flex-shrink、flex-basis）是可选参数。默认值为“0 1 auto”。

　几个属性运用的例子：

　　基本的html结构：

<div class="container">
    <div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<!-- 重复多个 -->

　　基本的css样式：

  div { padding: 10px 20px; margin: 10px; border-radius: 10px; font-size: 2em; }

  .container { background: #eee; float: left; }
  .container div { background: #ccc; color: #fff; }

　　flex-flow:

  .container { display: flex; flex-flow: row wrap; width: 200px; }

  .container:nth-child(2) { flex-flow: row wrap-reverse; }
  .container:nth-child(3) { flex-flow: row-reverse wrap; }
  .container:nth-child(4) { flex-flow: row-reverse wrap-reverse; }

　　align-content:

  .container { display: flex; flex-flow: row wrap; width: 200px; height: 300px; }

  .container:nth-child(1) { align-content: flex-start; }
  .container:nth-child(2) { align-content: center; }
  .container:nth-child(3) { align-content: flex-end; }
  .container:nth-child(4) { align-content: stretch; }
  .container:nth-child(5) { align-content: space-around; }
  .container:nth-child(6) { align-content: space-between; }

　　align-items:

  .container { display: flex; flex-flow: row wrap; height: 300px; }

  .container:nth-child(1) { align-items: flex-start; }
  .container:nth-child(2) { align-items: flex-end; }
  .container:nth-child(3) { align-items: stretch; }
  .container:nth-child(4) { align-items: center; }
  .container:nth-child(5) { align-items: baseline; }

  .container div:nth-child(1) { line-height: 50px; }
  .container div:nth-child(2) { line-height: 100px; }
  .container div:nth-child(3) { line-height: 150px; }
  .container div:nth-child(4) { line-height: 200px; }

　　flex-grow:

  .container { display: flex; width: 60%; }

  .container div:nth-child(2) { flex-grow: 2; }

  .container:nth-child(2) div:nth-child(1) { flex-grow: 1; }

　　flex-shrink:

  .container { float: none; display: flex; width: 1000px; }
  .container div { width: 400px; text-align: center; }

  .container div:nth-child(2) { flex-shrink: 2; }
  .container:nth-child(1) div:nth-child(1) { flex-shrink: 0; }
  .container:nth-child(3) { width: 300px; } /* 超过项目收缩能力 */

　　flex-basis:

　　　　html:

<div class="container">
    <div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="container">
    <div>1</div><div>2</div><div>33333333</div><div>4</div>
</div>
<div class="container">
    <div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="container">
    <div>1</div><div>2</div><div>33333333</div><div>4</div>
</div>

　　　　css:

  .container { float: none; display: flex; width: 1000px; }
  .container div { flex-grow: 1; text-align: center; }
  .container div:nth-child(3) { flex-grow: 2; }

  .container:nth-child(3) div, .container:nth-child(4) div { flex-basis: 0; }