持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情。

CSS五种布局

1、默认文档流(默认的HTML结构的顺序显示)

2、浮动布局(通过float属性显示 clear 清除浮动)

3、定位布局(通过position属性显示)

4、flex布局(自适应，响应式布局)

5、grid布局(类似flex布局，不过对浏览器兼容性更差)

flex布局

flex布局的子元素不会脱离文档流
弹性盒子 指使用display:flex 或 display:inline-flex 声明的父容器，子元素/弹性元素指的是父容器里面的子元素们

flex-direction 默认：row 横向排列； column：从上向下排列； row-reverse与 row相反； column-reverse与 column 相反

flex-warp 项目是否换行 nowarp (默认)表示不换行，容器内项目超出容器宽度会强行等分容器宽度从而不换行 warp 超出父容器，自然换行 warp-reverse也是换行，但第一排会紧贴容器底部，与warp效果相反

flex-flow 是 flex-direction 与 flex-warp的属性简写集合，默认属性为 row nowarp，即横向排列且不换行

justify-content 控制项目在主轴的对齐方式，取值： flex-start 从主轴起点对齐 center 居中； flex-end 从主轴终点对齐； space-between 两端对齐，项目之间间距相等； space-around 项目间间距为左右两侧项目到容器间距2倍。

align-items 控制项目在交叉轴的排列方式，默认 stretch 即如果项目没设置高度，或者高度为auto，则占满整个容器； flex-stat会让项目在纵轴紧贴容器顶部，flex-end与之相反； center 在纵轴中心位置排列 baseline 让项目以第一行文字的基线为参照进行排列

align-content 控制多行项目的对齐方式，若项目只有一行则不起作用默认 stretch 在项目没有设置高度或宽度的情况下让项目填满整个容器

项目属性：
flex-grow        定义项目的放大比例，默认为0.即如果存在剩余空间，也不放大
flex-shrink        定义项目的缩小比例，默认为1.即如果空间不足，该项目将缩小

设置flex盒子中子元素居中

    display: flex;  
    justify-content: center;  
    align-items: center

CSS学习笔记(柒)

CSS五种布局

flex布局