flex布局

什么是flex概念：全称-FlexibleBox，即弹性盒子，主要用
来进行弹性布局的，可以配合rem处理尺寸适配
的问题。
用来为盒状模型提供最大的灵活性。任何一个元素都可以设置为Flex布局
为什么使用flex更加符合响应式设计的特点
row默认值。按从左往右的顺序排列
flex-direction：指定子元素在父元素盒子中的排与row相同，但是以相反的顺序排列
row-reverse
列方式
column垂直方向排列，按从上到下的顺序排列
column-reverse与column相同，但以相反的顺序排列
flex-wrap：指定子元素在父元素盒子中是否允默认值，不换行
nowrap
许换行
换行
wrap
flex-flow创如：flex-flowrowwrap
是flex-direction和flex-wrap的简写形式
flex-start，默认值，位于主轴的起点
flex-end位于主轴的终点
justify-content定义子项目在主轴上的排列方center位于主轴的中间
式space-between均匀排列每个元素，首个元素
放置于起点，未尾元素放置于终点
容器属性space-around均匀排列每个元素，每个元素周
flex布局
围分配相同的空间。
flex-start子元素位于侧轴起点
align-items指定子元素在侧轴方向的排列方flex-end子元素位于侧轴终点
式（单行）
子元素位于侧轴中间
center山
baseline子元素位于容器的基线上。
stretch默认值。元素被拉伸以适应容器。
stretch默认值。元素被拉伸以适应容器。
flex-start位于侧轴的起点
align-content指定子元素在侧轴方向的排列方flex-end位于侧轴的终点
式（多行)
center位于侧轴的中心
space-between在侧轴的两端对齐，轴线之间
的间隔平均分布
stretch（默认值）：轴线占满整个交叉轴
align-self设置单个子元素在侧轴方向的排列方式
flex-basis设置子元素在主轴方向占据的空间大小
order设置子元素的排列顺序。数值越小，排列越靠
前，默认为0
项目的属性设置子元素的放大比例，默认为0，即如果存在
flex-grow
剩余空间，也不放大
不足，该子元素将小。设置子元素的缩小比例，默认为1，即如果空间
flex-shrink
flex是flex-grow，flex-shrink和flex-basis的简写，
默认值为01auto。后两个属性可选

Flex 是 Flexible Box 的缩写，意为”弹性布局”，任何一个容器都可以指定为Flex布局。设为 Flex 布局以后，子元素的 float、clear和vertical-align属性将失效。要设置一个元素采用 flex 布局，只需设置器 display 属性取值为 flex 即可。

.flex-box{
    display:flex;     /* or inline-flex*/
}

常用术语

采用 Flex 布局的元素，称为Flex容器。其子元素为flex item，本文称其为”项目”。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。

1. flex container : Flex容器，简称 容器
2. flex item : Flex容器的子元素，可称其为 flex 项目，简称 项目
3. main axis : 主轴， 水平轴，起始位置称为 main start，结束位置称为 main end
4. cross axis: 交叉轴， 垂直轴，开始位置叫做 cross start，结束位置叫做 cross end

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

容器的属性

1. flex-direction :flex-direction属性决定主轴的方向（即项目的排列方向）。
   • row（默认值）：主轴为水平方向，起点在左端。
   • row-reverse：主轴为水平方向，起点在右端。
   • column：主轴为垂直方向，起点在上沿。
   • column-reverse：主轴为垂直方向，起点在下沿。
2. flex-wrap: 默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
   • nowrap（默认）：不换行。
   • wrap：换行，第一行在上方。
   • wrap-reverse：换行，第一行在下方。
3. flex-flow : flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

   .box {
     flex-flow: <flex-direction> || <flex-wrap>;
   }
   

4. justify-content: justify-content属性定义了项目在主轴上的对齐方式。
5. align-items: align-items属性定义项目在交叉轴上如何对齐。
6. align-content: align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

项目的属性

1. order 定义项目的排列顺序，数值越小越靠前
2. flex-grow 定义项目的放大比例
3. flex-shrink 定义项目的缩小比例
4. flex-basis 定义在分配多余空间之前，项目占据的主轴空间
5. flex 是 grow shrink basis 的简写。取值 none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
6. align-self 定义当前项目的对其方式。取值 auto | flex-start | flex-end | center | baseline | stretch
7. 

8. 1、网格布局

   1.1、基本网格布局

   最简单的网格布局，就是平均分布。 HTML代码如下。

   <div class="Grid">
       <div class="Grid-cell">1/2</div>
       <div class="Grid-cell">1/2</div>
     </div>
     <div class="Grid">
       <div class="Grid-cell">1/3</div>
       <div class="Grid-cell">1/3</div>
       <div class="Grid-cell">1/3</div>
     </div>

   CSS代码如下。

   .Grid {
     display: flex;
   }
   
   .Grid-cell {
     flex: 1;
     background: #eee;
     margin: 10px;
   }

   这里最关键的就是flex:1使得各个子元素可以等比伸缩

   

   1.2、百分比布局

   某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。 HTML代码如下。

   <div class="Grid">
       <div class="Grid-cell col2">50%</div>
       <div class="Grid-cell">auto</div>
       <div class="Grid-cell ">auto</div>
   </div>
   <div class="Grid">
       <div class="Grid-cell">auto</div>
       <div class="Grid-cell col2">50%</div>
       <div class="Grid-cell clo3">1/3</div>
   </div>

   CSS代码如下。

   .col2 {
     flex: 0 0 50%;
   }
   .col3 {
     flex: 0 0 33.3%;
   }

   这里最关键的是通过flex的第三个属性，也就是flex-basis来定义元素占据的空间。

   

   flex布局的作用

9. 在父内容里面 垂直居中 一个块内容
10. 使容器的所有 子项占用等量的可用宽度/高度 ，而不管有多少宽度 / 高度可用
11. 使多列布局中的 所有列采用相同的高度 ，即使它们包含的内容量不同