web----弹性盒子

设置主轴方向

flex-direction:row(默认)   起点在左端(水平方向)

                      row-reverse 起点在右端(水平方向)

                      column:竖直方向 起点在上边

                      column-reverse 竖直方向 起点在下边

设置子元素是否换行  默认no-wrap 

 flex-wrap:wrap;

justify-content: flex-start 默认  轴起点对齐

                        flex-end   轴终点对齐

                        center     居中

                        space-between 两端对齐 中间元素间隔相等

                        space-around  每个元素之间间隔相等

                        space-evenly  每个元素之间间隔相等 两端距离也相等

交叉轴对齐方式

align-items: flex-start  默认 轴起点对齐(上边)

                   flex-end    轴终点对齐(下边)

                   center      垂直居中

                   baseline    (项目第一行)文本的下基准线对齐

调整换行的排列方式 

align-content: flex-start;

你可能感兴趣的:(前端,html,javascript,css)