Flex布局详解

Flex布局详解

什么是Flex布局

• Flex布局又叫做Flexible布局、弹性布局
• Flex布局是目前web开发中用的最多的布局方案

Flex布局到底是用来解决一个什么样的问题呢

当并列书写多个块级标签，它们会纵向向下排位.如果我们想将多个块级标签并列成一排，就得借助position，float，或display属性，这便是传统的盒模型做法。

开启flex布局以后我们就可以轻易地完成以下布局

Flex布局基础

Flex布局的两个基本概念

• 开启了Flex的布局叫做Flex container
• flex container 里面的直接子元素叫 flex items

Flex的轴概念

默认情况下，横着方向是主轴，竖着的方向是交叉轴，并且其实方向是从左到右，从上到下，这是为了控制内部元素排列方式产生的概念

开启Flex布局的钥匙

• 在css中设置display属性为flex 或者 inline-flex之后该标签即可成为Flex container
• flex:Flex container以块级元素存在
• inline-flex: Flex container以行内元素存在

Flex container上的属性

1. flex-direction

• 用于修改主轴的方向
• 取值：row(默认方向) | row-reverse(横向翻转) | column(主轴改为竖向) | column-reverse(主轴改为竖向翻转)

1. flex-wrap

• 用于控制flex items是否换行
• 取值：nowrap(默认) | wrap(开启换行) | wrap-reverse（开启换行并逆向排序）

1. justify-content

• 用于控制项目在横轴的对齐方式
• 取值：flex-start(默认) | flex-end(主轴末尾对齐) | center（居中） | space-between | space-around | space-evenly;

4.align-items

• 用于控制项目在纵轴排列方式
• 取值：flex-start | flex-end | center | baseline | stretch(默认)

1. align-content

• 用于控制多行项目的对齐方式，如果项目只有一行则不会起作用
• 取值：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);
• 使用方法跟align-items类似

Flex items上的属性

1. flex

• 取值：默认0 1 auto，flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度。

1. flex-grow

• 取值：默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大；注意，即便设置了固定宽度，也会放大。

1. flex-shrink

• 取值：默认1，用于决定项目在空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小；注意，即便设置了固定宽度，也会缩小。

1. order

• 取值：默认0，用于决定项目排列顺序，数值越小，项目排列越靠前。

1. align-self

• 取值：auto(默认) | flex-start | flex-end | center | baseline | stretch，表示继承父容器的align-items属性。如果没父元素，则默认stretch。
• 用于让个别项目拥有与其它项目不同的对齐方式，各值的表现与父容器的align-items属性完全一致。

1. flex-basis

• 取值：默认auto，用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会比width属性高，因此会覆盖width属性。