【无标题】

一、flex弹性布局

弹性布局，页面中任何一个元素只要设置了display:flex属性，那么当前盒子都称为弹性盒子。弹性盒子默认有两条轴: 默认水平显示的主轴 和 始终要垂直于主轴的侧轴(也叫交叉轴)，在弹性盒子中所有的子元素都是沿着主轴方向显示。

1.flex- direction

属性	说明
row	默认值。元素将水平显示，正如一个行一样。
row-reverse	与 row 相同，但是以相反的顺序。
column	垂直
end-reverse	反向垂直

2.flex-wrap 

该属性用于设置子元素是否换行，有 2 个属性值：

属性值	说明
nowrap	默认，不换行
wrap	换行

flex 布局中，默认子元素不换行。如果装不下，会自动缩小子元素宽度。 

可以通过修改 flex-wrap: wrap 使得换行显示，保留原有大小。 

3.flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。  

flex-direction: column;
flex-wrap: wrap;

4.justify-content 

属性值	说明
flex-start	默认（从左到右），从头部开始
flex-end	从尾部开始
center	在主轴居中对齐
space-around	平分剩余空间
space-between	先两边贴边，再平分剩余空间

5.align-items 

该属性用于设置侧轴上子元素排列方式，适用于单行元素。 

属性值	说明
flex-start	从上到下
flex-end	从下到上
center	挤在一起居中，垂直居中
stretch	默认，拉伸

6.align-content 

该属性用于设置侧轴上子元素排列方式，适用于多行元素。

此属性只能用于子项出现换行的情况，单行下是无效的。

属性值	说明
flex-start	默认，侧轴头部开始
flex-end	侧轴尾部开始
center	在侧轴中间显示
space-around	子项在侧轴平分空间
space-between	子项在侧轴线分布在两头，在平分空间
stretch	设置子项元素高度平分父元素高度

 7.作用在flex子项上的css属性

order：该属性用于定义项目的排列顺序。数值越小，排列越靠前，默认为 0 。

Flex-grow：属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 

Flex-shrink：属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

Flex-basis：属性定义了在分配多余空间之前，项目占据的主轴空间(main size)。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的来大小。

Flex：该属性用于说明子项占剩余空间的份数，默认值是 0 。

align-self：该属性用于控制子项自己在侧轴上的排列，不是整体排列，而是让某个子盒单独排列。

二、grid网格布局

Grid 布局则是将容器划分成“行"和“列”，产生单元格，然后指定"项目所在”的单元格，可以看作是二维布局。

1.grid-template-rows和grid-template-columns

 对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位（网格剩余空间比例单位）。

有时候，我们网格的划分是很规律的，如果需要添加多个横纵网格时，可以利用repeat()语法进行简化操作。

2.grid-template-area 

一个区域由单个单元格或多个单元格组成，具体使用，由个人决定

区域的命名会影响到网格线，每个区域的起始网格线会自动命名为 区域名-start，终止网格线会自动命名为 区域名-end

grid-template-areas: 'a b c' 'd e f' 'g h i';

区域不需要利用则用点代替 

grid-template-areas: 'a . c' 'd . f' 'g . i';

3.justify-items和align-items  

justify-items属性设置单元格内容的水平位置（左中右 ）

align-items属性设置单元格内容的垂直位置（上中下）

place-items属性是justify-items属性和align-items属性的合并简写形式 

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）。

4.justify-content和align-content

justify-content属性是整个内容区域在容器里面的水平位置（左中右）

align-content属性是整个内容区域的垂直位置（上中下）

place-content属性是justify-content属性和align-content属性的合并简写形式

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}
start - 对齐容器的起始边框
end - 对齐容器的结束边框
center - 容器内部居中
stretch - 项目大小没有指定时，拉伸占据整个网格容器
space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍
space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔
space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔

5.作用在子项上的css属性 

 grid-column-start / grid-column-end 和 grid-row-start / grid-row-end

 用来指定item的具体位置, 根据在哪根网格线

.item-1{
    background-color: orangered;
    grid-column-start: 1;
    grid-column-end: 3;
}

grid-column / grid-row 

 grid-column: 开始的网格线 / 结束的网格线

/* grid-column-start: 1; */
/* grid-column-end: 3; */
grid-column: 1 / 3;
/* 效果相同 */

grid-area 

指定项目放在哪一个区域 

grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并
简写形式，直接指定项目的位置

grid-area: <row-start> / <column-start> / <row-end> / <column-end>

justify-self / align-self / place-self 

justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目(水平方向)

align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，
也是只作用于单个项目(垂直方向)

place-self属性是align-self属性和justify-self属性的合并简写形式

justify-self: start / end / center / stretch

align-self: start / end / center / stretch

place-self: <justify-self属性值> <align-self属性值>