头脑导图
flex 规划
范例
- [ ] display: flex;(本文章为此为主)
- [ ] display；inline-flex;
属性
- [ ] 父节点 容器flex-container
- [ ] 子节点 flex-item
父节点容器
- flex-direction 主轴方向(平常程度方向)
- flex-warp 处置惩罚一行分列不足的题目
- flex-flow 1和2的简写（flex-flow: row nowrap）
- justify-content 主轴(程度方向)对齐体式格局
- align-items 与主轴的交织轴（竖方向）对齐体式格局
- align-content 多行在交织轴轴上的对齐体式格局
子节点项目
- order 值是整数，默以为0，整数越小，item分列越靠前
- flex-grow 是其他item的放大倍数
- flex-shrink 但空间不足，依据比例被消化, 需在父节点容器中设置flex-basis宽度
- flex-basis 划定item项目的宽度
- flex 是flex-grow flex-shrink flex-basis的总和
- align-self 许可item本身在交织轴(竖方向)有对齐体式格局
父节点容器
- flex-direction 主轴方向(平常程度方向)
- flex-warp 处置惩罚一行分列不足的题目
- flex-flow 1和2的简写（flex-flow: row nowrap）
- justify-content 主轴(程度方向)对齐体式格局
- align-items 与主轴的交织轴（竖方向）对齐体式格局
- align-content 多行在交织轴轴上的对齐体式格局
html案例代码：
<div class="flex-container">
<div class="flex-item red">
1
</div>
<div class="flex-item green">
2
</div>
<div class="flex-item yellow">
3
</div>
<div class="flex-item black">
4
</div>
</div>css案例代码：
html,body{
background: #f7f7f7;
}
.flex-container{
display: flex
color: #fff;
}
.flex-item{
width: 150px;
height: 100px;
}
.red{
background: red;
}
.green{
background: green;
}
.yellow{
background: yellow;
}
.black{
background: black;
}
flex-direction
决议主轴(平常是x轴)的方向，即项目分列的方向，有四个能够的值：row(默许)| row-reverse | column | column-reverse
- row:主轴为程度方向，项目沿主轴从左至右分列
- column：主轴为竖直方向，项目沿主轴从上至下分列
- row-reverse：主轴程度，项目从右至左分列，与row反向
- column-reverse：主轴竖直，项目从下至上分列，与column反向
.flex-container{
display: flex;
height: 100px;
flex-direction: row; /* 1 */
flex-direction: column; /* 2*/
flex-direction: row-reverse; /* 3*/
flex-direction: column-reverse;/* 4*/
color: #fff;
}
.flex-item{
flex: 1
}
flex-wrap
默许情况下，item分列在一条线上，即主轴上，flex-wrap决议当分列不下时是不是换行以及换行的体式格局，能够的值nowrap(默许) | wrap | wrap-reverse
- nowrap：自动减少项目，不换行
- wrap：换行，且第一行在上方
- wrap-reverse：换行，第一行在下面
.flex-container{
display: flex;
color: #fff;
flex-wrap: nowrap; /* 1 */
flex-wrap: wrap; /* 2 */
flex-wrap: wrap-reverse; /* 3 */
}
.flex-item{
width: 150px;
height: 100px;
}
.red{
width: 300px;
}备注： flex-item宽度定义分别是300px 150px 150px 150px; 所以依据比例2：1：1：1来支解父节点宽度，现实宽度为 150px 75px 75px 75px (算计375px)
flex-flow
是flex-direction和flex-wrap的简写情势，如：row wrap | column wrap-reverse等。默许值为row nowrap，即横向分列 不换行。
.flex-container{
flex-flow: row nowrap;
}组合：
| flex-flow | nowrap | wrap | wrap-reverse |
|---|---|---|---|
| row | 1、row nowrap | 5、row wrap | 9、row wrap-reverse |
| column | 2、column nowrap | 6、column wrap | 10、column wrap-reverse |
| row-reverse | 3、row-reverse nowrap | 7、row-reverse wrap | 11、row-reverse wrap-reverse |
| column-reverse | 4、column-reverse nowrap | 8、column-reverse wrap | 12、column-reverse wrap-reverse |
第一种：当flex-wrap设置为nowrap时，属性(宽度比例，非px现实宽度)依据flex-direction来分列
第二种：当flex-wrap设置为wrap时，item则依据现实宽度分列，不足则到下行
第三种：当flex-wrap设置为wrap-reverse时， item则依据现实宽度分列，不足则到上行
justify-content
非常重要，决议item在主轴上的对齐体式格局，能够的值有flex-start（默许），flex-end，center，space-between，space-around。
当主轴沿程度方向时，详细寄义为
- flex-start：左对齐
- flex-end：右对齐
- center：居中对齐
- space- between：两头对齐
- space-around：沿轴线均匀分布
备注： 当项目item不满父节点item-container时，flex-start, flex-end不起到作用
.flex-container{
justify-content: flex-start; /* 1 */
justify-content: flex-end; /* 2 */
justify-content: center; /* 3 */
justify-content: space-between; /* 4 */
justify-content: space-around; /* 5 */
}
.flex-item{
width: 50px;
height:50px;
}
align-items
决议了item在交织轴上(Y轴)的对齐体式格局，能够的值有flex-start | flex-end | center | baseline | stretch
当主轴程度(Y轴)时，其详细寄义为：
- flex-start：顶端对齐
- flex-end：底部对齐
- center：竖直方向上居中对齐
- baseline：item第一行笔墨的底部对齐
- stretch：当item未设置高度时，item将和容器等高对齐
备注：父节点flex-container与子节点flex-item存在高度差，才起到作用
.flex-container{
height: 200px;
align-items: flex-start; /* 1 */
align-items: flex-end; /* 2 */
align-items: center; /* 3 */
align-items: baseline; /* 4 */
align-items: stretch; /* 5 */
}
.flex-item{
height: 100px;
}
.red,.green{
font-size: 14px;
}
align-content
该属性定义了当有多根主轴时，即item不止一行时，多行在交织轴轴上的对齐体式格局。注重当有多行时，定义了align-content后，align-items属性将失效。
align-content能够值寄义以下（假定主轴为程度方向）：
- flex-start：左对齐
- flex-end：右对齐
- center：居中对齐
- space- between：两头对齐
- space-around：沿轴线均匀分布
- stretch：各即将依据其flex-grow值舒展以充足占有盈余空间
备注：1、设置flex-wrap：wrap，不然默许nowrap依据比例排满一行。
2、父节点flex-container与子节点flex-item存在高度差，才起到作用
.flex-container{
flex-wrap: wrap;
height:300px;
background: #969799;
align-content: flex-start; /* 1 */
align-content: flex-end; /* 2 */
align-content: center; /* 3 */
align-content: space-between; /* 4 */
align-content: space-between; /* 5 */
align-content: stretch; /* 6 */
}
子节点项目
item的属性在item的style中设置。item共有以下六种属性
- order 值是整数，默以为0，整数越小，item分列越靠前
- flex-grow 是其他item的放大倍数
- flex-shrink 但空间不足，依据比例被消化,需在父节点容器中设置flex-basis宽度
- flex-basis 划定item项目的宽度
- flex 是flex-grow flex-shrink flex-basis的总和
- align-self 许可item本身在交织轴(竖方向)有对齐体式格局
order
order的值是整数，
默以为0，整数越小，item分列越靠前
.flex-container{
flex-flow: wrap;
}
.flex-items{
order:1;
}flex-grow
定义了当flex容器有过剩空间时，item是不是放大。默许值为0，即当有过剩空间时也不放大；能够的值为整数，示意差别item的放大比例
备注：item项目未划定宽度，则分派一行宽度，纵然划定了宽度也分派过剩空间
.flex-item{
flex-grow: 1;
}
/* 1 */
.flex-contanier{
flex-wrap: wrap;
}
/* 2 */
.flex-contanier{
flex-wrap: nowrap;
}
flex-shrink
定义了当容器空间不足时，item是不是减少。默许值为1，示意当空间不足时，item自动减少，其能够的值为整数，示意差别item的减少比例。
备注：这个比较懵逼，待剖析
flex-basis
示意项目在主轴上占有的空间，默许值为auto。
.red{
flex-basis: 100px;
}
.green {
flex-basis: 100px;
}
flex
flex属性是flex-grow、flex-shrink和flex-basis三属性的简写总和
详细检察以上三个
align-self
align-self属性许可item有本身奇特的在交织轴上的对齐体式格局，它有六个能够的值，默许值为auto
- auto：和父元素align-self的值一致
- flex-start：顶端对齐
- flex-end：底部对齐
- center：竖直方向上居中对齐
- baseline：item第一行笔墨的底部对齐
- stretch：当item未设置高度时，item将和容器等高对齐
备注：与父节点flex-container中的align-item, align-content同个意义，差别的是align设置的是单个的，而align-items设置的
.green{
align-self: auto;
align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: baseline;
align-self: stretch;
}
备注：align-self: baseline; align-self: stretch; 与1 2一样在此不做多引见，能够参考align-items
