flex布局

父容器

flex-direction

• 主轴的方向，即项目排列的方向

row

• （默认值）主轴为水平方向，起点在左端。

row-reverse

• 主轴为水平方向，起点在 右端

column

• 主轴为垂直方向，起点在上沿

column-reverse

• 主轴为垂直方向，起点在下沿

试一试

flex-wrap

• 在轴线上是否换行

nowrap

• nowrap: 默认不换行

wrap

• wrap: 换行

wrap-reverse

• wrap-reverse: 换行,第一行在下方

flex-flow

• || 是上面2属性的集合

justify-content

• justify-content 项目在主轴上的对齐方式

flex-start

• 左对齐

flex-end

• 右对齐

center

• 居中对齐

space-between

• space-between 两端对齐，项目之间的间隔都相等

space-around

• 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

试一试

align-item

• align-item 交叉轴上的对齐方式

flex-start

• flex-start:交叉轴上的起点对齐

flex-end

• flex-end:交叉轴上的终点对齐

center

• center:交叉轴上的中点对齐

strech

• strech:默认值，如果项目未设置高度或设为auto,将沾满整个容器的高度。

baseline

• baseline:项目的第一行文字的基线对齐

试一试

子容器

order

• order定义项目的排序顺序。数值越小，排序越靠前，默认为0,越到越靠后

试一试

flex-shrink

flex-basis

flex

align-self

• 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

轴

主轴

• flex-direction主轴的方向

交叉轴

• 交叉轴永远是主轴顺时针方向旋转90度

grid

• 网格布局，15个属性

grid-template-columns

.container{
  display: grid;
  grid-template-rows: 100px 100px 100px 100px 50px;
  grid-template-columns: 100px 100px;
}

grid-template-rows

• repeat函数（上图3x3列的网格，列宽和行高都是100px, 重复写相同的值比较麻烦）

#container{
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(2, 100px 20px 80px);  
}

grid-template-areas

grid-template

grid-gap

justify-items

align-items

place-items

justify-content

align-content

place-content

grid-auto-columns

grid-auto-rows

grid-auto-flow

grid 子容器

• 网格布局子容器，10个属性

grid-column-start

grid-column-end

grid-row-start

grid-row-end

grid-column

grid-row

grid-area

justify-self

align-self

place-self

文档流布局

浮动布局

定位布局