云计算弹性盒子笔记

CSS弹性盒子

由弹性容器和弹性子元素组成

变成弹性盒子方法：给目标标签最近的父元素加上

display:flex;

默认从主轴开始方向排列（由左向右）

默认交叉轴从上向下

二者都可以改变方向；

由开始向结束方向排列

更改主轴方向：flex-direction:row-reverse(

把侧边变成主轴:flex-direction:column;

更改竖向主轴方向：flex-direction:column-reverse；

主轴的排列方式： justify-content:；

同时居中：justify-content:center；

两边贴边中间平分剩余空间：justify-content:space-between；

主轴默认方向排列justify-content:flex-start；

主轴相反方向排列justify-content:flex-end；

平分剩下的空间justify-content:space-around；

垂直居中（交叉轴对齐式）

align-items:center;

align-items:start;

align-items:end;

使用align-items会把元素挤在一行，解决方法：

flex-wrap:wrap; 给父元素加属性实现元素换行

.（元素名）{order：-2；}会使小li排在前面order的值越小排列越靠前，默认值为0；

Flex-grow：1；意思是给选中元素让每一份都占比是1；

Flex-grow：1，2，1；分剩余空间

Flex-shrink：1；调整元素不被压缩

Align-self:flex-end;控制子元素自身动；

Grid布局

Display：grid；

Grid-template-columns：100px 200px 200px；

控制列的宽度

Grid-template-columns:1fr 2fr 3fr 4fr/repeat(4,100px)

Grid-template-rows:200px;/1fr 2fr 3fr 4fr

Row-gap:20px;

column-gap:20px;

Gap:20px;

Grid-row-start: ;

Grid-row-end:

Grid-column-start:

Grid-column-end:

Grid-row:2/3;
grid-column:1/3;

grid模板布局