CSS笔记--理解flex布局

一、Flex布局是什么

        Flex(Flexible Box的简写)，即“弹性布局”，可以简便、快捷的实现各种复杂布局。实现flex布局，首先需要申明display: flex或者display:inline-flex;

       当设置元素的display:flex后，子元素的float、clear和vertical-align属性将失效。

二、Flex布局的6个属性

1、flex-direction：该属性决定主轴的方向。可取的值有：row | row-reverse | column | column-reverse

2、flex-wrap：决定元素是否支持换行。可取的值有：nowrap（默认值） | wrap | wrap-reverse，其中，                           wrap-reverse会换行，但是第一行会在最下面。

3、flex-flow：flex-direction和flex-wrap的简写，等于flex-flow：[ flex-direction ] || [ flex-wrap ]。

4、justify-content：决定了元素内容的对齐方式。可取的值有：flex-start | flex-end | center | space-                                          between | space-around。

     flex-start：默认值，即头部对齐。          

     flex-end：即尾部对齐。             

     center：即居中对齐。              

     space-between：元素内容两端对齐，中间等间距分开。

space-between

     space-around：元素内容等间距分开。

space-around

5、align-items

：决定了元素在交叉轴方向的对齐方式。可取的值有：flex-start | flex-end | center |                                       baseline | stretch。

     flex-start：即顶端对齐。

     flex-end：即低端对齐。

     center：交叉轴方向上居中对齐。

     baseline：第一行文字的基线对齐。

     stretch（默认值）：如果元素未设置高度，则占满整个容器。

6、align-content：当元素存在多条轴线时，并且flex-wrap:wrap时，设置多条轴线之间的对齐方式。可能的取值有：flex-start | flex-end | center | space-between | space-around | stretch。

     flex-start：即头部对齐。

     flex-end：即尾部对齐。

     center：即居中对齐。

     space-between：元素内容两端对齐，中间等间距分开。

space-between

     spce-around：元素内容等间隔分开。

spce-around

    stretch（默认值）：如果元素未设置高度，则占满整个容器。

二、Flex项目的6个属性

1、order：该值的大小决定了元素的排列顺序。值越小，元素越靠前。

代码

效果图

2、flex-grow

：该值的大小决定了元素分配剩余空间的大小，默认值为0，即存在剩余空间也不会放大。

代码

效果图

3、flex-shrink：该值的大小决定了当空间不足时，元素的缩小比例。默认值为1，当空间不足时，元素将                             缩小，如果值为0时，则即使空间不足也不会缩小（前提是flex-wrap:nowrap）。

代码

效果图

4、flex-basis

：作用于flex-item，作用和width差不多，为了规范和统一，所以用这种形式写。如果同时设                          置了flex-basis和width，flex-basis起作用。

5、flex：该属性是flex-grow、flex-shrink和flex-basis的缩写，默认值是0 1 auto。