这篇文章记录了我学习前端的笔记，方便以后复习巩固。开始使用Flex
在父元素中显式设置display:flex或者显示：inline-flex/*将父元素声明为flex容器*/ul{display:flex;/*orinline-flex*/}效果如下图：默认情况下，div在CSS中是垂直的，如下图：关键词：弹性容器（FlexContainer）：父元素显式设置显示:flexFlexItems（弹性项目）：Flex容器中的子元素Flex容器属性flex-direction||弹性包装||弹性流||证明-content||对齐项目||align-contentflex-directionflex-direction属性控制弹性项目沿主轴（MainAxis）的对齐方式。flex-direction属性可让您确定弹性项目的排列方式。它可以是行（水平）、列（垂直）或相反的方向。它有四个值：/*ul是一个弹性容器*/ul{flex-direction:row||专栏||行反转||column-reverse;}主轴和侧轴：主轴可以理解为水平方向，横轴为垂直方向。Main-Axis是水平方向，从左到右，也是默认的方向。Cross-Axis是垂直方向，从上到下。默认情况下，flex-direction属性的值为行。它沿主轴（从左到右，水平）排列Flex项目。如果将flex-direction属性的值改为column，则Flex项目将沿Cross-Axis从上到下垂直排列。它不再从左到右水平排列。如果在flex-direction属性的值上加上reverse，比如ul{flex-direction:row-reverse;}如下图：ul{flex-direction:column-reverse;}如图下面：flex-wrapflex-wrap属性有三个属性值：ul{flex-wrap:warp||现在包装||wrap-reverse;}flex-wrap的默认属性是nowrap。也就是说，弹性项目不会包裹在弹性容器中。ul{flex-wrap:nowarp;/*flex容器中的flex项目不换行*/}当你希望flex容器中的flex项目达到一定数量时，可以换行。当弹性容器中没有足够的空间放置弹性项目（弹性项目的默认宽度）时，弹性项目将被包裹起来。可以将其(flex-wrap)值设置为wrap:ul{flex-wrap:wrap;}现在flex项目将在flex容器中排列成多行。在这种情况下，当一行不能包含所有列表项的默认宽度时，它们将排成多行。即使调整了浏览器的大小。注意：弹性项目现在以默认宽度显示。也没有必要强制要求一行有多少弹性项目。flex-wrap还有一个值：warp-reverse，允许flex项目在容器中多行排列，但是方向是相反的flex-flowflex-flow是flex-direction和flex-direction这两个属性的简写属性弹性包装。就像borderul{border:1pxsolid#ccc;弹性流：行换行；/*第一个值是flex-flow的值，第二个是flex-direvtion的值*/}justify-contentjustify-content属性可以接受以下五个值之一ul{justify-content:flex-开始||弹性端||中心||空格||space-around}justify-content属性主要定义Flex项目在Main-Axis对齐方式上。你可以想象文本对齐属性。各个属性的作用如图：这两个属性值可以放在一起理解。flex-start使所有弹性项目从主轴边缘开始（左对齐）flex-end使所有弹性项目在主轴末端边缘结束（右对齐）center使所有弹性项目在Main的中间排列-Axis(center-aligned)space-between使它们之间的空间相同，除了第一个和最后一个flex-item(justify)space-aroundmakeeveryflex-itemhavethesamespace。align-itemsalign-items属性可以接受这些属性值ul{align-items:flex-start||弹性端||中心||拉伸||baseline}主要用于控制Flex项目在Cross-AxisWay垂直方向的对齐方式。这也是align-items和justify-content属性之间的区别。flex-start/baseline：flex项目在cross-start边的外边距在cross-start点靠近line的边。flex-end：flex项目在横轴末端的外边距靠在横轴末端的线的边缘。center：弹性项目的边距框在行的横轴上居中。（如果flex行的大小小于flex项目，则flex项目在两个方向溢出相同的量）。stretch：弹性项目被拉伸以填充整个侧轴。align-contentflex-start：每行向柔性容器的起始位置堆叠。位于横轴起点的柔性容器中第一行的边缘将接触位于横轴起点的柔性容器的边缘，并且每个后续行都将靠近前一行。flex-end：行向flex容器的末端堆叠。弹性容器中最后一行的交叉端边缘将接触弹性容器的交叉端边缘，并且前一行将接触下一行。center：行向flex容器的中间堆叠。行成对靠近在一起，同时在flex容器中居中，保持flex容器的内容边缘在横轴起始侧和第一行之间的距离与容器的内容边缘在横轴末端边缘和最后一行之间的距离是平等的。（如果剩余空间为负，则行堆栈在两个方向上溢出相等的距离。）space-between：行在flex容器中均匀分布。如果剩余空间为负数或者flex容器中只有一行，这个值就相当于“flex-start”。在其他情况下，cross-start侧的第一行将靠近cross-start侧的flex容器的内容侧，而cross-end侧的最后一行将靠近flex容器的内容侧cross-endside，其余行的排列同时保持每对之间的空间相等。space-around：行在flex容器中均匀分布，每边各占一半的空间。如果剩余空间为负数或弹性容器中只有一行，则此值等同于“center”。在其他情况下，每对行之间的间距相等，第一行之前的间距减半，最后一行之后的间距减半。stretch：线条将伸展以占据剩余空间。如果剩余空间是负数，这个值相当于“flex-start”。在其他情况下，剩余空间在所有行之间平均分配，从而扩大每行的横轴大小。弹性项目属性顺序||弹性增长||收缩||flex-basisorderoredr允许弹性项目在弹性容器中重新排序。基本上，您可以更改弹性项目的顺序，将它们从一个位置移动到另一个位置。这不会影响源代码。这也意味着HTML源代码中弹性项目的位置不需要改变。order属性的默认值为0。它可以接受正值和负值。值得注意的是，弹性项目是根据订单价值重新排序的。从下到上。
默认所有flexitem的order值为为0。应用先前给列表的样式。看到的效果如下：flexitems按照html源码的顺序显示，flexitems1,2,3,4.li:nth-child(1){order:1}Flexitems重新排列，从从低到高。不要忘记，默认情况下，弹性项目2、3和4的顺序值为0。现在弹性项目1的顺序值为1，弹性项目2、3和4的顺序值为0。HTML源代码顺序没有修改。如果flexitem2的order设置为2呢？是的，你猜对了。它还增加了堆栈。现在代表弹性项目的最高订单值。flex-grow和flex-shrinkflex-grow和flex-shrink属性控制flex项目在容器中有额外空间时如何增长，以及在没有额外空间时如何收缩。它们可以接受任何0或大于0的正值，0的值就是1看下图会让你更好的理解当flex-shrink值为0时，它们不会收缩，会保持原来的大小注意:负数无效flex-basis属性与width和height属性相同，用于指定flexitem的大小。-item{flex-bassis:auto||
;}flex-basis指定第四个弹性项目的初始大小。默认值：autoflex该属性是flex-grow、flex-shrink和flex-basis的简写。.flex-item{flex:无|汽车|[?||弹性项目本身的对齐方式或使用align-items指定单个弹性项目。使用align-items对齐来解释flex容器以更好地理解它们的值。.flex-item{对齐自我：自动|弹性启动|弹性端|中心|基线|stretch;}第三个和第四个弹性项目使用align-self属性来覆盖它们的默认对齐方式。默认值：auto注意：当align-self设置为auto时，flexitems的对齐方式将根据其父元素align-items来确定。如果其元素设置为stretch值或者没有父元素时，align-self的值为auto时不会对齐。版权属于作者。最后，如有错误和疑惑，请大佬们指出，谢谢各位大佬
