flex布局，grid布局属性学习笔记

flex布局

基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

容器属性

1.flex-direction： row | row-reserve | column | column-reserve
决定主轴的方向（项目排列的方向）：↑ | ↓ | → | ←

2.flex-wrap: nowrap | warp | warp-reserve
换行：不换行 | 换行 | 第一行在下方

3.flex-flow：[flex-direction] [ flex-warp]
是flex-direction和flex-flow的缩写

4.justify-content：flex-start | flex-end | center | space-between | space-around
主轴上的对齐方式：左对齐 | 右对齐 | 居中 | 两端对齐| 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

5.aline-items：flex-start | flex-end | center | baseline | stresch
项目在交叉轴（Y轴）上的对齐方式：上对齐 | 下对齐 | 居中 | 按第一行文字对齐 | 如果项目未设置高度或设为auto，将占满整个容器的高度

项目属性

1.order：数字
自定义项目的排序

2.flex-grow：数字
项目的放大比例

3.flex-shrink：数字
项目缩小比例

4.flex-base：[length] | auto
定义项目占据的主轴空间大小，默认为auto

5.flex：none | [flex-grow flex-shrink flex-base]
flex是flex-grow、flex-shrink、flex-base的缩写，默认值为0 1 auto

align-self：auto | flex-start | flex-end | center | baseline | stretch
允许单个项目有自己的对齐方式

grid布局

应用display：gird的元素就是网格容器，是所有网格项 的父元素。
网格线：网格结构的分界线
网格轨道：类似网格的行和列
网格单元格：一个格子就是一个单元
网格区域：任意数量的单元组成

容器属性

• display
• template-columns
• grid-template-rows
• grid-template-areas
• grid-template
• grid-column-gap
• grid-row-gap
• grid-gap
• justify-items
• align-items
• place-items
• justify-content
• align-content
• place-content
• grid-auto-columns
• grid-auto-rows
• grid-auto-flow
• grid

1.display

display: grid  //生成一个块级网络
diaplay：inline-gird	//生成一个内联网络

2.grid-templte-columns | gird-template-rows
用来定义网格的行和列，值表示网格轨道的大小

  grid-template-columns: 40px 50px auto 50px 40px;  //每个值都代表一列，设五个值就代表有五列
  grid-template-rows: 25% 100px auto;	//值可以用百分比表示，也可以设为auto
  //也可以为每一条网格线取名
  grid-te