Flex弹性布局详细介绍

背景介绍

网页布局是前端的一项重点内容，随着移动端的兴起，布局也由浮动（float）定位（position）布局向弹性布局（flex）转移，响应式地实现页面布局，现阶段已经得到了所有主流浏览器的支持。

Flex 是 Flexible Box的缩写，意思是“弹性布局”。主要思想是使父容器能够调节子元素的宽高和排列顺序，从而更好地填充可用空间，适应不同类型的显示设备。

采用Flex布局的元素称为Flex容器（flex container） 简称为容器， 它对应的子元素称为容器成员 （flex item）

1. 任何一个容器都可以指定flex布局

.box {

    display: flex;

}

2. 行内元素也可以使用Flex布局

.box {

    display: inline-flex;

}

3. 如果遇到低版本的浏览器可以添加浏览器内核前缀

.box {

    display: -webkit-flex;   //  -webkit- google浏览器内核前缀

}

********** 下面是布局示例 **********

注：容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）

一、justify-content属性定义了项目在主轴上的对齐方式

.box {

  justify-content: flex-start | flex-end | center | space-between | space-around

}

1. justify-content: flex-start （左对齐）

https://codepen.io/anon/pen/wZdKgy

2. justify-content: center （居中）

https://codepen.io/anon/pen/YMVyvQ

3. justify-content: flex-end （右对齐）

https://codepen.io/anon/pen/PgmPpJxx

4. justify-content:space-between （两端对齐）

https://codepen.io/anon/pen/eoWpdo

5. justify-content:space-around （每个项目两侧的间隔相等）

https://codepen.io/anon/pen/QPvjEx

二、align-items属性定义项目在交叉轴上如何对齐

.box {

  align-items: flex-start | flex-end | center | baseline | stretch

}

1. align-items: flex-start  （顶部对齐）

https://codepen.io/anon/pen/JVNXaV

2. align-items: flex-end （底部对齐）

https://codepen.io/anon/pen/qwmZyG

3. align-items: center （中点对齐）

4. align-items: baseline （文字基线对齐）

https://codepen.io/anon/pen/rbmevr

5.align-items: stretch (如没设高度，将占满整个容器高度)

https://codepen.io/anon/pen/MRmyQQs

其他Flex效果请参考链接：  Flex 布局语法教程 | 菜鸟教程