这些是我在MDN教程上的学习笔记，教程地址 ：https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

注：不能作为教程看，只能作为温习笔记看，要看教程请去上面链接或者其他教程资源。

flexbox是线性排布的，不是横就是竖（宽度不够会换行）。

在要flexbox的div容器上写display:flex，这样子元素就变成flex元素了，默认水平排布（有一些文字竖着读的国家，排布方式就是垂直）。

display:inline-flex就会让容器像inline的特性一样，但是其内部内容还是flex的。

下图是flex容器的布局方式（默认是水平排布，也就是main axis的方向）：

以下css属性是在flex容器上设置的：

flex-direction属性可以设置为column，row（默认），row-reverse和column-reverse。

flex-wrap属性可以设置为wrap和no-wrap(默认)，当flex容器内元素太多超出宽度的时候，wrap的话就会换行，no-wrap则会溢出。

flex: 200px可以设置flex元素的最小宽度为200px，容器不够大时，看flex-wrap属性选择换行或者溢出；换行后，新行如果有多余空间，新行的元素会使用掉。

flex-flow:row wrap 可以快捷设置flex-direction和flex-wrap。

对齐设置

align-items属性（flex容器上设置）可以设置的值为：

　　stretch　　（默认，cross-axis方向拉伸整个高度），

　　center　　（cross-axis方向的中间，就是高度中间），

　　flex-start　（cross-axis方向的开始，就是顶边），

　　flex-end 　（cross-axis方向的结束，就是底边）。

单独为某个flex元素设置不同的cross-axis方向的对齐方式，使用align-self，取值和align-items一样。

 justify-content属性（flex容器上设置）设置main-axis方向也就是水平的对齐方式，值为：

　　flex-start（默认，靠左边）

　　flex-end（靠右边）

　　center（靠中间）

　　space-around（均匀分布并且相邻和左边边都有空白隔开）

　　space-between（均匀分布，仅相邻之间元素有空白隔开)

　　space-evenly（均匀分布，相邻之间的空白宽度和左右两边的空白宽度都一样大）。

以下css属性是在flex元素上设置的：

在flex元素上设置flex:1;属性，可以使其宽度在整个容器内占比为1。

order属性可以设置元素排列顺序，值越大排越后边，默认为0，可以是负值。

justify-self和align-self可以单独为这个元素设置main-axis和corss-axis的对齐方式，取值和align-items和justify-content一样。