Flex简记

Posted 2020-12-02 freeland

display的flex属性的使用对象分为1、容器即包含有元素的元素，2、项目，即某一个元素。就容器而言，flex可以实现换行（flex-wrap），改变容器内元素的排列方向（flex-direction：roe, colum,fle-end(start))（注：一旦改变排列方向，主轴方向也会随之改变。）以及排列顺序（正序排列还是反序reverse）。在一根主轴上的元素还可以实现对齐方式（justify-content：space-between（两端对齐）、space-around（两端对齐）、space-evenly（若有剩余空间，元素会平均分配），若换行则需要进行垂直方向的对齐方式：align-content，若没有换行，使用align-items进行垂直方向的排列方式（flex-end、start，还是center居中）。flex使布局更为好看，简便，避免浮动。用于项目即单个元素，实现缩放排序等。