CSSFlex布局

为了创建 flex 容器,我们把一个容器的 display 属性值改为 flex 或者 inline-flex.
完成这一步之后,容器中的直系子元素就会变为 flex 元素.

flex 容器中的所有 flex 元素都会有下列行为
- 元素排列为一行(flex-direction 属性的初始值是 row)
- 元素从主轴的起始线开始
- flex-basis 属性为 auto
- flex-wrap 属性为 nowrap
这会让你的元素呈线形排列,如果有太多元素超出容器,它们会溢出而不会换行.

flex容器上的属性

`flex-direction`
主轴由flex-direction定义
在 flex 容器中添加 flex-direction 属性可以让我们更改 flex 元素的排列方向

`flex-wrap`
为了实现多行效果,请为属性flex-wrap添加一个属性值wrap.现在,如果您的项目太大而无法全部显示在一行中,则会换行显示.
对于flex容器,项目的子元素总宽度大于容器最大宽度.由于flex-wrap的值设置为wrap,所以项目的子元素换行显示.
若将其设置为nowrap,这也是初始值
它们将会缩小以适应容器,因为它们使用的是允许缩小的初始Flexbox值.
如果项目的子元素无法缩小,使用nowrap会导致溢出,或者缩小程度还不够小.

`flex-flow`
你可以将两个属性flex-direction和flex-wrap组合为简写属性flex-flow.
第一个指定的值为 flex-direction, 第二个指定的值为 flex-wrap.

`align-items`
使元素在交叉轴方向对齐
这个属性的初始值为stretch,这就是为什么flex元素会默认被拉伸到最高元素的高度.
实际上,它们被拉伸来填满 flex 容器 —— 最高的元素定义了容器的高度.
你也可以设置align-items的值为flex-start,使flex元素按flex容器的顶部对齐.

`justify-content`
justify-content属性用来使元素在主轴方向上对齐,初始值是flex-start,元素从容器的起始线排列.
space-between,把元素排列好之后的剩余空间拿出来，平均分配到元素之间,两端顶格.
space-around,两端留出距离.

flex元素上的属性

`flex-grow`
赋值为正数的话是让元素增加所占空间.
flex-grow若被赋值为一个正整数,flex元素会以flex-basis为基础,沿主轴方向增长尺寸.
这会使该元素延展,并占据此方向轴上的可用空间(available space).
如果有其他元素也被允许延展,那么他们会各自占据可用空间的一部分.
如果我们给上例中的所有元素设定flex-grow值为1,容器中的可用空间会被这些元素平分.它们会延展以填满容器主轴方向上的空间.
flex-grow属性可以按比例分配空间.如果第一个元素flex-grow值为2,其他元素值为1,则第一个
元素将占有2/4(上例中,即为200px中的100px),另外两个元素各占有1/4(各50px).

`flex-shrink`
正数可以让它缩小所占空间,但是只有在flex元素总和超出主轴才会生效.
flex-grow属性是处理flex元素在主轴上增加空间的问题,相反flex-shrink属性是处理flex元素收缩的问题.
如果我们的容器中没有足够排列flex元素的空间,那么可以把flex元素flex-shrink属性设置为正整数来缩小它所占空间到flex-basis以下.
给flex-shrink属性赋予更大的数值可以比赋予小数值的同级元素收缩程度更大.

`flex-basis`
flex-basis 定义了该元素的空间大小,该属性的默认值是 auto.
所有元素都设定了宽度(width)为100px, 所以flex-basis的值为100px.
如果没有给元素设定尺寸, flex-basis的值采用元素内容的尺寸.
flex元素是在这个基准值的基础上缩放的。

你可能很少看到flex-grow,flex-shrink,和flex-basis属性单独使用,而是混合着写在flex简写形式中.
Flex简写形式允许你把三个数值按这个顺序书写— flex-grow, flex-shrink, flex-basis.

flex: 1 实际是 flex: 1 1 0
flex: 2 实际是 flex: 2 1 0

可用空间

假设在1个500px的容器中，我们有3个100px宽的元素，那么这3个元素需要占300px的宽，剩下 200px 的可用空间。
在默认情况下，flexbox 的行为会把这200px的空间留在最后一个元素的后面。

如果期望这些元素能自动地扩展去填充满剩下的空间，那么我们需要去控制可用空间在这几个元素间如何分配，这就是元素上的那些flex属性要做的事。

Example

	.box {
	  display: flex;
	}
	<div class="box">
	  <div>One</div>
	  <div>Two</div>
	  <div>Three
	      <br>has
	      <br>extra
	      <br>text
	  </div>
	</div>

        .box {
          display: flex;
        }
        <div class="box">
          <div style="flex-grow:1">One</div>
          <div style="flex-grow:1">Two</div>
          <div>Three
              <br>has
              <br>extra
              <br>text
          </div>
        </div>

        .box {
          display: flex;
        }
        <div class="box">
          <div style="flex-grow:1">One</div>
          <div>Two</div>
          <div>Three
              <br>has
              <br>extra
              <br>text
          </div>
        </div>

      .box {
	    display: flex;
	    flex-wrap: wrap;
    }
    <div class="box">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
    </div>

      .box {
        display: flex;
        flex-flow: row wrap;
      }
      <div class="box">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
      </div>

当元素的高度和(宽度和)大于容器的高度(宽度)时,元素的高度(宽度)会被压缩,如果不想被压缩,元素添加属性 flex-shrink: 0;

     .wrapper{
         width: 500px;
         margin: 30px auto;
         /* 控制子级元素纵排,水平居中 */
         display: flex;
         flex-direction: column;
         align-items: center;
     }
    <div class="wrapper">
        <h2>课程管理系统</h2>
        <div>
            <form action="/common/login" method="post">
                <div style="margin-bottom: 15px">
                    <label for="sa">账号: </label><input type="text" name="username" id="sa">
                </div>
                <div style="margin-bottom: 15px">
                    <label for="sb">密码: </label><input type="password" name="password" id="sb">
                </div>
                <div>
                    <input type="submit" class="submit" value="登录">
                </div>
            </form>
        </div>
    </div>

flex布局防止被挤压
align-items失效
js 时间格式转换
date.getFullYear is not a function
flex布局的基本概念