flex简介及其常见布局方式

flex

简介

• 为元素设置display: flex或者 display: inline-flex
  该元素即成为伸缩容器（flex container），
• 设置为flex ，该元素会独占一行
• 设置为 inline-flex，可以与其他 inline 元素在同一行。
• 此时伸缩容器的子元素自动升级为伸缩项目（flex item），伸缩项目的的特点如下，
  • 伸缩项目默认在一行排列。
  • 自动升级为块元素。
  • 所有伸缩项目默认在主轴的 start 处排列。
  • 伸缩项目也可以再次设置为flex，即flex可以互相嵌套。
• inline-flex 行内对齐特点
  • 伸缩容器中有文本内容，基于第一个文本的基线对齐.
  • 伸缩容器中没有有文本内容，也没有子元素，伸缩容器底边位于一行的基线处。
  • 伸缩容器中没有有文本内容，第一个子元素没有，第一个元素底边位于一行的基线处。

伸缩容器有足够空间伸缩项目排列

• 当伸缩容器主轴方向上有“足够空间”时
  • justify-content: flex-start; 项目位于容器的开头 （默认值）
  • justify-content: flex-end; 项目位于容器的结尾
  • justify-content: center; 项目位于容器的中心
  • justify-content: space-between; 项目沿着伸缩容器的主轴均匀分布
  • justify-content: space-around; 项目沿着伸缩容器的主轴均匀分布，但是剩余空间会包裹着每个伸缩项目
• 当伸缩容器侧轴有“足够空间”时
  • align-items: stretch; 每个伸缩项目会沿侧轴被拉伸。（默认值）
  • align-items: center; 所有伸缩项目位于伸缩容器侧轴中部
  • align-items: flex-start; 所有伸缩项目位于伸缩容器侧轴start处
  • align-items: flex-end; 所有伸缩项目位于伸缩容器侧轴end处
  • align-items: baseline; 主轴中伸缩项目基线最大的那个伸缩项目的基线作为所有伸缩项目的对齐基线

伸缩容器空间不足（flex-wrap: 属性规定灵活项目是否拆行或拆列）

• 当设置伸缩项目大小，且伸缩容器无法在主轴方向上容纳所有的伸缩项目时
  • flex-wrap: nowrap; 每个伸缩项目都会被按比例被压缩（默认值）
  • flex-wrap: wrap; 让伸缩项目自动换行，保持原来的大小，且排列方向为从上往下，从左往右排列（flex-start方向开始）
  • flex-wrap: wrap-reverse; 让伸缩项目自动换行，保持原来的大小，且排列方向为从下往上，从左往右排列（flex-end方向开始）

主轴及侧轴相关设置

• 主轴方向（flex-direction: 属性规定灵活项目的方向）
  • flex-direction: row; 水平从左到右（默认值）
  • flex-direction: row-reverse; 水平从右到左
  • flex-direction: column; 竖直从上到下
  • flex-direction: column -reverse; 竖直从下到上
• 可以设置 flex-flow 来实现 flex-direction 和 flex-wrap 简写
  • flex-direction: 属性用于设置或检索弹性盒模型对象的子元素排列方式
  • 如：flex-flow: column wrap; 竖直从上往下排列，自动换行
• 当伸缩容器在主轴上没有足够的空间容纳所有的伸缩项目，伸缩容器设置了flex-wrap: wrap ,并且伸缩项目没有设置大小，完全由内容“撑起”
  • 如果设置align-content: stretch ，则各行将会伸展以占用剩余的空间（默认值）
  • 如果设置 align-content: flex-start，则各行向弹性盒容器的起始位置堆叠
  • 如果设置 align-content: flex-end，则各行向弹性盒容器的结束位置堆叠
  • 如果设置 align-content: center，则各行向弹性盒容器的中间位置堆叠
  • 如果设置 align-content: space-between，则各行在弹性盒容器中平均分布
  • 如果设置 align-content: space-around，则各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半

伸缩项目在侧轴排列

• 当伸缩容器足够大时，可以分别设置每个伸缩项目在伸缩容器侧轴的位置
  • align-self: auto;元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”（默认值）
  • align-self: stretch;元素被拉伸以适应容器
  • align-self: center; 元素位于容器的中心
  • align-self: flex-start; 元素位于容器的开头
  • align-self: flex-end;元素位于容器的结尾
  • align-self: baseline; 元素位于容器的基线上,如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐

伸缩项目在主轴排列

• order 属性 设置或检索弹性盒模型对象的子元素出现的順序。默认值为 0
• 当伸缩容器足够大时，可以分别设置每个伸缩项目在伸缩容器主轴的位置，例如为item1设置了
  order: 1;
• 当伸缩容器足够大时，可以分别设置每个伸缩项目在伸缩容器主轴的位置，例如为item1，item2分别设置
  order: 2;
order: 1;

伸缩项目分配主轴剩余空间（flex-grow）

• flex-grow：定义项目的的放大比例；
  • ​ 默认为0，即 即使存在剩余空间，也不会放大；
  • ​ 所有项目的flex-grow为1：等分剩余空间（自动放大占位）；
  • ​ flex-grow为n的项目，占据的空间（放大的比例）是flex-grow为1的n倍。

