今天给大家分享一下flex的一些方法
这是flex的大致属性下面有更详细的介绍和用法
display:flex
flex-direction：属性决定主轴的方向（即项目的排列方向）
flex-wrap属性定义，如果一条轴线排不下，如何换行。
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content属性定义了项目在主轴上的对齐方式。
align-items属性定义项目在交叉轴上如何对齐。
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
- body部分
<body>
<div clsaa="box">
<div></div>
<div></div>
</div>
</body>
- css样式
.box{
display: flex;//定义flex
flex-direction: row;//（默认）从左往右
flex-direction:row-reverse;//从右往左
flex-direction: column;//从上忘下
flex-direction: column-reverse;//从下往上
flex-wrap: nowrap;//（默认）不换行
flex-wrap: wrap;//从左到右,从上往下自动排列
flex-wrap: wrap-reverse;//从左到右，从下往上自动排列
justify-content: flex-end;//向主轴右对齐
justify-content: center;//剧中
justify-content: flex-start;//(默认)向主轴左对齐
justify-content:space-between;//两端对齐
justify-content: space-oround;//分给所有伸缩向的周围（平均）
align-items: stretch;//(默认)如果子集不给高度就拉伸到父级的高度如果子集给高度就不生效,在屏幕的上面
align-items: flex-end;//在盒子的下面
align-items: center;//在盒子的中间
align-content: stretch;//(默认)控制所有的行
align-content: flex-start;//向上靠近
align-content: flex-end;//向下靠近
align-content: space-between;//水平方向平分
align-content: space-around;//所有的平分
}
.box div:nth-child(1){
flex-grow: 2;//属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink: 2; //缩小比例
align-self: flex-end;//加在单个伸缩容器上面
order: 1;//加在子集上值越大越靠后
}
.box div {
flex-grow: 1;
flex-basis: 100px;//（默认是auto）
flex-shrink: 1;
}
7487
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
