CSS布局——flex

一、什么是Flex布局？

Flex又称为“弹性布局”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex 布局 。采用Flex布局的元素，称为Flex容器（flex container），它的所有子元素称为flex项目（flex item）。设为flex布局以后，子元素的float、clear和vertical-align属性将失效。

二、容器的属性

1、flex-direction

flex-direction：决定flex项目的排列方向。它有四个值：row 、row-reverse 、 column 、column-reverse

.box{

     flex-direction:row | row-reverse |  column | column-reverse;

}

row（默认值）：从左往右，水平方向显示

row-reverse:从右往左，水平方向显示

column:从上往下，垂直方向显示

column-reverse:从下往上，垂直方向显示

2、flex-wrap

flex-wrap：决定flex项目如何换行。当flex item在一条轴线上显示不下的时候，如何进行换行。它有3个值nowrap 、wrap 、wrap-reverse

.box{

  flex-wrap: nowrap | wrap | wrap-reverse;

}

nowrap（默认）：不换行

wrap：换行，第一行在上方

wrap-reverse：换行，在第一行的下方

3、flex-flow

flex-flow：flex-direction属性和flex-wrap属性的简写形式，默认 row nowrap。

.box{

    flex-flow:<flex-direction> || <flex-wrap>;

}

4、 justify-content

justify-content：决定flex项目在轴上的对齐方式。它有5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右

.box{

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

}

flex-start（默认值）：左对齐

flex-end：右对齐

center：居中

space-between:两端对齐，项目之间的间隔都相等

space-around：每个项目两侧的间隔相等

        下面是flex的应用，效果如下,github的代码地址：https://github.com/ducaifeng86/CSS-Practice