Flex布局

一、简介

    Flex (Flexible Box)，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

    容器指定 flex布局：

display: flex;

// 行内元素的flex布局
display: inline-flex;

// webkit内核的浏览器 flex布局
display: -webkit-flex;
display: flex;

 

二、基本概念

    采用 Flex 布局的元素，称为 Flex 容器(flex container)。container内部的子元素自动成为容器成员，称为 Flex 项目(flex item)。

    容器默认存在两根轴：水平的主轴(main axis) 和垂直的交叉轴(cross axis)。

 

三、Flex在容器中的六个属性

    1、flex-direction       容器沿主轴的排列方向       row(横向正向)  row-reverse(横向反向)  column(纵向正向)  column-reverse(纵向反向)

    2、flex-wrap            容器内是否换行                nowrap(不换行)  wrap(换行)  wrap-reverse(换行，第一行在下面，新的一行在旧的一行上面)

    3、flex-flow             flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

    4、justify-content    主轴上的对齐方式             flex-start(靠左)  center(居中)  flex-end(靠右)  space-between(两端对齐，项目之间的间隔都相等)  space-around(每个项目两侧的间隔相等)

    5、align-items         容器内交叉轴的对齐方式       flex-start(沿上边对其)  center(居中对其)  flex-end(沿下边对其)  baseline(沿项目的第一行文字的基线对其)  stretch(上下充满容器高度)

    6、align-content      多条主轴纵向的对齐方式    flex-start(靠上)  center(垂直居中)  flex-end(靠下)  space-between(上下两端对齐，主轴之间的间隔都相等)  space-around(每个主轴两侧的间隔相等)