css与flex布局

自学前端系列之HTML与CSS

第四节：CSS之flex布局

flex布局是什么

• flex布局，就是弹性布局，它具有强大的灵活性，很好地解决了子元素的对齐和分布等问题

如何使用flex布局

• 利用display属性，给任意元素声明display：flex，进行flex布局

对齐方式

水平方向对齐：justify-content，以x轴方向排列， 属性值有以下几种

• 靠左对齐：flex-start；
• 居中对齐：center；
• 靠右对齐：flex-end；
• 中间元素平分：spacebetween；如果只有一个项目则只在容器主轴的开始位置排列
• 分散对齐，都平分：space-evenly；
• 左右两边留白为平分空间的二分之一：space-around，每个项目两侧的间隔相等