所有刚开始学习flexbox的同学，看到网上面的教程的时候很尴尬，不知道那些各种举例是怎么来的，刚开始的时候我也不知道，后来发现其实很简单。步骤就是：创建一个css文件，然后在css文件里面随便定义一个样式，例如：.class{ } #id{ } 或者 body{ }（不清楚的同学清自行搜索基本选择器的用法） 。然后在里面敲上这么一行代码：｛display:flex｝, 现在你的选择器所绑定的这个元素就已经是一个flex容器（flex container）了，需要注意的是，当你的元素使用了flex布局之后，它的所有子元素都自动成为容器成员，称为flex项目（flex item），同时它当中的子元素的float、clear、vertical-align属性就失效了。
由于笔者也是小白，摸着石头过河，所以还特意去查了float、clear和vertical-align这三个属性。
下面的这些解释都是在www.w3school.com上面找的。
float定义和用法
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注：跟在position属性里面设置absolute不同的是，float属性所谓的悬浮还是要占位置的。
笔者的理解是，虽然我上天了，但我身下的这块地还是我的。
clear定义和用法
clear属性规定元素的哪一侧不允许其他浮动元素。
注：就是字面的意思，clear可以设置成下面五个值中的任意一个：left right both none inherit。none是允许两边出现浮动元素，both是两边都不允许出现浮动元素。Inherit是指从父元素中去继承clear的值。
vertical-align定义和用法
vertical-align 属性设置元素的垂直对齐方式。
说明
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
注：这个听起来好像有点抽象，其实意思就是如果在一行内出现了一个高度大于整个行高的图片（缩略图、或者是icon），我们能规定这个高于行高的图片到底是向上凸出还是向下凸出。这里，我觉得我们从它有可能的值上面去看，更容易理解。
其具体参数如下(www.w3school.com)：
baseline |
默认。元素放置在父元素的基线上。 |
sub |
垂直对齐文本的下标。 |
super |
垂直对齐文本的上标 |
top |
把元素的顶端与行中最高元素的顶端对齐 |
text-top |
把元素的顶端与父元素字体的顶端对齐 |
middle |
把此元素放置在父元素的中部。 |
bottom |
把元素的顶端与行中最低的元素的顶端对齐。 |
text-bottom |
把元素的底端与父元素字体的底端对齐。 |
length |
|
% |
使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 |
inherit |
规定应该从父元素继承 vertical-align 属性的值。 |
Flexbox的基本概念
Flexbox布局依赖于flex directions，简单的说：Flexbox是一个布局模块，而不是一个属性。
Flexbox存在两个方向的布局：主轴（main axis）和副轴（cross axis 侧轴/交叉轴）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做 main end。同理，侧轴的开始位置叫做corss start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的侧轴空间叫做cross size。
Flexbox的基本属性
Flexbox的属性可以分为flex container属性和flex item属性两类。他们分别对应的是父容器和子元素。
Flex container属性主要包含以下几个方面。
Flex-dirction Flex-wrap Flex-flow justify-content align-content align-items
Flex-dirction：决定主轴的方向（即项目的排列方向）
Column：主轴的垂直方向，起点是上沿。
Column-reverse：主轴为垂直方向，起点是下沿。
Row（默认值）：主轴是水平方向，起点是左端。
Row-reverse：主轴为水平方向，起点是右端。
Eg：.box{
Flex-direction: row | row-reverse | column | column-reverse
}
Flex-wrap:设置是否换行排列
Nowrap（默认值）：不换行
Wrap：换行，第一行在上方
Wrap-reverse：换行，第一行在下方。
Flex-flow：是flex-direction属性和flex-wrap属性的简写形式，默认值是row||nowrap（“||”或，表示flex-direction和flex-wrap必须至少有一个，两者之间使用空格隔开，属性请参照上面。）
Eg：.box{
Flex-flow:row || nowrap;
}
Justify-content属性
Justify-content属性定义了项目在主轴上的对齐方式。
它可能的取值有5个，具体对齐方式与轴的方向有关。下面假设主轴从左到右。
Flex-start（默认值）：左对齐
Flexend：右对齐
Center：水平居中
Space-between：两端对齐，项目之间的间隔都相等。
Space-around：每个项目的两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍（亲测，确实如此）。
Eg：.box{
Justify-content:flex-start | flex-end | center | space-between | space-around
}
注：这里的‘|’意思是隔开的意思，不是或运算，这里面的值只能取一个，下同。
Align-content属性
Align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。它可能取6个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
Flex-start：交叉轴的起点对齐
Flex-end：交叉轴的终点对齐
Center：交叉轴的中点对齐
Space-between：与交叉轴的两端对齐，项目之间的间隔都相等。
Space-around：每个项目的两侧的间隔相等。所以，轴线之间的项目之间的间隔比项目与边框的间隔大一倍（亲测，确实如此）。
Stretch（默认值）：轴线占满整个交叉轴。
注：上面标黑的字体，请注意，要想这个能出效果，你的子元素在flex-wrap设置为wrap的情况下务必要多弄几个，如果只有一行（也就是一根轴线）的话，完全看不到效果哦。
Eg：｛
Align—content：:flex-start | flex-end | center | space-between | space-around | stretch
｝
注：跟justify-content的属性值是差不多的，唯一一个不同的值就是stretch这个值。
Align-items属性
Align-items属性定义项目在交叉轴上（副轴）如何对齐。
它可能的取值有5个。具体的对齐方式和交叉轴的方向有关，下面假设交叉轴从上到下。
Flex-start：交叉轴的起点对齐。
Flex-end：交叉轴的终点对齐。
Center：交叉轴的中点对齐。
Baseline：项目的第一行文字的基线对齐。
Stretch（默认值）：如果项目未设置高度或者设为auto，将占满整个容器高度。
Eg：｛
Align-items: flex-start | flex-end | center | baseline | stretch
｝
Flex item
这6个属性是设置在项目上的。Order、flex-grow、flex-shrink、flex-basis、flex、align-self
Order属性
默认情况下子元素的排列方式按照文档流的顺序依次排开，而order属性可以控制排列的顺序，负值在前，正值在后（一维坐标有点像），按照从小到大的顺序依次排列。跟z-index有可以类比的地方，z-index表现在出现元素叠加时，z-index的值越大，一般z-index相对最大的那个元素会展示在我们的眼前。
Flex-grow属性
Flex-grow属性定义项目的放大比例。默认为0，意思是说，就算还剩下很多的空间，项目也不会撑大去占满空间。
如果所有的项目的flex-grow属性都是1，则他们将平均瓜分所有的空间。
Flex-shrink属性
Flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果当所有的项目flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink的属性为0，其他的项目都为1，则空间不足时，前者不缩小。负值对该属性无效。
Flex-basis属性
flex-basis属性定义了分配多余空间之前，子元素占据的main size 主轴空间，浏览器根据这个属性，极速那主轴是否还有多余空间。它的默认值是auto，即子元素的本来大小。
它可以设为跟width 或者height属性一样的值，则项目将占据固定的空间。
Flex属性
Flex属性就是flex-grow、flex-shrink 和flex-basis的简写，默认值是 0 1 auto。后两个属性可选。
该属性有两个快捷值 auto （1 1 auto）和none（0 0 auto）。
建议优先使用这个属性，而不是写单独三个分离的属性，因为浏览器会推算相关值。
Align-self属性
Align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items，如果没有父元素，则等同于stretch。
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
原文地址：https://blog.csdn.net/qq_23191031/article/details/53084017