Flex 一个相当牛的布局方案

来喽来喽，来学习喽

• 关于Flex
• 容器属性
• 项目属性

关于Flex

Flex “弹性布局”，任何一个容器都可以指定为Flex 布局。

.box{
    display:flex;
}

采用Flex布局的元素，称为Flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，成为flex项目（flex item），简称“项目”。
设为flex布局以后，子元素的float、clear和vertical-align属性将失效.

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。

主轴的开始位置叫做main start，结束位置叫做main end；
交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。
单个项目占据的主轴空间叫做main size，
占据的交叉轴空间叫做cross size。

容器属性

• flex-direction:row | row-reverse | column | column-reverse;
  属性规定灵活项目的方向

    row(默认): 主轴为水平方向，起点在左端，正序
    row-reverse: 主轴为水平方向，起点在右端，相反的顺序
    column: 主轴为垂直方向，起点在上沿
    column-reverse:主轴为垂直方向，起点在上沿，相反的顺序
  

• flex-wrap
  规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

    nowrap: 默认值。规定灵活的项目不拆行或不拆列。
    wrap: 规定灵活的项目在必要的时候拆行或拆列。
    wrap-reverse: 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。
  

• flex-flow
  是flex-direction属性和flex-wrap属性的简写形式，默认 row nowrap。

• justify-content
  用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

    flex-start	默认值。项目位于容器的开头。左上开始
    flex-end	项目位于容器的结尾。右上开始
    center	项目位于容器的中心。容器顶部中间
    space-between	项目位于各行之间留有空白的容器内。容器顶部各子项中间空白
    space-around	项目位于各行之前、之间、之后都留有空白的容器内。容器顶部子项前后均自动留空白。
  

• align-items
  定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

    stretch: 默认值。元素被拉伸以适应容器。
    如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
    
    center: 元素位于容器的中心。
    弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
    
    flex-start: 元素位于容器的开头。
    弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
    
    flex-end:	元素位于容器的结尾。
    弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
    
    baseline: 元素位于容器的基线上。
    如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
  

• align-content
  用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

    stretch: 默认值。元素被拉伸以适应容器。		
    各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于'flex-start'。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。\
    
    center: 元素位于容器的中心。		
    各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。（如果剩下的空间是负数，则各行会向两个方向溢出的相等距离。）
    
    flex-start: 元素位于容器的开头。
    各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行。
    
    flex-end:	元素位于容器的结尾。		
    各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行。
    
    space-between: 元素位于各行之间留有空白的容器内。		
    各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'flex-start'。在其它情况下，第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等。
    
    space-around: 	元素位于各行之前、之间、之后都留有空白的容器内。		
    各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'center'。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。
  

项目属性

• order
  设置或检索弹性盒模型对象的子元素出现的順序。
  number: 默认值是 0。规定灵活项目的顺序。

• flex-grow:
  用于设置或检索弹性盒子的扩展比率。
  number 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。

• flex-shrink:
  子项元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 比例的值。

• flex-basis：
  用于设置或检索弹性盒伸缩基准值。

    number	一个长度单位或者一个百分比，规定灵活项目的初始长度。
    auto	默认值。长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定。
  

• flex
  flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
  flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

• align-items:
  属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

• align-self
  定义flex子项单独在侧轴（纵轴）方向上的对齐方式，会覆盖align-items的通用设置。

    stretch: 元素被拉伸以适应容器。
    如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
    
    center	
    元素位于容器的中心。
    弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
    
    flex-start:  元素位于容器的开头。
    弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
    
    flex-end: 元素位于容器的结尾。
    弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
    
    baseline: 元素位于容器的基线上。
    如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
  

来源：CSDN

作者：Ivan wang(2)

链接：https://blog.csdn.net/wanliangsoft/article/details/101756132