flex布局

Flex布局详解

一、简介

flex布局中需要掌握两个概念flex-container 和flex-items

二、flex-container

开启flex布局的容器就是 一个flex-container，其中最主要的一个概念就是 主轴和交叉轴的概念。

主要由于 display 决定

两种方式：

1） 块级元素

display: flex

2）行内元素

displa: inline-flex

1、 flex-direction: 决定主轴方向

• row 主轴方向从左向右
• row-reverse 主轴方向 从右到左
• column 主轴方向从上到下
• column-everse 主轴方向从下到上

2、 justify-content : 决定主轴上 item的 对齐方式

• flex-start 从 主轴的 flex-start开始排布
• flex-end 从主轴的 flex-end方向开始排布
• space-around 元素均分,中间的空格大
• space-between 两边元素 贴边 其余元素居中
• space-evenly 元素均分，所有元素的间隔相同
• center 元素居中

3、 flex-wrap : 当元素超出后 是否换行 默认为 nowrap （不换行）

• wrap 换行
• nowrap 不换行

4、align-items 有多行元素时，交叉轴的对齐方式

• flex-start
• flex-end
• normal
• stretch
• space-between
• space-evenly
• space-around
• baseline
• center

5、flex-flow 合成元素 flex-direction 和flex-wrap的合成元素

二、flex-items的属性

1、order： item所处的顺序 ，用的很少

2、flex-grow：当元素不足 父容器的宽度时 增长的比例。如果 item的 flex-grow和大于1 则按照权重进行增加，否则按照 剩余部分的百分比增加。

3、flex-shrink: 和flex-grow对应， 当元素超出布局后 进行缩减。

4、flex-basis: 子元素 在主轴上的 宽度，优先级 最高。如果设置了 宽度也会被替换为改属性的值

5、align-self 对应 flex-container的 align-items属性

6、flex 合成元素: flex-grow、flex-shrink、flex-basis三个属性的合成。