CSSflexibleboxFlexboxlayoutFlexbox（弹性盒）是CSS3中引入的一种功能强大且兼容的布局方式。使用flexbox，可以轻松处理页面上的元素布局并创建可自动收缩和增长的动态用户界面。Flexbox模式只需添加display:flex;到元素的CSS，您可以使用其他flex属性来构建响应式页面。#box-container{display:flex;}Row,columnRowCulomn给一个元素添加display:flex属性，使它成为一个弹性容器，然后允许元素的项目按行或列排列。只需在父元素上添加flex-direction属性，并将属性值设置为row或column即可水平或垂直排列其所有子元素。创建一行将水平对齐子项，创建一列将垂直对齐子项。flex-direction的其他可选值是row-reverse和column-reverse。注意：flex-direction的默认值为row。#box-container{显示：flex;弹性方向：行；/*flex-direction:column*/}父元素对齐Align子元素排列的方向称为主轴。对于行，主轴水平贯穿每个项目；对于列，主轴垂直贯穿每个项目。关于如何沿主轴布置弹性项目，有多种选择。一个很常用的是justify-content:center;：即flex子元素排列在flex容器的中心。其他选项包括：flex-start：从flex容器的开头排列项目。对于行，它将项目移动到左侧，对于列，它将项目移动到顶部。如果未设置justify-content的值，则这是默认值。flex-end：从flex容器的结束位置开始排列项目。对于行，它将项目移动到右侧，对于列，它将项目移动到底部。space-between：项目之间以一定的距离沿主轴居中。第一个和最后一个项目放置在容器的边缘。例如，在一行中，第一个项目将与容器左侧对齐，最后一个项目将与容器右侧对齐，然后其余项目将均匀分布。space-around：和s??pace-between类似，但是第一个和最后两个item不会靠近容器的边缘，所有item之间的空间会均匀排列。space-evenly：第一个和最后两个item不会靠近容器边缘，所有item之间的空间会均匀排列。#box-container{justify-content:center;}在Flex容器中，垂直于主轴的称为交叉轴（crossaxis）。行的横轴是垂直的，列的横轴是水平的。CSS中的align-items属性用于定义flex子元素沿交叉轴的对齐方式。对于行，它定义了元素的上下对齐方式；对于列，它定义了元素的左右对齐方式。align-items的可选值包括：flex-start：从flex容器的开头对齐项目。对于行，将项目移动到容器的顶部；对于列，将项目移动到容器的左侧。flex-end：从flex容器的末尾对齐项目。对于行，将项目移动到容器的底部；对于列，将项目移动到容器的右侧。中心：将项目居中。对于行，垂直居中（项目从顶部和底部等距）；对于列，水平居中（项目从左侧和右侧等距）。stretch：拉伸项目以填充弹性容器。例如，排列的项目从容器的顶部延伸到底部。如果未设置align-items的值，则这是默认值。基线：沿基线对齐。基线是一个文本相关的概念，可以认为是字母顺序排列的下基线。#box-container{align-items:center;}WrapCSSflexbox具有将弹性项目拆分为多行（或多列）的功能。默认情况下，弹性容器会调整项目的大小，将它们塞在一起。对于行，所有项目都将在一条直线上。但是，使用flex-wrap属性允许项目换行。这意味着额外的子元素被移动到新的行或列。发生换行的断点由子元素和容器的大小决定。换行方向可选值如下：nowrap：默认值，无换行。wrap：如果按行排列，则从上到下排列该行；如果排列基于列，则从左到右排列列。wrap-reverse：如果按行排列，则将行从下往上排列；如果排列基于列，则从右到左排列列。#box-container{flex-wrap:wrap;}ShrinkShrink上面提到的属性都是作用于flex容器（flex子元素的父元素）。此外，flex子元素还有很多有用的属性。首先是flex-shrink属性。使用后，如果flex容器太小，子元素会自动收缩。当容器的宽度小于里面所有子元素的宽度之和时，会自动压缩所有子元素。flex-shrink子元素接受一个数值作为属性值。值越高，元素与其他元素相比压缩得越多。例如，如果一个项目的flex-shrink属性值为1，而另一个项目的flex-shrink属性值为3，则后者将比前者压缩3倍。#box-1{flex-shrink:1;}#box-2{flex-shrink:2;}ExpandGrowflex-shrink的反义词是flex-grow。flex-grow会在容器过大时调整子元素。如果一个项目的flex-grow属性值为1，而另一个项目的flex-grow属性值为3，则值为3的项目将比另一个增长3倍。#box-1{flex-grow:1;}#box-2{flex-grow:2;}InitialsizeBasisflex-basis属性定义了在使用CSSflex-shrink或flex-grow之前如何调整元素特性。元素的初始大小。flex-basis属性的单位与其他表示尺寸（px、em、%等）的属性的单位相同。如果值为auto，则项目的大小会根据内容进行调整。#box-1{flex-basis:10em;}#box-2{flex-basis:20em;}ShorthandShorthand上面的flex属性有一个简写。flex-grow、flex-shrink和flex-basis属性可以在flex中一起设置。例如，flex:1010px;会将项目属性设置为flex-grow:1;,flex-shrink:0;和flex-basis:10px;.该属性的默认设置是flex:01auto;。#box-1{flex:22150px;}#box-2{flex:11150px;}重新排列Rearrangeorder属性告诉CSSflex子元素在容器中的顺序。默认情况下，项目的排序顺序与源HTML文件中的顺序相同。此属性接受数字作为参数，并且可以使用负数。#box-1{order:2;}#box-2{order:1;}子元素对齐Alignalign-self。此属性允许在不影响所有子元素的情况下调整单个子元素本身的对齐方式。此属性很有用，因为任何对齐调整属性（如浮动、清除和垂直对齐）都不能应用于flex子项。align-self可以设置为与align-items相同的值，它会覆盖align-items设置的值。#box-1{align-self:center;}#box-2{align-self:flex-end;}
