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等）或百分比