css中flex=1,CSS/CSS3 1 flex布局

1 flex布局称弹性盒子 (flex 弹性)

.box {

display: flex;

复制代码

}

2 parent样式

1 flex-direction 主轴方向 (direction 方向)

参数 row | row-reverse | column |column-reverse (row行 column柱)

默认参数 row 横向 左->右 /* flex-direction:row; */

rowe-reverse 横向 右->左 /* flex-direction: row-reverse; */

column 纵向 上->下 /* flex-direction: column; */

column-reverse 纵向 下->上 /* flex-direction: column-reverse; */

2 flex-wrap 换行

参数 nowrap | wrap | wrap-reverse

默认参数 nowrap 不换行 /* flex-wrap: nowrap; */

wrap 超出换行 /* flex-wrap: wrap; */

wrap-reverse 下->上 /* flex-wrap: wrap-reverse; */

3 flex-flow ---flex-direction 和 flex-wrap 的简写

默认 row nowrap

4 justify-content 横向对齐方式 (justify 使每行排列)

参数 flex-start | flex-end | center | space-between | space-around | space-evenly

(between 之间 around 环绕 evenly 均匀)

默认参数 flex-start 左对齐 /* justify-content: flex-start; */

flex-end 右对齐 /* justify-content:flex-end; */

center居中 /* justify-content:center; */

space-between 两端对齐 间距相等 /* justify-content:space-between; */

space-around 间距相同 距边框2/1间距 /* justify-content:space-around; */

space-evenly 所有间距相同包括 /* justify-content:space-evenly; */

5 align-items 纵向单行对齐方式 (align 排列)

参数 flex-start | flex-end | center | baseline | stretch

(baseline基线 stretch拉长)

默认参数 flex-start 上对齐 /* align-items: flex-start */

flex-end 下对齐 /* align-items:flex-end */

center 垂直居中 /* align-items:center */

baseline 第一行文字对齐 /* align-items:baseline */

strech 如果项目未设置高度 自动100% /* align-items: stretch */

6 align-content 纵向多行对齐方式

参数 flex-start | flex-end | center | space-between | space-around | stretch

默认参数 stretch 填充满 /* align-content: stretch; */

flex-start 上对齐 /* align-content:flex-start */

flex-end 下对齐 /* align-content: flex-end; */

cneter 居中 /* align-content: center; */

space-between 上下对齐 /* align-content: space-between; */

space-around 间距相同 距边框2/1间距 /* align-content: space-around; */

3 children样式

1 order 排列顺序 (order顺序)

参数 整数

越小的越靠前

2 flex-grow 剩余空间分配 (grow扩大)

参数 数字 0宽度不变 1分配1份 2分配2份

3 flex-shrink (shrink收缩)

参数 数字 0 宽度不变 1 减小1份 2 减小2份

4 flex-basis 分配空间之前 占用的宽度 (basis基础)

参数 auto | px

5 flex ---flex-grow flex-shrink flex-basis 的简写