parent属性
1.display:flex;
这定义了一个flex容器; 内联或阻止取决于给定的值。它为所有直接孩子提供了灵活上下文。
注：css列对flex容器没有影响
2.flex-direction:row | row-reverse | column | column-reverse;
row（默认）：从左到右ltr; 从右到左rtl
row-reverse：从右到左ltr; 从左到右rtl
column：同样row但从上到下
column-reverse：同样row-reverse但从下到上
3.flex-wrap:nowrap | wrap | wrap-reverse;
nowrap （默认值）：所有弹性项目都在一行上
wrap：flex项目将从上到下包裹到多行。
wrap-reverse：flex项目将从下到上包裹多行
4.flex-flow:<‘flex-direction’> || <‘flex-wrap’>
这是flex-direction和flex-wrap属性的简写，它们共同定义了flex容器的主轴和交叉轴。默认值为row nowrap
5.justify-content：flex-start | flex-end | center | space-between | space-around | space-evenly;
flex-start （默认值）：项目朝起始行打包
flex-end：物品被打包到最后一行
center：项目沿着线居中
space-between：物品均匀分布在线上; 第一项是在起始行，最后一项是在结束行
space-around：项目均匀分布在线条周围，空间相等。请注意，视觉上空间不相等，因为所有项目在两侧都有相等的空间。第一个项目将在容器边缘上有一个空间单位，但在下一个项目之间有两个单位的空间，因为下一个项目有自己适用的间距。
space-evenly：项目是分布的，以便任何两个项目之间的间距（和边缘的空间）相等
6.align-items:stretch | flex-start | flex-end | center | baseline;
stretch （默认）：拉伸以填充容器（仍然尊重最小宽度/最大宽度）
flex-start：项目的交叉开始边距边缘放置在交叉起始线上
flex-end：项目的跨端边缘位于交叉线上
center：项目以横轴为中心
baseline：项目已对齐，例如其基线对齐
7：align-content：flex-start | flex-end | center | space-between | space-around | stretch;
flex-start：行打包到容器的开头
flex-end：行打包到容器的末尾
center：行包装到容器的中心
space-between：线条均匀分布; 第一行是容器的开头，而最后一行是在容器的最后
space-around：线条均匀分布，每条线周围的空间相等
stretch （默认值）：线条拉伸以占用剩余空间
子属性
1.order:<integer>;
order属性控制它们在Flex容器中的显示顺序。
2.flex-grow:<number>;
这定义了Flex项目在必要时增长的能力。它接受一个无比的值作为一个比例。它规定了项目应占用的Flex容器内可用空间的大小。
如果所有项目都flex-grow设置为1，则容器中的剩余空间将平均分配给所有子项。如果其中一个孩子的值为2，则剩余空间占用的空间是其他孩子的两倍
注：负数无效
3.flex-shrink:<number>;
这定义了Flex项目在必要时缩小的能力。
注：负数无效
4.flex:none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
这是速记flex-grow, flex-shrink和flex-basis组合。第二个和第三个参数（flex-shrink和flex-basis）是可选的。默认是0 1 auto。
5.align-self:auto | flex-start | flex-end | center | baseline | stretch;
flex-start：项目的交叉开始边距边缘放置在交叉起始线上
flex-end：项目的跨端边缘位于交叉线上
center：项目以横轴为中心
baseline：项目已对齐，例如其基线对齐
stretch （默认值）：线条拉伸以占用剩余空间
网友评论