flex布局属性说明
FLEX容器 flex container
<style>
/*声明flex容器*/
.box {
display: flex;
}
</style>
<div class="box"></div>
属性 | 默认值 | 可选值 | 说明 |
---|---|---|---|
flex-direction | row | row <br/> row-reverse <br/> column <br/> column-reverse | 主轴方向 |
flex-wrap | nowrap | nowrap <br/> wrap <br/> wrap-reverse | 换行方式 |
flex-flow | row nowrap | <flex-direction> <flex-wrap> | flex-direction、flex-wrap的简写 |
justify-content | flex-start | flex-start <br/> flex-end <br/> center <br/> space-between <br/> space-around <br/> space-evenly (?) | 主轴对齐方式 |
align-items | stretch | flex-start <br/> flex-end <br/> center <br/> baseline <br/> stretch | 交叉轴对齐方式 |
align-content | stretch | flex-start <br/> flex-end <br/> center <br/> space-between <br/> space-around <br/> stretch | 多根交叉轴对齐方式 |
FLEX项目 flex items
<style>
/*声明flex容器*/
.box {
display: flex;
}
.item {
display: flex;
align-items: flex-start;
justify-content: flex-end;
flex:1;
height:50px;
width:120px;
background-color: bisque;
margin:5px;
}
.x {
/* align-self: flex-end; */
flex:3;
}
</style>
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item x"></div>
<div class="item">1, 2, 3</div>
</div>
属性 | 默认值 | 可选值 | 说明 |
---|---|---|---|
order | 0 | 整型 支持负数 | 排列顺序。数值越小排列越靠前 |
flex-grow | 0 | 数字,不支持负数 | 空间剩余放大占比,为0不放大 |
flex-shrink | 1 | 数字,不支持负数 | 空间不足缩小占比,为0不缩小 |
flex-basis | auto | 长度值 auto | 可设置px、rem等长度 |
flex | 0 1 auto | auto(1 1 auto) <br/> none(0 0 auto) <br/> [ <'flex-grow'> <'flex-shrink'>? <'flex-basis'> ] | flex-grow, flex-shrink 和 flex-basis的简写 |
align-self | auto | auto <br/> flex-start <br/> flex-end <br/> center <br/> baseline <br/> stretch | 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch |
flex属性值含义 flex属性 是 flex-grow、flex-shrink、flex-basis三个属性的简写。 推荐使用此简写属性,而不是单独写这三个属性。 flex属性优先级高于 width height
flex-grow:定义项目的的放大比例;
- 默认为
0
,即 即使存在剩余空间,也不会放大; - 所有项目的flex-grow为 1:等分剩余空间(自动放大占位);
- flex-grow为 n 的项目,占据的空间(放大的比例)是flex-grow为1的 n 倍。
flex-shrink:定义项目的缩小比例;
- 默认为
1
,即 如果空间不足,该项目将缩小; - 所有项目的flex-shrink为 1:当空间不足时,缩小的比例相同;
- flex-shrink为 0:空间不足时,该项目不会缩小;
- flex-shrink为 n 的项目,空间不足时缩小的比例是flex-shrink为1的n倍。
flex-basis: 定义在分配多余空间之前,项目占据的主轴空间(main size),浏览器-根据此属性计算主轴是否有多余空间
- 默认值为auto,即 项目原本大小;
- 设置后项目将占据固定空间。
flex写法(简写) | flex-grow flex-shrink flex-basis | 说明 |
---|---|---|
没有设置 | 0 1 auto | 不放大会缩小(默认值) |
auto | 1 1 auto | 放大且缩小 |
none | 0 0 auto | 不放大也不缩小 |
n | n 1 0% | n 为非负数字,如为1,自动放大占满剩余空间,如果有多个,则合计所有n值的总和后按占比分配空间 |
n1 n2 | n1 n2 0% | n1 ,n2 为非负数字 |
L | 1 1 L | L 为一个长度值(px rem等)或百分比 |
n L | n 1 L | n 为非负数字,L为一个长度值(px rem等)或百分比 |