reviewOfFlexBox

对flexbox的学习总结，学习资源

文章是对自己点的以一些小结，主要是为了以后遗忘时可以回顾，若想学习，前面的学习资源的教程相当不错

1. when we set display:flex for the parent container,
   the child element will layout just like they have set
   the prototy of float
   HTML:

  <ul> 
   <li>1 Branding</li> 
    <li>2 Home</li> 
    <li>3 Services</li> 
    <li>4 About</li> 
    <li>5 Contact</li>
</ul>

ul{
 display: flex;
 border:1px solid red;
 list-style:none;
}
li{
 height: 100px;
 background-color: #8cacea;
 margin: 8px;
 padding: 4px;
}

image.png

2. the property of flex container

property	illustration
flex-direction	控制flex items的排列方向，值:row &clomn &row-reverse & clomn-reverse
flex-wrap	控制当flex container无法容下flex item时是否换行，值：wrap&nowrap&wrap-reverse
flex-flow	flex-direction和flex-wrap属性的缩写
justify-content	如同text-align控制，container中的items的排列方式，就像文字排版的首部对其，尾部对齐一般,控制items在main-axis上的排列方式值：flex-start & flex-end &center & space-between & space-around
align-items	控制cross-axis方向上的的首个item的位置，从而影响整体布局，值：flex-start & flex-end & center&space-between & space-around
align-content	控制cross-axis方向上多个items的布局，与justify-content类似，值：flex-start & flex-end & center & stretch & baseline

//test flex-direction
ul{
 display: flex;
 border:1px solid red;
 list-style:none;
 flex-direction:column;
}
li{
 height: 100px;
 background-color: #8cacea;
 margin: 8px;
 padding: 4px;
} 

//test flex-wrap
ul{
 display: flex;
 border:1px solid red;
 list-style:none;
 flex-direction:column;
 flex-wrap: wrap;
//wrap 当container无法容下items是不会换行，浏览器会出现滚动条
//nowrap 当container无法容下items时，自动换行，item依旧在container包裹的内部
//wrap-reverse 在这设置了wrap的效果下将上下颠倒,reverse使得main-axis的方向从下到上
}
li{
 height: 100px;
 background-color: #8cacea;
 margin: 8px;
 padding: 4px;
} 

//test justify-content
ul{
 display: flex;
 border:1px solid red;
 list-style:none;
 justify-content:flex-start;
//flex-start,从main-axis的左侧排列对齐
//flex-end。从main-axis的右侧排列对齐
//center.居中对齐
//space-between，item之间的距离大小大小相同
//sapce-around。每个item占据的空间相同，空间=元素所占空间+多出的空白空间的分配
}
li{
 height: 100px;
 background-color: #8cacea;
 margin: 8px;
 padding: 4px;
} 

// test align-items
ul{
 display: flex;
 border:1px solid red;
 list-style:none;
 align-items:flex-start;
//flex-start,从cross-axis的左侧排列对齐
//flex-end。从cross-axis的右侧排列对齐
//center.cross-axis轴居中对齐
//stretch，cross-axis轴,默认值，使得flex items的高度与container的高度相同
//baseline。cross-axis轴，使得flex item按器基线对齐
}
li{
 height: 100px;
 background-color: #8cacea;
 margin: 8px;
 padding: 4px;
} 

// test align-content

ul{
 display: flex;
 height:500px;
 border:1px solid red;
 list-style:none;
 flex-wrap:wrap;
 align-content:flex-start;
 //与前面的justify-content显示，值也是相同的，达到的效果也是相同的，
 //需要理解的区别是，justify-content控制main-axis上的多个item，仅仅看一行
 //align-content控制的是一列上的多个item,仅仅从一列上看，会发现其与justify-content几乎相同
//相比align-items，align-items其控制的是cross-axis上第一个item的位置，跟多的是针对首个item，
//而align-content更多针对的是多个item，就如同justify-content一样
}
li{
 // height: 100px;
 background-color: #8cacea;
 margin: 8px;
 padding: 4px;
 height:100px;
} 

//3.flex item property

property	illustration
order	当item设置了order之后，会根据order值的大小进行排列，如两个元素的order值大小相同，则元素在html中排在前的会依旧排在前面，item的某人order值为0
flex-grow	当container有多余空间时,如flex-grow的值为正值则item会填满多余的空间，当多个item都设置了flex-grow时，会根据比例将多余的空间分配给item
flex-shrink	当container的空间不足时，会缩小item的大小，多个item都设置值时，根据比例缩小。当值为0时，item则变成固定宽度，默认值为1
flex-basis	item的基本宽度，默认为auto

//test order
ul{
 display: flex;
 height:500px;
 border:1px solid red;
 list-style:none;
 flex-wrap:wrap;
}
li{
 background-color: #8cacea;
 margin: 8px;
 padding: 4px;
 height:100px;
} 

li:nth-child(1){
 order:1;
}
li:nth-child(2){
 order:1;
}

//align-self，该属性的是是针对目标item进行设定的，不会影响到其他的item

property	illustration
auto	继承container的的align-items属性
flex-start	开始对齐
flex-end	结尾对齐
center	居中
baseline	基线
stretch	延展，会布满整个container

注意：但给某个item设置margin:auto的时候，
该项目会占据所有的多余空间,并将多余空间平均分配到该item的两侧，
仅仅设置margin-left则将多余的空间都分配给该item的左侧，margin-right相同
另外在设置了margin:auto之后。container的justify-content将不起作用