Flex布局

1. flex布局的常见属性

属性名	可选值	含义
flex-direction	row、 row-reverse 、column 、column-reverse	定义Flex项目在容器中的排列方向。默认值是row，表示水平方向从左到右排列；row-reverse表示水平方向从右到左排列；column表示垂直方向从上到下排列；column-reverse表示垂直方向从下到上排列
flex-wrap	nowrap 、 wrap 、 wrap-reverse	定义Flex项目是否换行。默认值是nowrap，表示不换行；wrap表示换行；wrap-reverse表示反向换行。
flex-flow	flex-direction 、flex-wrap	这是一个简写属性，包含了flex-direction和flex-wrap。
justify-content	flex-start 、 flex-end 、 center 、 space-between 、 space-around 、 space-evenly	定义Flex项目在主轴上的对齐方式。默认值是flex-start，表示靠主轴起始位置对齐；flex-end表示靠主轴结束位置对齐；center表示居中对齐；space-between表示平均分布在主轴上，两端不留空隙；space-around表示平均分布在主轴上并在项目之间留有空间；space-evenly表示平均分布在主轴上并在项目之间和两端留有空间。
align-items	flex-start 、 flex-end 、 center 、 baseline 、 stretch	定义Flex项目在交叉轴上的对齐方式。默认值是stretch，表示拉伸填充交叉轴，flex-start表示靠交叉轴起始位置对齐，flex-end表示靠交叉轴结束位置对齐，center表示居中对齐，baseline表示基线对齐。
align-content	flex-start、flex-end、 center、space-around、space-between、stretch	设置侧轴上的子元素排列方式（多行）。flex-start 默认值，在侧轴的头部开始排列,flex-end 在侧轴的尾部开始排列center 在侧轴的中间显示space-around 子项在侧轴平分剩余空间space-between 子项在侧轴先分布在两头，再平分剩余空间，stretch 设置子项元素高度平分父元素高度
align-self	auto 、flex-start 、flex-end 、 center 、 baseline 、stretch	允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
flex-grow	默认值是 0	默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
flex-shrink	默认值是 1	默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。

2.flex布局中align-items和align-content有何区别

如果item内部flex-item只有一列时

align-content与align-items相同的属性值产生的效果一样； align-content的space-between与flex-start效果相同，space-around与center效果相同

如果item内部flex-item有多列时

align-content 控制侧轴子元素多行情况下的排列方式

3.使用flex布局实现一个左右侧固定，中间自适应的布局

flex布局方式

<div class="container">
  <div class="left"></div>
  <div class="main"></div>
  <div class="right"></div>
</div>

    .container > div {
       height: 100px;
     }
    .container {
        display: flex;
    }
     .left {
        width: 300px;
        background-color: #a9ff29;
    }
    .main {
        flex: 1;
        background-color: #ffb91b;
    }
    .right {
        width: 200px;
        background-color: #40c3ff;
     }

浮动实现

<div class="container">
    <div class="aside-left">左侧</div>
    <div class="aside-right">右侧</div>
    <!-- 必须放到最后 -->
    <div class="middle">中间</div>
</div>

.container > div {
   height: 100px;
    }
 .aside-left {
   float: left;
   width: 300px;
   background-color: #a9ff29;
}
.middle {
  background-color: #ffb91b;
}
.aside-right {
  float: right;
  width: 200px;
  background-color: #40c3ff;
}

grid布局实现

<div class="container"> 
    <div class="left"></div> 
    <div class="main"></div> 
    <div class="right"></div>
</div>

/* grid布局 */ 
.container { 
    margin: 2rem; 
    background-color: #eeeeee; 
    display: grid; 
    grid-template-columns: 300px 1fr 300px; 
} 
.left { 
    height: 100%; 
    border: 1px solid black; 
} 
.main { 
    height: 100%; 
} 
.right { 
    height: 100%; border: 1px solid; 
}

4.如何实现

+----+---+----+
| A  | B |  C |
+----+---+----+
| D  |   E    |
+----+---+----+

<div class="container"> 
    <div class="item">A</div> 
    <div class="item">B</div>
    <div class="item">C</div>
    <div class="item item-span">E</div> 
    <div class="item">D</div> 
 </div>

.container { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  grid-template-rows: auto auto; grid-gap: 10px; 
} 
.item { 
  border: 1px solid black; 
  padding: 10px; 
} 
.item-span { 
  grid-column: span 2; 
}