对flexbox的学习总结，学习资源
文章是对自己点的以一些小结，主要是为了以后遗忘时可以回顾，若想学习，前面的学习资源的教程相当不错
- 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
- 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 ¢er & 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将不起作用
