这是我参与「第四届青训营 」笔记创作活动的第4天

Flexbox

注意: Flexbox 布局是最适合应用开发和小规模布局，grid更适合大规模布局

属性

display

.container { 
  display: flex; */* or inline-flex */*
 }

flex-direction

container {
  flex-direction: row | row-reverse | column | column-reverse;
}

flex-wrap

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap 默认 所有flex的元素都在一条线上
• wrap: flex元素会按布局大小从第一行逐步往下放置元素
• wrap-reverse: flex元素会倒着排成行

justify-content

justify-content: space-between;
/* 均匀排列每个元素首个元素放置于起点，末尾元素放置于终点 */

justify-content: space-around;
/* 均匀排列每个元素每个元素周围分配相同的空间

justify-content: space-evenly;
/* 均匀排列每个元素 每个元素之间的间隔相等 */

justify-content: stretch;
/* 均匀排列每个元素'auto'-sized 的元素会被拉伸以适应容器的大小

align-items

CSS align-items 属性将所有直接子节点上的 align-self 值设置为一个组。align-self 属性设置项目在其包含块中在交叉轴方向上的对齐方式。

在 Flexbox 中，它控制十字轴上项目的对齐方式，在网格布局中，它控制块轴上项目的对齐方式。

align-content

Flexbility

• 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩
• flex-grow：有剩余空间时的伸展能力
• flex-shrink：容器空间不足时收缩的能力
• flex-basis：没有伸展或收缩时的基础长度

复合写法

float

现阶段，float属性的作用是实现文字环绕。

position属性

static：默认值，非定位元素

relative

相对定位，相对自身原本位置偏移，不脱离文档流

• 在常规流里面布局
• 相对于自己本应该在的位置进行偏移
• 使用top、left、bottom、right设置偏移长度
• 流内其它元素当它没有偏移一样布局

absolute

绝对定位，相对非Static祖先元素定位

• 脱离常规流

• 相对于最近的非static祖先定位

• 不会对流内元素布局造成影响

fixed

相对于视口绝对定位