1.声明Flex容器
父容器display:flex； 此时子容器的块状元素消失变成inline-block ，成为flex项目
flex-container 和flex-items
2.Flex容器的属性
flex-direction ：row || row-reverse ||center ||column ||column-reverse
让你决定Flex项目如何排列。它可以是行（水平）、列（垂直）或者行和列的反向(使项目整体排列)
flex-direction: row-reverse;
flex-direction: row;
flex-direction: column; /*竖直排列*/
flex-direction: column-reverse;/*反向竖直排列*/
flex-wrap 当项目充满容器是否换行
wrap 换行（默认）
nowrap 不换行
flex-flow：flex-direction flex-wrap的简写
justify-content :flex-start||flex-end||center||space-between||space-around
每个项目水平排列的样式
justify-content: flex-end; /*右边对齐*/
justify-content: flex-start; /*左边对齐*/
justify-content: center; /*居中对齐*/
justify-content: space-between; /*两端对齐 让除了第一个和最一个Flex项目的两者间间距相同（两端对齐）*/
justify-content: space-around; /*让每个Flex项目具有相同的空间。*/
align-items：flex-start||flex-end||center||stretch||baseline
每个项目竖直排列的样式
align-items: flex-end; /*底部*/
align-items: flex-start; /*顶部*/
align-items: center; /*中间*/
align-items: baseline;
height: 500px; /*使用align-items时注意给容器加上高度*/
align-content：和align-items相似
3.flex项目的属性
order || flex-grow || flex-shrink ||flex-basis ||align-self
order：显示的顺序数值越大越往后面显示
li:first-child{
order: 1;
}
li:nth-child(2){
order: 2;
}
flex-grow 控制有多余空间变大
0 代表关
1 开
flex-shrink 控制没有多余空间缩小
0 代表关
1 开
有两个弹性项目。一个的 flex-grow 属性值是 1，另一个是 2，那么会出现啥情况呢？
两个项目上的伸展开关都打开了。不过，伸展度是不同的，1 和 2。
二者都会填满可用空间，不过是按比例的。
它是这样工作的：前一个占 1/3 的可用空间，后一个占 2/3 的可用空间。
flex: 1 1 auto; /*能伸能缩*/
flex: 1 0 auto; /*能伸不能缩*/
flex: 0 0 auto; /*不能伸不能缩 固定宽度*/
flex: 0 1 auto; /*不能伸能缩*/
flex: 1 1 auto 根据内容决定大小
flex: 1 1 0 相同宽度
当在Flex项目上使用 margin: auto 时，值为 auto 的方向（左、右或者二者都是）会占据所有剩余空间
align-self:/*和align-iteams相似只是这个对于单个项目*/
网友评论