柔性布局. box {
height: 300px；
background-color: #ccc；
/*请重点记住以下三点。 display :闪存； 内容：中心； align-items3360中心； */
设置为flex容器*
display :闪存；
/*设置(主轴)水平对位方式) /
内容：中心；
/*设置(侧轴)垂直对准方式) /
align-items3360中心；
/*灵活直接：原始； */
/* flex-wrap: wrap； */
/*以上两种复合写法如下*
/* flex-flow : row-reversewrap； */
/*对齐内容：拉伸； */
}
. boxdiv {
/*以前学过的设置的排列方法*
/* display :在线块； */
/*浮动：左； */
width: 100px；
height: 100px；
background-color: red；
border : 1px固态黑；
}
/*清除浮动*
//box:3360after{
内容： none；
显示：块；
clear: both；
) /
div1div2div3div4div5div 6http://www.Sina.com /特性用于控制上图中伸缩容器中主轴的方向，并确定伸缩项目的方向。
1 .灵活直接：原始； 也是默认值。 也就是说，主轴的方向与通常的方向相同，从左向右排列。
2 .闪存直接：行还原； 与row的方向相反，从右向左排列。
3 .灵活目录：列； 从上到下排列。
4.flex-direction :列还原； 从下到上排列。 以上只以ltr表示为对象，关于rtl则正好相反。
flex-direction属性控制伸缩容器是单行还是多行，还确定侧轴方向(新一行的堆叠方向)。
1.flex-wrap:nowrap； 伸缩容器单行显示，默认值；
2.flex-wrap:wrap； 使容器伸缩以显示多行的伸缩项目的各行的排列顺序为从上到下的顺序。
3.flex-wrap:wrap-reverse； 伸缩容器显示为多行，但伸缩项目各行的排列顺序从下到上依次排列。
flex-wrap属性是flex-direction (主轴方向)和flex-wrap (侧轴方向)的缩写，两个属性决定伸缩容器的主轴和侧轴。
flex-flow : [ flex-direction ] [ flex-wrap ]； 默认值为row nowrap
举两个栗子：
flex-flow:row； 也是默认值； 主轴为行内方向，单行显示，不换行；
flex-flow:row-reverse wrap； 主轴与行内方向相反，从右向左，项目的各行从上到下排列。
flex-flow用于定义伸缩项目在主轴上的对齐方式。 仅当一行中的所有伸缩项目都不可伸缩或伸缩，但达到最大长度时，此属性才分配额外的空格。 当项目充满行时，此属性控制项目的对齐方式。
1.justify-content : flex-start； 伸缩项目开始朝向主轴的起始位置对齐，后面的每个元素紧邻前一个元素对齐。
2.justify-content: flex-end； 拉伸项目与主轴的结束位置对齐，前一个元素紧邻下一个元素对齐。
3 .作业内容：中心； 伸缩项目位于主轴上方的中心，从第一个元素到主轴起点的距离与从最后一个元素到主轴终点的位置相同。 上述3的“捆绑”均位于左、右、中央。
4.justify-content : space-between； 伸缩项目均匀分布在主轴的正上方，第一个元素和主轴的起点紧邻，最后一个元素和主轴的终点紧邻，中间剩下的伸缩项目等分，使两个元素的间隔相等。
5.justify-content :空间阵列； 伸缩项目均匀分布在主轴上，从第一个元素到主轴起点的距离和从最后一个元素到主轴终点的距离相等，等于中间元素两个间隔的一半。 完美的均匀分配，这种布局在阿里系很常见。
justify-content定义伸缩项目在侧轴上的对齐方式。 这类似于“[justify-content]”特性，但是另一个方向。
(flex-directon和flex-wrap是一对，justify-content和align-items是一对，前者定义主轴和侧轴的对齐方法，后者定义主轴和侧轴项目的对齐方法。
1.align-items:flex-start； 拉伸项目远离侧轴起始边外部且与侧轴起始边相邻的行。
2.align-items:flex-end； 将拉伸项目放置在侧轴终点的边之外，使其行与侧轴终点的边相切。
3.align-items3360中心； 伸缩项目外部的距离位于侧轴的中央。
4.align-items :基线； 如果伸缩项目的内联轴和侧轴相同，则此值等于“灵活开始”。 在其他情况下，此值参与基线对齐。
5.align-items:stretch； 伸缩项目将伸缩容器整体拉伸填充。 该值表示根据最小/最大宽度/高度属性的限制，项目外部的框尽可能接近行的大小。
align-items属性允许您调整伸缩行在伸缩容器中的对齐方式。 这与用于调整伸缩项目在主轴上对齐方式的“[justify-content]”特性类似。 但是，这里元素以1行为单位。 请注意，此属性对于只有一行的伸缩容器无效。 使用flex-wrap:wrap可以产生多行效果。
1 .对齐内容：拉伸； 缺省情况下，每行会拉伸以占用剩馀的空间。
2 .其他请参考justify-content的使用方法。
一键复制
编辑
网络ide
原始数据
按行显示
历史