flex布局

Flex之前，主要的布局方式：

• Normal flow
• Float + clear
• Position relative + absolute
• Display inline-block
• 负margin

Flex布局特点：

• Flex之前的布局，块级侧重垂直方向、行内布局侧重水平方向，而flex布局是与方向无关的。
• flex布局可以实现空间自动分配、自动对齐。
• flex适用于简单的线性布局。

Flex container属性

• Flex-direction 方向
• Flex-wrap 换行
• Flex-flow 上面2个的简写
• Justify-content 主轴方向对齐方式
• Align-items 侧轴方向对齐方式
• Align-content 多行多列对其方式（用的较少）

Flex item属性

• Flex-grow 增长比例（空间过多时）
• Flex-shrink 收缩比例（空间不够时）
• Flex-basis 默认大小（一般不用）
• Flex 上面3个的缩写
• Order 顺序（代替双飞翼）
• Align-self 自身的对齐方式 

使用flex布局可以方便的实现：

• 手机页面布局（header+ main + footer)

.container {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

header {
    height: 100px;
}

footer{
    height: 100px;
}

main {
    flex-grow: 1;
    overflow: auto;
}

• 产品列表（ul>li*9)

ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 400px;
}

li {
    width: 100px;
    height: 100px;
    background: #ddd;
    margin: 10px 0;

• 完美居中

.parent {
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

 

转载于:https://www.cnblogs.com/guojunru/p/6555729.html