flex布局

布局

布局 无非就是 水平 、垂直 对齐，左对齐、右对齐。

水平居中 可以同 通过 margin:0 auto 实现。
垂直居中可以通过 绝对定位 等方法实现。

.parent {
    position: relative
}
.child {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}

.center{
position: absolute;
top: 50%;
left: 50%;
width:50%;
height:30%;
padding:20px;
text-align:center;
transform: translate(-50%, -50%);
}

最近做了一个移动端页面，开始学习使用 flex布局。

flex布局

使用flex布局 设置父容器 display:flex, justify-content:center 水平居中
align-items:center 实现垂直居中. 只需要三行代码。

flex的核心就是容器和轴。

容器

父容器可以统一设置子容器的排列方式，子容器也可以单独设置自身的排列方式

• justify-content 定义如何沿着主轴方向排列子容器

值	说明
flex-start	起始端对齐
flex-end	末尾短对齐
center	居中对齐
space-around	子容器沿着主轴均匀分布，位于首尾的容器到父容器距离是子容器间距的一半
space-between	子容器均匀分布，首尾子容器与父容器相切

• align-items 设置子容器如何沿交叉轴排列

值	说明
flex-start	起始端对齐
flex-end	末尾端对齐
center	居中对齐
baseline	基线对齐，这里的 baseline 默认是指首行文字，所有子容器向基线对齐，交叉轴起点到元素基线距离最大的子容器将会与交叉轴起始端相切以确定基线。
stretch	子容器沿交叉轴方向的尺寸拉伸至与父容器一致。

• flex-wrap 设置换行方式

  • nowrap：不换行
  • wrap：换行
  • wrap-reverse：逆序换行 逆序换行是指沿着交叉轴的反方向换行。

  更多高级用法。。。

子容器

子容器具有弹性（flex）它们会自动填充剩余控件，子容器的伸缩比例由flex决定。

• 主轴上伸缩 flex

flex 的值可以是无单位数字（如：1, 2, 3），也可以是有单位数字（如：15px，30px，60px），还可以是 none 关键字。子容器会按照 flex 定义的尺寸比例自动伸缩，如果取值为none 则不伸缩。
虽然 flex 是多个属性的缩写，允许 1 - 3 个值连用，但通常用 1 个值就可以满足需求

• 单独设置子容器如何沿交叉轴排列：align-self

每个子容器也可以单独定义沿交叉轴排列的方式，此属性的可选值与父容器 align-items 属性完全一致，如果两者同时设置则以子容器的 align-self 属性为准。

• flex-basis 表示在不伸缩的情况下子容器的原始尺寸。主轴为横向时代表宽度，主轴为纵向时代表高度。
• flex-grow 子容器弹性伸展的比例
• flex-shrink 子容器弹性收缩的比例
• order 设置排列顺序 默认值为 0，可以为负值，数值越小排列越靠前

轴

轴 包括 主轴 和 交叉轴，justify-content 属性决定子容器沿主轴的排列方式，align-items 属性决定子容器沿着交叉轴的排列方式。
flex-direction 属性决定主轴的方向，交叉轴的方向由主轴确定。

• flex-direction: row 向右
• flex-direction: column 向下
• flex-direction: row-reverse 向左
• flex-direction: column-reverse

网上找了一个图，总结的很清楚：

flex.png