css布局----flex弹性布局（完美的移动端解决方案）

效果图如下：2,-Flexbox的两个根轴在使用flex布局时，首先想到的两个轴是主轴和交叉轴。主轴由flex-direction定义，另一个轴垂直于它。我们使用flexbox的所有属性都与这两个轴相关，所以在开始的时候先了解一下是很有必要的。主轴主轴由flex-direction定义，可以取4个值：rowrow-reversecolumncolumn-reverse如果你选择row或row-reverse，你的主轴将沿着inline方向延伸。如果您选择row或row-reverse，您的主轴将沿行内方向延伸。当您选择column或column-reverse时，您的主轴将沿上下方向延伸，即块排列的方向。Crossaxis[](https://developer.mozilla.org...crossaxis是垂直于主轴的，所以如果你的flex-direction(主轴)设置为row或row-reverse，则crossaxis是alongColumnsdown，如果设置主轴方向为column或column-reverse，则横轴为水平方向。理解主轴和横轴的概念对于flexbox中的元素对齐非常重要；flexbox特征是沿主轴或交叉轴对齐的元素。flex容器文档中使用flexbox的区域称为flex容器。创建flex容器，我们将容器的display属性值改为flex或inline-flex.经过这一步之后，其直接子元素就会变成flex元素，所有的CSS属性都会有一个初始值，所以flex容器中的所有flex元素都会有如下行为：元素排列成一行（初始值为flex-direction属性为row).元素从主轴的起始行开始。该元素不会在主维度上拉伸，但可以收缩。元素被拉伸以填充横轴大小。flex-basis属性是自动的。flex-wrap属性是nowrap。这将使您的元素线性排列，并以它们自己的大小作为主轴的大小。如果过多的元素超出了容器，它们就会溢出而不会换行。如果某些元素比其他元素高，则元素将沿交叉轴拉伸。填充它的大小。flex布局显示的主要API：flex；指定元素应该生成flex的类型，直接子元素将成为flex元素flex-direction:row|栏目|行反转|列反转；改变flex的方向为了更好的控制flex元素，可以作用于它们的属性有3个：在使用这三个属性之前，我们先简单了解一下可用空间的概念。flex-grow定义了元素可用空间的基准值。此属性的默认值为auto。此时，浏览器会检查这个元素是否有一定的大小。在上面的例子中，所有元素的宽度都是100px，所以flex-basis的值是100px。如果没有为元素指定大小，则flex-basis的值采用元素内容的大小。这就解释了：我们只需要为Flex元素的父元素声明display:flex，所有的子元素就会排成一行，并自动分配大小，充分显示元素的内容。flex-shrinkflex-grow如果指定一个正整数，则flex元素将基于flex-basis沿主轴增大尺寸。这会导致元素拉伸并占据该轴上可用的布局空间。如果其他元素也被允许拉伸，它们将各自占据布局空白的一部分。如果我们在上面的例子中将所有元素的flex-grow值设置为1，那么容器中的布局空间将被这些元素平分。它们膨胀以填充容器主轴的空间。flex-grow属性可以按比例分配空间。如果第一个元素的flex-grow值为2，其他元素的值为1，则第一个元素将占据2/4（上例中为200px中的100px），其他两个元素将各自占据1/4（每个50像素）。flex-basis属性flex-basis指定了flex元素在主轴方向的初始尺寸。如果你不使用box-sizing来改变盒子模型，那么这个属性决定了flex元素的content-box的宽度或高度（取决于主轴的方向）。"为了编码方便，这三个属性通常混合在一起写成flex的简写形式：;}#flex-box>div{flex:11auto;/*参数从左到右分别是flex-grow,flex-shrink,flex-basis*/background:#5990dc;margin:20px;padding:40px;}

block1

block2

block3