Web前端学习整理(十三)

flex布局

即弹性布局,提供了一种更加灵活和高效的方式来对容器中的项目进行排列|对齐|分配空白空间

设置方式:

        -通过父元素设置弹性盒子模型,并且设置子元素的位置和状态

display:flex;

        -容器本身不会发生变化,但是子元素会并排成一行

        -父元素宽度以及高度不足时,子元素会自动分配其中的空间

        -弹性容器子元素默认继承父级高度,宽度由内容撑开

设置主轴方向

flex-direction 用来控制子元素的布局位置

        -row 默认从左向右排列

        -row-reverse 从右向左排列

        -column 从上到下排列

        -column 从下到上排列

交叉轴方向

flex-wrap

用于设置子元素是否在触碰边界后换行

        -nowrap 不换行,默认值

        -wrap 换行

        -wrap-reverse 反向换行,堆砌在上方

主轴水平对齐

justify-content

        -center 居中

        -flex-start 主轴开始位置

        -flex-end 主轴结束位置

        -space-between 子元素两端对齐,中间留下空隙

        -space-evenly 两端留下空隙,子元素之间也有空隙,且空隙间隔相等

        -space-around 两端留下空隙,子元素之间也有空隙,但是子元素和子元素之间的间隙是两端空隙的两倍

交叉轴多行对齐

align-content

        -center 居中

        -flex-start 主轴开始位置

        -flex-end 主轴结束位置

        -space-between 子元素两端对齐,中间留下空隙

        -space-evenly 两端留下空隙,子元素之间也有空隙,且空隙间隔相等

        -space-around 两端留下空隙,子元素之间也有空隙,但是子元素和子元素之间的间隙是两端空隙的两倍

此外还有单行对齐方式,不予介绍