CSS实现横向布局

float普通盒子

实现横向布局

需要向横着布局元素添加float，值为left/right

问题：使用float后，所在父级元素无高度会导致下方元素向上移动

解决：

1.给父级元素设置高度（不推荐）

2.父级元素不设置高度，给父级元素中增加

overflow: hidden;

使得父级高度随着子级高度最高的变化而变化 （推荐）

无法解决的问题：

1.元素均分父级，需要计算且不一定能均分

2.元素之间的间距均匀分布，需要计算且不一定能均分

3.书写比较繁琐，代码冗余

内联块级盒子

实现横向布局

需要向横向布局的元素添加

display: inline-block;使其变为内联块级元素

问题：使用后元素之间产生莫名的空隙，对整体布局产生影响

原因：浏览器会把空格换行都当成空白

解决：

1.把元素首尾相连（不推荐）

2.把文字大小进行处理，给使用display: inline-block;的父级元素设置字体大小为0（

font-size:16px;），并且该元素要设置有效字体大小

before：

after：

无法解决的问题：

1.元素均分父级，需要计算且不一定能均分

2.元素之间的间距均匀分布，需要计算且不一定能均分

3.书写比较繁琐，代码冗余

弹性盒子

给要横着布局的元素的父级元素添加

display: flex;

父级高度随着子级高度最高的变化而变化

1.flex-direction:

控制弹性盒子内元素的排列方向，取值包括：

flex-direction:column;纵向从上到下排列

flex-direction:column-reverse;纵向从下到上排列

flex-direction:rows;纵向从左到右排列

flex-direction:row-reverse;纵向从右到左排列

2.flex-wrap:

控制弹性盒子内子元素是否换行，取值包括

flex-wrap: wrap;子元素换行

flex-wrap: nowrap;子元素不换行

3.order:

设置弹性盒子内元素的排列顺序（作用到子元素）

取值为整数，值越小该子元素顺序越靠前

order: 6;

4.flex:

控制弹性盒子内子元素的缩放比例（复合属性）

flex-grow: （拉伸因子）

扩张盒子比例：（左右中）

flex-grow: 4;flex-grow: 3;flex-grow: 1;

如果想要三者均匀分布，则把三者的flex-grow:的值设为一样的数字

flex-shrink：（压缩因子）把三者的宽度初始值设为一样的，压缩比例也设置为一样的

flex-basis：基准因子，未设置长度是按照基准因子的值进行大小分配

5.justify-content:

控制弹性盒子内子元素的分布方式，（设置于父级元素）取值包括：

justify-content: flex-start;

代表在排列方向上的开始位置分布

justify-content: flex-end;

代表在排列方向上的结束位置分布

justify-content: center;

代表在排列方向上的中间位置分布

justify-content: space-between;

代表空白均匀分布到元素和元素之间

justify-content: space-evenly;

代表在空白均匀分布到各个空隙

justify-content: space-around;

代表在空白均匀分布到元素周围

6. align-items:

控制弹性盒子内子元素在垂直方向的分布方式，取值包括：

align-items:flex-start;

顶部对齐/左边对齐

align-items:flex-end;

底部对齐/右边对齐

align-items:center;

居中对齐

align-items:baseline;

首行底部对齐

7.align-content

设置弹性盒子内多行的分布方式，（设置于父级元素）取值包括

（此时父级元素设置flex-wrap: wrap;行满进行换行 ）

align-content: flex-start;

所有行都靠近顶部（左端）

align-content: flex-end;

所有行都靠近底部（右端）

align-content: center;

所有行居中显示

align-content: space-between;

空白均匀分布到行与行之间

align-content: space-around;

空白均匀分布到行的上下两端

align-content: space-evenly;

空白均匀分布的各个间隙