2D属性/伸缩布局/BFC

transform:translate(50%);  (自恋型)
移动百分比是移动自己的百分之50,而不是以父亲为准。

写div居中的方式,
先left:50%,再向左走自己的百分之50,垂直类似
left:50%;
transform:translateX(-50%);
伸缩布局
父级{
   display:flex;
}
子盒子1{
  flex:1;
}
子盒子2{
  flex:1;
}
子盒子3{
  flex:1;
}
三个儿子权重都是1,相当于都获得三分之一区域,而且也可以和固定值混用,如子盒子2的width:300px;
min-width  和  max-width 设置父容器最小限定和最大限定
默认是一行弹性布局,如果给父亲加上flex-direction: column;就是一列弹性。

justify-content调整主轴对齐
flex-start        默认从开头开始排列
flex-end          从末尾开始排列
center            在中间向两边排列
space-between    最左最右贴近父元素,其他平均分布,散开
space-           全部散开,左右也不挨着。
BFC是一个块级区域,与外部毫不相关。
触发BFC必须display是block   list-item   table

触发BFC的属性:
1、有浮动,浮动不为none
2、position为absolute或者fixed
3、display为inline-block  table-cell  flex  inline-flex  table-caption
4、overflow不为visible

发表评论

邮箱地址不会被公开。 必填项已用*标注