Flex详解

flex 之前是怎么布局的

• normal flow (文档流)
• float
• position
• display inline-block
• 负maring

flex 介绍

特点：

1. 块级布局侧重垂直方向、行内布局侧重水平方向，flex布局是与方向无关的
2. flex 布局可以实现空间自动分配、自动对齐（flexible：弹性、灵活）
3. flex 适用于简单的线性布局，更复杂的布局要交给grid的布局（还没发布）

用法

在父元素上加一个 display：flex 就可以了

// CSS

.parent{
    display: flex; 
    background: #ccc;
}
.parent div{
    width: 100px;
    height: 50px;
    background: palevioletred;
    margin: 15px;
}

<!-- HTML -->

<div class="parent">
    <div></div>
    <div></div>
</div>

flex 父元素的属性

以下属性都写父元素里

以下属性都写父元素里

以下属性都写父元素里

flex-direction 排列方向 (写父级元素里)

里面的子元素默认从左向右排列

从右向左排列

flex-direction：row-reverse

从上往下垂直排列

flex-direction：column

从下往上垂直排列

flex-direction：column-reverse

flex-wrap 换行

不换行

flex-wrap：nowrap

换行

flex-wrap：wrap

（flex-wrap 一般配合 flex-direction 使用）

flex-flow 上面两个的简写

flex-flow：row nowrap

justify-content 主轴方向对齐方式

所有子元素的盒子放在 在空间内居中

justify-content:space-between

所有子元素盒子放在中间

justify-content:center

所有子元素盒子都在周围（都在周围）

justify-content:space-around

所有子元素盒子都居左（都居起点）

justify-content:space-start

所有子元素盒子都居右（都居终点）

justify-content:space-end

align-items 侧轴对齐方式（控制子元素对齐方式 父级子级都不要有宽高）

所有子元素 以最高的高度为准（默认）

align-items：stretch

所有子元素 全都向起点靠 -- 顶对齐

align-items：flex-start

所有子元素 全都向终点靠 -- 底对齐

align-items：flex-end

所有子元素 全都向起点靠 -- 居中

align-items：flex-center

align-content 多行/列内容对齐方式（用的较少）

把所有子元素 靠向起点

align-content：flex-start

把所有子元素 靠向终点

align-content：flex-end

把所有子元素 平均分配（默认）

align-content：stretch

把空间放在子元素中间

align-content：space-between

把空间放在子元素两边

align-content：space-between

flex 子元素的属性

以下属性都写子元素里

以下属性都写子元素里

以下属性都写子元素里

flex-grow 增长比例（空间过多时）

分配多余空间（进行扩展的量）

flex-grow：1

flex-shrink 收缩比例（空间不够时）

数越大 收缩比例越多

flex-shrink：2

flex-basis 默认大小（一般不用）

默认占的大小

flex-basis：300px

flex 上面三个缩写

flex： 1 2 300px;

order 顺序（代替双飞翼）

顺序在第一个 （每一个子元素都要写）

order：1

align-self 自身对齐方式

如果父级确定了统一的对齐方式 这个元素可让子元素 自己选择自己的对齐方式

align-self：center;