css的flxd弹性布局属性学习总结

1、Flex 布局是什么？答：Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ display: flex;}行内元素也可以使用 Flex 布局。.box{ display: inline-flex;}

2、 采用 Flex 布局的元素，称为 Flex 容器（flex 罕铞泱殳container），简称"同柙丕牌容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

5、flex-flow　 是flex-direction和flex-wrap的简写形式，如：row wrap|column wrap-reverse等。默认值为row nowrap，即横向排列 不换行。

6、justify-content　　决定item在主轴上的对齐方式，可能的值有flex-start（默认），flex-end，center，space-between，space-around。当主轴沿水平方向时，具体含义为　　　　　　flex-start：左对齐　　　　　　flex-end：右对齐　　　　　　center：居中对齐　　　　　　space- between：两端对齐　　　　　　space-around：沿轴线均匀分布

8、align颍骈城茇-content　　该属性定义了当有多根主轴时，即item不止一行时，多行在交叉轴轴上的对齐方式。注意当有多行时，定义了align-content后，align-items属佣甲昭宠性将失效。align-content可能值含义如下（假设主轴为水平方向）：　　　　　　flex-start：左对齐　　　　　　flex-end：右对齐　　　　　　center：居中对齐　　　　　　space- between：两端对齐　　　　　　space-around：沿轴线均匀分布　　　　　　stretch：各行将根据其flex-grow值伸展以充分占据剩余空间