在弹性布局里，父元素称为容器，子元素称为项目。项目排列由容器控制，控制属性都写在容器里。要使用弹性布局，要先使父元素display:flex;
例：以下写了项目的排列方式、项目换行、项目的对齐方式
<!-- HTML --><div class="baba"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div></div>
/* CSS */.baba{background-color: yellowgreen;/* 让父元素变成flex布局 */display: flex;/* 容器属性1：主轴方向（flex-direction），就是在容器中项目的排列方式 *//* 默认方向，横向从左向右，左是起点~右是终点 */flex-direction: row;/* 横向从右向左，右是起点~左是终点 */flex-direction: row-reverse;/* 纵向从上向下，上是起点~下是终点 */flex-direction: column;/* 纵向从下向上，下是起点~上是终点 */flex-direction: column-reverse;/* 项目换行 *//* wrap nowrap wrap-reverse *//* 默认不换行 */flex-wrap: nowrap;/* 换行 --宽度是生效状态 */flex-wrap: wrap;/* 反向换行 */flex-wrap: wrap-reverse;/* 简写 包含主轴方向和是否换行 */flex-flow: row wrap;/* 主轴方向对齐方式 *//* 起点对齐，起点是主轴的开始方向 */justify-content: flex-start;/* 终点对齐，终点是主轴的结束方向 */justify-content: flex-end;/* 居中对齐 */justify-content: center;/* 两端对齐 */justify-content: space-between;/* */justify-content: space-around;} .baba>div{width: 100px;height: 100px;border: 2px solid #000;background-color: #F00;}