设置伸缩项目初始宽度（flex-basis）

• 有两种方式可以设置伸缩项目的初始宽度
  width : length
  flex-basis : length
• 使用flex-basis为元素指定宽度，效果与width相同，默认值为 auto
• 当元素设置了初始宽度，且伸缩容器主轴空间不足，伸缩项目会被压缩
• flex-basis： 定义在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据此属性计算主轴是否有多余空间
  • 默认值为auto，即 项目原本大小；
  • 设置后项目将占据固定空间。

伸缩项目如何被压缩（flex-shrink）

• flex-shrink：定义项目的缩小比例；
  • 默认为1，即 如果空间不足，该项目将缩小；
  • 所有项目的flex-shrink为1：当空间不足时，缩小的比例相同；
  • flex-shrink为0：空间不足时，该项目不会缩小；
  • flex-shrink为n的项目，空间不足时缩小的比例是flex-shrink为1的n倍。

flex-grow和flex-shrink相关计算公式

• 公式1：子元素空间 < 父容器

父容器剩余空间 = 父容器宽度 - 子元素宽度之和
增长单位 = 父容器剩余空间 / 各子元素flex-grow之和
子元素实际宽度 = (flex-basis) + 增长单位*(flex-grow)

• 公式2：子元素空间 > 父容器

子元素溢出的宽度 = 子元素的宽度之和 - 子元素宽度之和
收缩单位 = 子元素溢出的宽度 / 各子元素flex_shrink之和
计算的子元素的宽度 = (flex-basis) - 收缩单位*(flex-shrink)

flex

• flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

• flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

  • flex属性的默认值为：0 1 auto （不放大会缩小）
  • flex为none：0 0 auto （不放大也不缩小）
  • flex为auto：1 1 auto （放大且缩小）

• flex为一个非负数字n：该数字为flex-grow的值

  flex：n；=       flex-grow：n；
  
           				flex-shrink：1；
  
           				flex-basis：0%；
  

• flex为两个非负数字n1，n2： 分别为flex-grow和flex-shrink的值

  flex：n1 n2; = flex-grow：n1；
  
                flex-shrink：n2；
  
                flex-basis：0%；
  

• flex为一个长度或百分比L：视为flex-basis的值，

    flex: L; =  flex-grow：1；
  
            flex-shrink：1；
  
            flex-basis：L；
  

• flex为一个非负数字n和一个长度或百分比L：分别为flex-grow和flex-basis的值，

    flex：n L；= flex-grow：n；
  
              flex-shrink：1；
  
              flex-basis：L;
  

flex bugs

• 在IE10~11浏览器,min-height不适合于flex容器的子元素flex项目。如果可能的话，使用height来替代min-height。
• 在Chrome，Opear和Safari浏览器不识别flex项目内容的最小尺寸。可以设置flex-shrink的值为0（而不是默认的1），以避免不必要的收缩。
• 不使用无单位的flex-basis值，因为在IE10~11中，flex简写被忽略。常使用0%来替代0px。

flex布局应用场景

Flexbox布局比较适合Web应用程序的一些小组件和小规模的布局，而Grid布局更适合用于一些大规模的布局。

flex布局优缺点

• 兼容所有主流浏览器
• 轻松实现元素的水平垂直居中
• 可以忽略内联元素的4px外边距
• 可以简单的实现复杂的布局

几种常见布局的flex写法

首先要对父元素设置flex布局方式，同时在本案例中，利用媒体查询，当屏幕分辨率小于768px的时候，flex布局变成纵向排列。

• 两列布局
  flex-grow定义的是元素的放大比例，默认值为0，表示元素不放大。当给所有子元素赋予flex-grow的值时，该值可以看作是元素尺寸所占父元素的比例。
  
  
  
• 两列布局定宽
  flex是flex-grow flex-shrink flex-basis的简写方式。

给第一个子元素赋值flex：1 0 100px;表示该元素在任何情况下的宽度均是固定位100px，不会随着父元素和其他子元素缩放。
第二个子元素的flex-grow为1，则在任何情况下该元素均占满父元素的剩余空间，设置overflow可以防止元素溢出。

• 三列布局
  该布局中重点介绍的是order属性，元素的先后排列顺序与order的值对应，order值越大，元素越靠后。

• n列等比布局
  注意到第6个子元素的特殊性，我们希望这六个子元素能等宽分布，但是当元素内容过多时，它会占用更多的空间，甚至溢出。

因此对这些元素定义了width:100%;该方法表示所有的元素均占用父元素应有的位置，不因其他兄弟元素内容过多而少分配空间。

• 流式布局
  流式布局可适用于自适应布局中，当父元素大小发生改变时，其子元素的大小也随之改变。

该布局的重点属性是flex-wrap:wrap;，如此设置可以使子元素自动换行，防止子元素溢出。

• 水平垂直居中
  关键属性为justify-content:center;align-item:center;这是flex布局的一个两点，不需要知道父、子元素任何相关的尺寸信息，便能实现居中布局，灵活性很大。

• 对折线
  该案例以及下面的“各种对齐方法”主要是介绍flex中，水平和垂直方向上的的各种对齐方式。

• 各类对齐方式